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

我想为我的网站制作一个Google + siginin按钮。我通过这个链接https://developers.google.com/+/web/signin/#button_attributes并试图使其工作，但现在我的造型都搞砸了。我无法在CSS中使用[class ='g-sinin']。 enter image description here
这是我的代码：Google+登录按钮[class ='g-signin']

<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 +登录功能将关闭。任何人都可以告诉我，如何在单击背景图像时使西格宾功能起作用。

来源

2013-03-08 user1846348

你想要什么效果？这里没有说清楚。 – 2013-03-08 06:01:31

@albertxting，如何在单击背景图像时使siginin功能正常工作。 – user1846348 2013-03-08 06:21:42

你可以发布这个实时版本供我们看看吗？你可以使用http://jsfiddle.net – 2013-03-08 06:27:42

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

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>

来源

2013-03-11 10:29:45 BrettJ

我只用过这个。但它给了我们在Google pagespeed.https：//developers.google.com/speed/pagespeed/insights/？url = https％3A％2F％2Fwww.winni.in％2Finding-in-bangalore中的警告。 Levarge浏览器缓存。如果我删除https://apis.google.com/js/client:plusone.js?onload=render，那么我的pagespeed分数将会增加。如何解决这个问题呢。 – 2017-02-07 11:22:26

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

回答

相关问题