Google +1 ボタンを表示する †

google_plusone3.png
▲ ▼

基本的なコード †

Google+1ボタン（プラスワンボタン）は、「プラスワン ボタン」でコードを取得できます。

基本的なコードは、以下のようなものです。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone"></div>

サイズを小、言語を日本語、カウンター（+1情報）を非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="small" data-annotation="none" data-href="http://dobon.net/"></div>

「<div class="g-plusone" ...」は「<g:plusone ...」とすることもできます。この場合は、以下のようになります。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<g:plusone size="small" annotation="none" href="http://dobon.net/"></g:plusone>

「head 内か、body 終了タグの直前に次のタグを貼り付けてください。」のタグは、どこにあっても機能します。ただし、「Google +1 Button Performance Review」によると、body終了タグの直前がよい（ページが速く表示される）そうです。（古い情報です。）

▲ ▼

対象とするURLを指定する †

その他のブックマークボタンでも大抵そうですが、+1ボタンには対象とするURLを指定できます。もしこれを指定しなかったとしてもdocument.location.hrefで定義された現在のURLが使われるため、通常は問題ありません。

対象とするURLを明示的に指定するケースは、例えば、別のページの+1ボタンを設置したい時です。例えば、記事の一覧を表示したページで、それぞれの記事の+1ボタンを記事の横に表示する時は、その記事のURLを指定して+1ボタンを設置します。

それ以外でもできればURLを明示的に指定した方がよいです。なぜなら、document.location.hrefのURLに余計なクエリ文字列やアンカーが含まれていると、同じページであっても別のURLとして扱われてしまうかもしれないからです。

URLを明示的に指定する方法は、href属性以外に、link rel="canonical" タグを使う方法があります。詳しくは、「+1 Button  |  Google+ Platform for Web  |  Google Developers」をご覧ください。

▲ ▼

カウンターをテキストで表示する †

google_plusone4.png

「+1情報」を「インライン」にすると、カウンターをテキストで表示することができます。この時、幅も指定することができます。

カウンタをテキストで表示し、幅を300pxとするコードは、以下のようになります。なおwidthは最低で120px（小さいサイズは自動でリサイズされ、推奨最小サイズは250px）で、指定しないと450pxになるようです。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
▲ ▼

非同期的にロードする †

「詳細オプション」の「ダイナミック」にチェックを入れると、非同期的にロードするコードが出力されます。

「ダイナミック」を有効にして取得したコードは以下のとおりです。

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone"></div>

<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
▲ ▼

IEで表示されない †

「<g:plusone ...」のコードをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。

「Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文（「<div class="g-plusone" ...」）を使用するということです。

海外SEO情報ブログさんでは、「data-size」や「data-count」が効かないとありますが、私が試した限りでは、問題なく機能しているようです。

▲ ▼

(X)HTML validにする †

Google +1ボタンのコードを(X)HTML validにする方法は、「javascript - Google +1 Button not W3C compliant - Stack Overflow」や「How to produce valid Google +1 buttons - GabSoftware」にあります。

これに従うと、例えば以下のようなコードになります。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{ lang: 'ja' }
</script>

<div id="plusone-div"></div>

<script type="text/javascript">
gapi.plusone.render('plusone-div', { size: 'small', count: 'true', href: 'http://dobon.net/' });
</script>
▲ ▼

共有ボタン †

共有ボタンは、「Share  |  Google+ Platform for Web  |  Google Developers」でコードを取得することができます。

▲ ▼

コメント †


▲ ▼
ページ情報
[ トップ ]   [ 編集 | 凍結 | 差分 | バックアップ | 添付 | 複製 | 名前変更 | リロード ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]