ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつける

(追記)改良版作りました。ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける(追記おわり)
 ココログ ベーシック、ココログ フリーはテンプレートの編集ができない。完全無料のフリーはともかく、@niftyの会費を払っているベーシックなら多少はできてもよさそうなものだけど、できないのだ。
 やりたいことは、
 記事タイトル周りに、「はてなブックマーク」の登録アイコンと、はてブ登録ユーザー数を表示したい
 
 そして、
 ついでに「twitterでつぶやく」アイコンをつけたい
 てな感じ。twitterアイコンはココログの機能でもできるのだけど、記事の下にしかつかないし、位置もいまいち。というわけで、なんとかしたいのである。
 思いついたのはJavaScriptでなんとかする方法。DOMでごにょごにょすればいいのは思いつくのだけど、jQueryを使い始めた今となっては、いちいちDOMDOMしたコーディングは面倒に感じたのも確か。そんなときに見つけたのが、遅延ロードでJavaScriptのお勉強 – Born Neetという記事。これ使えば、簡単にできそう。
 ということで、作ってみた。以下のコードを、ココログの管理画面で「マイリスト」の項目に追加すればいい。
 設定タブで「メモをテキストとして表示」すること、管理タブで「タイトル」「アドレス」ではなく「メモ」欄にコードを入れるのがポイント。これで、項目がJavaScriptとして動作する。
 アイコンファイルは各自どっかにアップロードして、そのURL(http://からはじまるやつ)を指定することを忘れずに。
 

<script type="text/javascript">
var d = document;
var s = d.createElement('script');
s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
d.body.appendChild(s);
setTimeout(function() {
if(!window.jQuery) {setTimeout(arguments.callee, 100);
} else {
$("a.permalink").each(function(){
var u = $(this).attr('href');
var sep = ' <span class="separator">|</span>';
var a = '  <a href="http://b.hatena.ne.jp/add?mode=confirm&url=' + encodeURI(u) + '" target="_blank"><img src="アイコンファイルのURL" style="margin:0;padding:0;" width="16" height="12" alt="このエントリーをはてなブックマークに追加" /></a>';
a += ' <a href="http://b.hatena.ne.jp/entry/' + encodeURI(u) + '" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/' + encodeURI(u) +'" style="margin:0;padding:0;" /></a>';
var gp = $(this).parent().parent().find("h3");//●
var twTitle  = encodeURI(gp.text());
var twUrl    = u;
var twLink = 'http://twitter.com/home?status='+twTitle + ' ' + twUrl;
var t = '<a href="'+twLink+'" target="_blank"><img src="http://template.cocolog-nifty.com/images/twitter.gif"  style="margin:0;padding:0;"alt="Twitterでつぶやく" /></a>';
a +=t; //Twitter Icon
//$(gp).after(a); //記事タイトルの次の行にしたい場合▲
$(gp).append(a); //記事タイトルの行内に表示したい場合▲
$(this).after(sep + a); //記事の下に入れる場合▲
});
}
}, 100);
</script>

 以上。結局、けっこう長くなってしまった。
 ココログベーシックでテスト。テンプレートによってはうまくいかないかも。ココログ フリーのあるテンプレートでは、「●」のある行を
var gp = $(this).parent().parent().parent().find(“h3”);//●
 とすることで、うまくいった。HTMLの構造を見ていろいろ試すことになるかも。
 また、表示方法のカスタマイズは▲のある行あたりを参照。行頭の「//」(コメント)をはずしたり、加えたりしてみてください。

コメント

  1. EF Mania より:

     はじめまして。
     ココログにはてなブックマークのアイコンを設置したくて、検索で辿り着きました。書かれているJavascriptを使うことで、希望通りのことが実現できました。ありがとうございました。

     ただjavascriptを使うことで、ライトボックスを利用したココログの画像ポップアップが作動しなくなってしまいました。Javascriptの知識が全くない中、色々と検索してみたところ、ココログの画像ポップアップで使用しているmootoolsとバッティングしていたようです。共存方法が書かれたページを参考にして、jQuery.noConflict();の記述を加えることで、何とか両方が動作しました。もしかしたら変な記述をしているのかもしれませんが、とりあえず自分のブログで動作しているので良しとしています。

     役に立つJavascriptをありがとうございました。

  2. ここの人 より:

    こんにちは。
    お役に立ててなによりです。

    ほかのスクリプトとのバッティングとかはまったく考えてませんでしたが、なんとかなったようで、これまたなによりです。

    また、ご報告ありがとうございます。こちらもアップしてよかったと思えてうれしかったです。

  3. ユウぱぱ より:

    こんにちは

    大変役に立つ記事を書かれていますね
    帰ってからこちらの記事を参考に管理画面と格闘してみます

  4. ここの人 より:

    ユウぱぱさんのブログ、拝見しました。で、おせっかいながらページをダウンロードの上、テストしてみました。

    当ページで紹介しているコードの改良版(冒頭にリンクあり)を、ダウンロードしたユウぱぱさんのページに貼り付けたところ、問題なく動作しました。

    テンプレートのタグのうち、パーマリンクおよびタイトルまわりが、当方のブログとユウぱぱさんのブログで、ほぼ同じような構成だったのでOKだったのではと思います。

    すでに入れてあるマイリストのうち、アクセス解析があるところとかに入れるといいのではないかと思います。一度お試しを。

  5. ユウぱぱ より:

    こんばんわ

    検証していただき
    ありがとうございます

    こちらのページを
    ブックマークするのを忘れていて
    随分と経ってしました
    申し訳ないです(__)

    時間ある時にやってみたいと思います

  6. ここの人 より:

    こんにちは。

    試してみてなにか問題などありましたら、コメントください。できる限りお答えしたいと思います。