« 高機能なスクリーンキャプチャソフトPicPickをタダで使う方法。 | トップページ | QWOPで連続前方伸身宙返りを軽々ときめる強者が現れる。やり方解説も。 »

2013年12月 8日 (日)

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

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

以前に、「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> 

てな感じで読み込んでやると動きました。

ちなみにJQueryをつかったこの方法は強力で、ココログフリーではカスタマイズできないテンプレートのCSSもセレクターで指定してcssを変更することが可能です。例えば上のappendの後に

$('.sidebar').css("padding","0px")

でサイドバーの余白をなくして300pxの広告がちゃんと切れずに表示できるようになりました。同じことをデザインから「カスタムCSSを編集」からやるとダメなんですけどね。idとかクラスはテンプレートによって異なるかもしれないので注意してください。

さらに「トップへ戻るボタン」とか上のナビゲーションメニューとかもJQueryで付けました。うむ、JQueryは最高だ。

« 高機能なスクリーンキャプチャソフトPicPickをタダで使う方法。 | トップページ | QWOPで連続前方伸身宙返りを軽々ときめる強者が現れる。やり方解説も。 »

ココログ」カテゴリの記事

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1169291/54182461

この記事へのトラックバック一覧です: ココログフリーの記事の下にZenbackつけてみた。:

« 高機能なスクリーンキャプチャソフトPicPickをタダで使う方法。 | トップページ | QWOPで連続前方伸身宙返りを軽々ときめる強者が現れる。やり方解説も。 »

広告欄


やっつけタイムライン

広告欄

はてブ

人目の訪問です。

  • follow us in feedly

    かなり更新が不定期なため、RSSリーダーをオススメします。現在Feedlyに122人登録頂いています。多謝!RSSを表示

    ブログランキング用 にほんブログ村 IT技術ブログ Pythonへ ブログランキングならblogram






    Jenny Mayhem
2017年11月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

IT技術注目記事

無料ブログはココログ