Google+登入按钮[class ='g-signin'] [英] Google+ signin button [class='g-signin']

问题描述

我想为我的网站创建一个google + siginin按钮。我通过此链接，了解如何自定义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）{
 //响应登录，请参阅https://developers.google.com/+/web/signin/ 
} 
< / script> 
< div id =customBtnclass =customGPlusSignIn> 
< span class =icon>< / span> 
< span class =buttonText> Google< / span> 
< / div> 
  

I am trying to make a google+ siginin button for my site. I went through this link https://developers.google.com/+/web/signin/#button_attributes and tried to make it working but now my styling is all messed up. I am not able to mess around with the [class='g-sinin'] in CSS.
This is my code:

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

This is my css:

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

How do I hide the default classclass='g-signin' or make it good. If I remove the class inside the span then whole google+ signin function goes off. Can anyone tell me how can I make the siginin function work when clicked on the background image.

解决方案

The documentation now includes a demo and code examples for how to customize the Google+ Sign-In button as well as some key information about guidelines.

freshbm's answer is close, but has multiple problems in the example so that will not work.

The following code includes all the required parameters and correctly generates a sign-in button from custom markup. It would be entirely up to you to stylize the button and icon, while making sure to follow the 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+登入按钮[class ='g-signin']的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！