javascript Google+ 登录按钮 [class='g-signin']
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15287669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google+ signin button [class='g-signin']
提问by user1846348
I am trying to make a google+ siginin button for my site. I went through this link https://developers.google.com/+/web/signin/#button_attributesand 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:
我正在尝试为我的网站制作一个 google+ 登录按钮。我浏览了这个链接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>
This is my css:
这是我的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.
如何隐藏默认类class='g-signin'或使其良好。如果我删除跨度内的类，那么整个 google+ 登录功能就会关闭。谁能告诉我如何在单击背景图像时使 siginin 功能工作。
回答by BrettJ
The documentation now includes a demo and code examplesfor how to customize the Google+ Sign-In button as well as some key information about guidelines.
该文档现在包含有关如何自定义 Google+ 登录按钮的演示和代码示例以及有关指南的一些关键信息。
freshbm's answer is close, but has multiple problems in the example so that will not work.
freshbm 的答案很接近，但在示例中存在多个问题，因此不起作用。
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>
