Geek asks and answers

Google+ Login Button [class = 'g-signin']

I am trying to make google + siginin button for my site. I looked at this link https://developers.google.com/+/web/signin/#button_attributes and tried to make it work, but now my style is all messed up. I can't mess with [class = 'g-sinin'] in CSS. enter image description here
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 to hide the class by default class='g-signin'or make it good. If I delete the class inside the range, then the whole google + signin function will be disabled. Can someone tell me how I can make the sinegin function work when I click on the background image.

+5
source share
1 answer

.

<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>
+9

More articles:


All Articles