Google+ログインボタン[クラス= 'g-signin']

Question

自分のサイトにgoogle + sigininボタンを作成しようとしています。私はこのリンク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> 

これは私のCSSです：私は、デフォルトのクラスclass='g-signin'を非表示にしたり、それが良い作るにはどうすればよい

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

。スパンの内側でクラスを削除すると、Google +サインイン関数全体がオフになります。誰も私がどのようにバックグラウンドイメージをクリックしたときにsiginin機能を動作させることができるか教えてもらえますか？

Answer 1

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>