5

サイトに 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です:

.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+ サインイン機能全体がオフになります。背景画像をクリックしたときに siginin 関数を機能させる方法を教えてください。

4

1 に答える 1

9

ドキュメントには、Google +ログインボタンをカスタマイズする方法のデモとコード例、およびガイドラインに関するいくつかの重要な情報が含まれています。

freshbmの答えは近いですが、例では複数の問題があるため、機能しません。

次のコードには、必要なすべてのパラメーターが含まれており、カスタムマークアップからサインインボタンを正しく生成します。ブランディングガイドラインに準拠していることを確認しながら、ボタンとアイコンのスタイルを設定するのは完全にあなた次第です。

<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-11T10:29:45.863 に答える