【ココログ】上級テンプレートでGoogle+の「+1」ボタンを付けてみた

昨日、ココログの「いいね!」ボタンを設置してみましたが、ついでなのでGoogle+の「+1」ボタンも設置してみることにしました。Google+は使っていないので効果のほどはわかりませんが…。

これは、上級テンプレートのカスタマイズになれていれば、すごく簡単です。ココログの「いいね!」ボタンのように調査もいりません。さっそくやってみましょう。

Googleの「ウェブマスターツール」にある下記のページを開きます。

+1 Your Website – Google

開くページで、ボタンをカスタマイズします。サイズは「標準(24px)」、Annotationは「インライン」、幅はブログの表示域に合わせて、言語は「日本語」で。

幅に関しては、このブログの場合デフォルトの450pxでOKですが、Facebookの「いいね!」と合わせるために500pxにしました。デフォルトだとタグにwidth属性が出ないので、デフォルト以外にしておいた方があとでカスタマイズしやすいです。

こんなコードができました。

<!– このタグを +1 ボタンを表示する場所に挿入してください –>
<g:plusone annotation="inline" width="500"></g:plusone>

<!– この render 呼び出しを適切な位置に挿入してください –>
<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>

まず、最初の<g:plusone〜></g:plusone>を、実際のボタンを表示させたい場所に配置します。これは、Facebookの「いいね!」やココログの「いいね!」、はてブのアイコンなどと同じ場所でいいのでわかりやすいですね。

そして、次の<script>〜</script>を、<head>〜</head>のどこかに置きます。他のスクリプト呼び出しのあとでいいでしょうね。

書き換えるテンプレートは、Main Index Template, Category Archives, Datebased Archives, Indivisual Archivesなのはいつもどおりです。

すべて書き換えて、反映して終わりです。こんな感じにできました。

Google_plus_one_01

だんだんとフッタ部が賑やかになってきますが、実体が伴わないのが寂しいところですねぇ。

というか、ココログもいいかげんにTwitter以外のSNSをサポートして欲しいものです。

コメント