Google+ Followersウィジェットをサイトに設置する方法


最近よくFaceBook Followers ウィジェットを配置しているサイトを見かけますが、実はGoogle+にも「Google+ Followers ウィジェット」があります。今回は「Google+ Followers ウィジェット」の簡単な設置方法について説明したいと思います。

Google+ Followers ウィジェットの設置方法

Google+ Followers ウィジェットの設置はまったく難しくありません。必要なJavaScriptと指定タグを埋め込むだけです。では順番に見ていきましょう。

JavaScriptの追加

以下のJavaScriptをページの</body>の直前に追加します。注意点としては他のGoogleボタンを既に設置しているページの場合は、おそらく同じスクリプトになっているので、この場合は追加する必要がありません。

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

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

ウィジェット用のタグを追加する

次にウィジェットを表示する場所に以下のタグを追加します。

<div class="g-plus"
	data-action="followers"
 	data-href="//plus.google.com/<Google+ ID>"
 	data-height="300"
 	data-width="300">Widget</div>

自分のサイトやページに合わせて修正すべき箇所は以下の3つ。

  • data-height   ウィジェットの高さ
  • data-width    ウィジェットの幅
  • data-href       コンテンツURL

data-hrefについては表示したいGoogle PlusのコンテンツURLを指定します。(https:がなくても問題ないようです。)

実際の表示サンプル

個人のフォロワー

個人のフォロワーを表示する場合は、data-href="//plus.google.com/<個人のGoogle+ ID>"を指定します。Google PlusでカスタムURLを利用している場合はカスタムURLでも問題ありません。例えば著者の場合は //plus.google.com/+takaharakou になります。

Widget

Google+ Pageのフォロワー

Google+ Pageの場合は、data-href="//plus.google.com/<Google+ Page ID>" を指定します。以下はIT TRICKのGoogle+ Pageです。

Widget

最後に

最後まで読んで頂きありがとうございます。下のソーシャルボタン使って他のユーザーにこの記事を共有してみませんか?





<