google-plus - Google+ 登录按钮自定义图片

Question

我已经使用 Google 的教程实现了登录，但该按钮并不真正适合我正在使用它的网站的设计。我想使用我的平面设计师制作的图像。目前是否可以为登录按钮使用自定义图像？

Answer 1

您可以使用gapi.signin.render将指定的容器呈现为登录按钮。例如，如果在您的 HTML 代码中，您有：

<button id="mySignIn">SignIn</button>

Javascript 调用将类似于：

gapi.signin.render("mySignIn", { 
  'callback': signinCallback, 
  'clientid': 'CLIENT_ID', 
  'cookiepolicy': 'single_host_origin', 
  'requestvisibleactions': 'http://schemas.google.com/AddActivity',
  'scope': 'https://www.googleapis.com/auth/plus.login'
});

另外，请记住遵循品牌指南。

Answer 2

以下代码用于将登录按钮添加到页面对吗？

<span id="signinButton">  
   <span 
      class="g-signin" 
      data-callback="signinCallback" 
      data-clientid="CLIENT_ID" 
      data-cookiepolicy="single_host_origin" 
      data-requestvisibleactions="http://schemas.google.com/AddActivity" 
      data-scope="https://www.googleapis.com/auth/plus.login">  
   </span>
</span>

您是否尝试过简单地将“g-signin”类替换为您自己的类？

如果 google 自己需要 g-signin，要确定哪个是实际的登录按钮，您总是可以为其添加一个子类。

<span class="g-signin custom" ...></span>

在您的 CSS 中，这将显示为：

.g-signin .custom {
/*properties*/
}