ココログフリーの記事の下にZenbackつけてみた。: YATTSUKE BLOG

2013年12月 8日 (日)

ココログフリーの記事の下にZenbackつけてみた。

直帰率が８０％の当ブログは、どうにか一見さんに他のページも読んでいただけるように努力中です。直帰率って最初訪れたページから他の記事は読まずに去っていく率のことらしく、８０％はかなり高いらしいです。高いほうがいいのかとずっと喜んでいたのに。

以前に、「LinkWithinでココログで簡単におすすめの関連記事をフッダーに表示する」なんて記事をかいたんですが、LinkWithinは画像付きのおすすめ記事を記事の下の方に自動で表示してくれてなかなか簡単で見栄えも良く助かっていたんですが、どうしても推薦記事の精度がよくないままだったので、とうとう先日外しました。英語の記事ならちゃんと動くのでしょうけど日本語の文章は苦手なようです。

似たようなサービスで日本語に強いのが欲しいとこなんですが、Zenbackしかカッコイイのがみつかりません。しかし、残念ながらZenbacknの公式サイトにある「ココログでのzenback利用方法」という記事によるとココログフリーでは記事の下へ表示するウィジェットはサポート外でサイドバーに表示するしかないのだそうです。

私の場合、ココログフリーではなく広告ライトオプションを使っていますが、ココログからの広告が表示されないだけでココログフリーと実質同じないので、「上級者テンプレート」がつかえません。

ただ、おかしいな？と思ったのはLinkWithinではjavascriptを「ブログのサブタイトル（キャッチフレーズ）」の設定からHeaderに入れるだけであとは自動でやってくれていたので、技術的には出来るはずなんです。まあ、大人の事情でサポート対象外なだけだと思います。

ということで、サポート外なら自分でやってみようかなぁとJQueryをつかって試してみたらできちゃいました。さすがに推薦記事の精度は高いですね。広告挿入されるのがただなのでやむなしとは言え目立つなぁ。

ココログでJQueryをつかってZenBackウィジェットを記事の下に表示する方法

といってもフッターの下にZenbackのウィジェットが表示されるようにpostedというクラスをセレクターで指定してappendでZenbackのコードを挿入しただけなんで、なんてことはないですが、ただ挿入するコードが長いので改行の扱いにちょっと苦労しました。

$(function() {

    $('.posted').append('\
    <!-- X:S ZenBackWidget -->\
    <div id="zenback-widget-loader"></div>\
    <script type="text/javascript">\
        !function(d,i){\
            if(!d.getElementById(i))\
            {var r=Math.ceil((new Date()*1)*Math.random());\
                var j=d.createElement("script");j.id=i;j.async=true;\
                j.src="//w.zenback.jp/v1/?base_uri=http%3A//あなたのサイトのURL/&nsid=XXXXXXXXXX%XX%XXXXXXXXXXXXXXXX&rand="+r;\
                d.body.appendChild(j);\
            }\
        }\
        (document,"zenback-widget-js");\
    </script>\
    <!-- X:E ZenBackWidget -->\
    ');

});

なんて内容でUTF-8のエンコーディングでloadzenback.jsとか適当に名前をつけて保存、これを自分のココログにアップロードして、ファイルへのパスを確認し、これを「ブログのサブタイトル（キャッチフレーズ）」の設定から

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://あなたのサイト.cocolog-nifty.com/blog/loadzenback.js" type="text/javascript"></script>