Google+

消費者向けのGoogle+は、2019/08末までにサービスが終了します。コンシューマー向け「Google+」打ち切りへ APIの不具合で50万人の個人データ露呈 - ITmedia エンタープライズ 鈴木聖子 (2018/10/09) Project Strobe: Protecting your data, improving our third-party APIs, and sunsetting consumer Google+ (2018/10/08)

+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>

フォロワー

フォロワー数の表示

Google+ 設定の[プロフィール]にある[自分をサークルに追加しているユーザーを表示する (自分をサークルに追加したユーザーを表示する)]を有効にすることで、プロフィールにフォロワー数が表示されるようになります。この設定を変更しても表示されない場合には、直前にある[プロフィールの [サークルのメンバー] を表示できるユーザー]の設定を変更してみます。

参考

複数の技術系サイトから、まとめて検索