Google ＋1 ボタンをFC2ブログにvalidなHTMLで設置する

遅ればせながらこのブログにもGoogle +1 ボタンを設置した。調べてみるといくつかのエントリで「+1」されていたようだったので、せっかくだからテンプレートを小カスタマイズするついでに利用してみることに。

ところが単に設置するだけなら別に難しくないんだけど、（HTML文法エラーになる）独自タグを使わないで、かつ記事ごとに別のボタンを設置するとなるとちょっと面倒なことが判明。というわけで、前半では普通にFC2ブログに+1ボタンを設置する方法を、後半ではGoogleの独自タグを使わないで記事ごとに+1ボタンを設置する方法を紹介。

普通にGoogle +1 ボタンを設置する

まず最初に以下のコードをテンプレートの上部にある<head>から</head>の間か、最下部にあるはずの</body>の直前に書き込む。headタグ内に入れると+1ボタンの素早い表示が期待できるけど、もしGoogleのサーバが重くなっているとページ全体の読み込みが遅くなる場合があり得る。bodyの閉じタグ直前なら逆でサーバが重くてもページの表示には影響がないが、ボタンの読み込みが遅れる可能性もある。どっちがいいかは好みの問題なので、任意で選んで欲しい。

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

次にテンプレート内にあるFC2の変数<!--topentry-->から<!--/topentry-->の間（通常はこの変数の間に記事が表示される）のボタンを表示させたい場所に以下のタグを書き込む。

シンプルな設定なしのコード

<g:plusone href="<%topentry_link>"></g:plusone>

表示例

「ボタンのサイズが気に入らない」「カウント数が不要」などの場合は、以下のリンク先のページからカスタマイズした貼り付けコードを取得する。任意の設定になったコードが表示されたら、仕上げにタグの中に前述のコードと同じ「href="<%topentry_link>"」というオプション（文字列）を追加すれば完成。

表示サイズ「大」のコード例

<g:plusone size="tall" href="<%topentry_link>"></g:plusone>

表示サイズ「大」の表示例

validなHTMLで+1ボタンを設置する場合

普通に表示するだけなら上記のGoogleのコード作成ページで作ったタグでも特に問題はないが、これはGoogleの独自タグのようになっているため、いわゆる「正当な」HTMLではなくなってしまう。これが気になる人は以下のように書き換えればエラーなしで+1ボタンを表示させることができる。

ちなみにオプションの設定値はGoogleのタグを使ったものと同じなので、コード作成ページで表示のされ方と値を確認しておくとスムーズに進むはず。（値を省略するとデフォルト値に設定される。）

HTML 5の場合

HTML 5を使用している場合はカスタムデータ属性を使うことによってオプションが設定できる。挙動はGoogleの独自タグと同じなので、ボタン表示部分のコードを単に差し替えるだけでそのまま動作する。

HTML 5使用時のコード
<div class="g-plusone" data-size="[サイズ設定]" data-count="[カウントの有無]" data-href="<%topentry_link>"></div>
表示サイズ「中」カウント「なし」のHTML5コード例。
<div class="g-plusone" data-size="medium" data-count="false" data-href="<%topentry_link>"></div>

(X)HTMLの場合

HTML 5より前のXHTML 1.0やHTML 4.01にはカスタムデータ属性は存在しないため、HTMLタグとJavaScriptを組み合わせて表示する。記事ごとに別のボタンを表示させるためには個別のidを割り当てる必要があるので、FC2ブログの記事No変数を利用したコードになっている。

なおこのコードのみ、「plusone.js」を呼び出すJavaScriptをheadタグ内（正確にはボタンを表示させたい場所より前）に書き込んでおく必要がある。</body>直前では正常に動かないので注意。

(X)HTML使用時のコード
<div id="plusone-button<%topentry_no>"></div>
<script type="text/javascript">
<!--
gapi.plusone.render
(
    'plusone-button<%topentry_no>',
    {
        "size": "[サイズ指定]",
        "count": "[カウントの有無]",
        "href": "<%topentry_link>"
    }
);
// -->
</script>
表示サイズ「小」カウント「あり」の(X)HTMLコード例
<div id="plusone-button<%topentry_no>"></div>
<script type="text/javascript">
<!--
gapi.plusone.render
(
    'plusone-button<%topentry_no>',
    {
        "size": "small",
        "count": "true",
        "href": "<%topentry_link>"
    }
);
// -->
</script>

コード内で使われているFC2ブログの変数は、恐らくそのまま別のブログサービスの変数などに差し替えても動作するはず。興味がある人は参考に。