アメブロにZenbackを導入して記事下に表示させる方法

少し乗り遅れた感はありますが、今更ながらこのブログにZenbackを導入してみました。

Zenbackとは、はてブやツイッターなどのソーシャルボタンやブログ内の関連記事、似た種類の関連リンクなどを自動的に表示してくれるブログパーツです。

昔は制限があり一部の人しか使えなかったようですが、昨年の１２月頃に誰でも使えるようになりました。今現在非常に人気があり、あちこちのブログでよく見かけます。

ちなみにzenbackブログより、
導入することでブログに表示されるようになる内容。
---------------------------------------------------------------------
・その記事をソーシャルなどにポストするボタン
（Twitter、はてブ、mixiチェック、Evernote、Facebook）
・その記事に関係する自分のブログ記事
・その記事に関係する他のzenbackユーザーのブログ記事（関連リンク）
・その記事についての最新のTwitterのつぶやき
・その記事についてのはてなブックマーク
----------------------------------------------------------------------

開発をしているのはMovableTypeでおなじみのSixApart社。


このブログパーツを設置するメリットは、「自ブログ内における関連記事の表示」と「他のブログと自動的に関連リンクが結ばれる事」によるPVの増加です。

単なる日記ブログを書いているだけならあまり気にしなくても良いかもしれませんが、多少なりともノウハウや専門家っぽい事を書いているブログであれば、あって困らない効果と言えます。


ただし、自分のブログにアクセスが流れてくる反面、こちらからも他のブログにアクセスが流れていくという事は当然なので、そのあたりの事もちょっとだけ頭に入れておいていいと思います。

導入するのは簡単。
公式サイトの「新規登録＆コードを取得する」から順に進んで行けば表示する為の「スクリプトコード」が手に入ります。後はそれを自分のブログに組み込むだけ。アメブロの場合はタグにJavascriptが使われている関係上「フリープラグイン」の中に放り込む事となります。


しかしフリープラグインに入れた場合は、関連記事その他諸々はサイドバーにしか表示されません。これだとあまり意味がないので（出来れば記事下に表示されるようにしたい）、少し検索。

こちらのブログを参考にさせていただき（というか丸々ですが）、先程のzenbackのスクリプトコードに少しだけ追加します。上記のブログと同じ物をこちらにも書いておきます。

<!-- X:S ZenBackWidget -->zenbackで作られたソース<!-- X:E ZenBackWidget -->
<script>
$(function() {
$("#zenback_loady").insertBefore("#advertising2");
});
</script>

赤文字の部分をzenbackのスクリプトコードと入れ替えます。
あとはそのままフリープラグインへコピー＆ペースト。


導入してから関連記事の表示がされるまでは少し時間がかかるようです。
効果のほどはその後わかるでしょう。

・アメブロカスタマイズ目次