Google+

+1ボタン

+1ボタンの設置に必要なコードは、+1 ボタン - Google+ Platformで取得できます。

コードの解説

+1ボタンを表示する位置に、次のコードを記述します。

<div class="g-plusone"
  data-href="http://example.com" <!-- 対象のURL -->
  data-annotation="inline" <!-- +1ボタンの横に表示する情報 -->
  data-width="300">
</div>

次のスクリプトは、すべての+1ボタンのタグより後に記述します。

<script type="text/javascript">
    window.___gcfg = { // Script tag parameters
        lang: 'ja',         // +1ボタンの言語
        parsetags: 'onload' // +1ボタンの表示タイミング
    };

    ( 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>
+1タグの属性
属性 説明
href +1する対象のURL
size ボタンのサイズ
  • small
  • medium
  • standard (既定)
  • tall
annotation ボタンの横に表示する+1情報
  • none … なし
  • bubble … ユーザー数 (既定)
  • inline … ユーザー数とそのプロフィール画像


inline

IE7での予期せぬ改行を防ぐには、

#___plusone_0 {
    *display: inline !important;
}

のスタイルを定義します。

設置例

シンプルな形式

<script type="text/javascript"
  src="https://apis.google.com/js/plusone.js"></script>

<div class="g-plusone"></div>