Google+ 登录按钮 [class='g-signin']

Posted 2023-04-14

【中文标题】Google+ 登录按钮 [class=\'g-signin\']

【英文标题】：Google+ signin button [class='g-signin']Google+ 登录按钮 [class='g-signin']

【发布时间】：2013-02-23 14:58:40

【问题描述】：

我正在尝试为我的网站制作一个 google+ siginin 按钮。我浏览了这个链接https://developers.google.com/+/web/signin/#button_attributes 并试图让它工作，但现在我的样式都搞砸了。我无法处理 CSS 中的 [class='g-sinin'] 。 这是我的代码：

 <section class='login_G' >
   <span class='g-signin' data-callback='signinCallback' 
   data-scope='https://www.googleapis.com/auth/plus.login'></span>
</section>

这是我的 CSS：

.login_G 
  cursor: pointer;
  margin-left: 35px;
  float: left;
  height: 72px;
  width: 72px;
  background:url(images/register-google-sprite.png) 0 0;

如何隐藏默认类class='g-signin' 或使其良好。如果我删除跨度内的类，那么整个 google+ 登录功能就会关闭。谁能告诉我单击背景图像时如何使 siginin 功能起作用。

【问题讨论】：

你想要什么效果？这在这里并没有真正说清楚。

@albertxting ，单击背景图像时如何使 siginin 功能起作用。

您能发布一个现场版本供我们查看吗？你可以使用jsfiddle.net

另外，把按钮变成红色就够了吗？试试 data-theme="dark"

【参考方案1】：

documentation now includes a demo and code examples 了解如何自定义 Google+ 登录按钮以及有关指南的一些关键信息。

freshbm 的答案很接近，但在示例中存在多个问题，因此无法正常工作。

以下代码包含所有必需参数，并从自定义标记正确生成登录按钮。按钮和图标的样式完全取决于您，同时确保遵循branding guidelines。

<script type="text/javascript">
  (function() 
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js?onload=render';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  )();

  function render() 
    gapi.signin.render('customBtn', 
      'callback': 'signinCallback',
      'clientid': 'xxxxxxxxxx.apps.googleusercontent.com',
      'cookiepolicy': 'single_host_origin',
      'scope': 'https://www.googleapis.com/auth/plus.login'
    );
  
  function signinCallback(authResult) 
    // Respond to signin, see https://developers.google.com/+/web/signin/
  
  </script>
  <div id="customBtn" class="customGPlusSignIn">
    <span class="icon"></span>
    <span class="buttonText">Google</span>
  </div>

【讨论】：

我只用过这个。但它在 Google pagespeed.developers.google.com/speed/pagespeed/insights/… 中给了我们警告。利用浏览器缓存。如果我删除apis.google.com/js/client:plusone.js?onload=render，那么我的页面速度分数会增加。如何解决这个问题。