4

現在、Google Plusバッジは幅の変更に自動的に応答します：https ：//developers.google.com/+/plugins/badge/

私たちの新しいウェブサイトのデザインはレスポンシブレイアウトにBootstrapを使用していますが、どうすればこれをレスポンシブにすることができますか？

現在のバッジコードは次のとおりです。

<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="230" data-href="//plus.google.com/102018846923934084444" data-rel="publisher"></div>

<!-- Place this tag after the last badge tag. -->
<script type="text/javascript">
  (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

ご覧のとおり、デフォルトの幅は230ピクセルです。これをきれいに行う方法にちょっと戸惑いましたか？

ありがとう！

4

3 に答える 3

4

これは私にとってはうまくいきました。G-Person クラスのバッジが 1 つしかない場合。

<div id="google-badge" style="width: 100%">
    <!-- Place this tag where you want the widget to render. -->
    <div class="g-person" data-href="//plus.google.com/104771303799616655833" data-rel="author" data-width="180"></div>
    <!-- Place this tag after the last widget tag. --><script type="text/javascript">
    window.___gcfg = {lang: 'de'};

    // just put this in here
    document.getElementsByClassName('g-person')[0].setAttribute('data-width', document.getElementById('google-badge').clientWidth);

    (function () {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
    </script>
</div>
于 2013-12-01T19:48:12.470 に答える
2

ウィジェットを使用する代わりに、基本的に単なるリンクと画像である「静的」バッジ オプションを使用できます。ウィジェット コードは、レンダリング後に属性の更新をリッスンしません。また、バッジ ウィジェットの高さと幅には制約があり、レスポンシブ レイアウトでの幅/高さの計算方法によっては、バッジがレンダリングされない可能性があります。

移動せずにすぐにサークルに追加できるような静的なバッジを使用すると、動的な機能が失われますが、レイアウトをより細かく制御できます.

于 2013-01-10T16:27:34.990 に答える
0

これが私がやったことです...

Twitter のブートストラップ スキャフォールディング クラスを使用して、ブラウザーの "モード" (デスクトップ、タブレット、電話など) に応じてレンダリングされる複数のバッジを作成しました。

Twitter ブートストラップの足場

それはうまくいきました！

于 2013-01-13T19:41:22.690 に答える