2013-03-08 3 views
5

Я пытаюсь сделать кнопку google + siginin для моего сайта. Я прошел через эту ссылку https://developers.google.com/+/web/signin/#button_attributes и попытался заставить ее работать, но теперь мой стиль все испорчен. Я не могу возиться с [class = 'g-sinin'] в CSS. 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 + signin отключится. Может ли кто-нибудь сказать мне, как я могу заставить функцию сигинина работать при нажатии на фоновое изображение.

+0

Какое влияние вы хотите? Здесь не совсем ясно. –

+0

@albertxting, как я могу заставить функцию сигинина работать при нажатии на фоновое изображение. – user1846348

+0

Можете ли вы опубликовать живую версию этого для нас, чтобы посмотреть? Вы можете использовать http://jsfiddle.net –

ответ

9

documentation now includes a demo and code examples о том, как настроить кнопку входа в Google+, а также некоторую ключевую информацию о рекомендациях.

Ответы 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> 
+0

Я использовал этот только. Но он дает нам предупреждение в Google pagespeed.https: //developers.google.com/speed/pagespeed/insights/? Url = https% 3A% 2F% 2Fwww.winni.in% 2Fcake-delivery-in-bangalore. Кеширование браузера Levarge. Если я удалю https://apis.google.com/js/client:plusone.js?onload=render, тогда будет увеличиваться количество баллов в тысячах страниц. Как решить эту проблему. –

Смежные вопросы