Movable Type に Google +1 (プラスワン)のボタンを設置する
MovableTypeに Google +1（プラスワン）のボタンを設置する時のコードです。
Facebook、 Twitter、はてなブックマークのボタン設置については『Movable Type に Facebook、 Twitter、はてなブックマークのボタンを設置する』を参照下さい。
Google +1に貼り付ける時には、JavaScriptでDOMを使う方法で実装しました。
コードは2つ必要です。
（１）Google +1のAPIを呼び出すJavaScriptコード
（２）Google +1のボタンを表示するJavaScriptコード
青色太字はMovable Typeのタグです。
赤色太字はカスタマイズした部分です。ご自身の環境に合わせて適時修正して下さい。
（１）Google +1のAPIを呼び出すJavaScriptコードを「ヘッダー」に入れます。
場所はどこでも良いのですが、私はheadタグの中に入れました。
Googleの解説では</body>の直前に入れると読み込みが速くなるかもしれないそうです。
【テンプレートの場所】
デザイン → テンプレート → テンプレートモジュール → 「ヘッダー」
|
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> |
（２）Google +1のボタンを表示するJavaScriptコードを埋め込みます。
私は「ブログ記事のメタデータ」に入れました。
【テンプレートの場所】
デザイン → テンプレート → テンプレートモジュール → 「ブログ記事のメタデータ」
|
<g:plusone size="tall" count="true" href="<$MTEntryPermalink$>"></g:plusone> |
＜参考サイト＞
■+1 button API （Google Codeページ）
<$MTEntryPermalink$>を使ったのは、ブログのインデックスページにも表示するので、絶対URLが必要なのです。
hrefが無い時は自動取得になるので、動的なサイトでは不要なパラメータも入ってしまう可能性があります。
コメントする