5

我正在尝试为我的网站制作一个 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 功能起作用。

4

1 回答 1

9

该文档现在包含一个演示和代码示例，用于说明如何自定义 Google+ 登录按钮以及有关指南的一些关键信息。

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

以下代码包含所有必需参数，并从自定义标记正确生成登录按钮。按钮和图标的风格化完全取决于您，同时确保遵循品牌指南。

<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>
于 2013-03-11T10:29:45.863 回答