ココログ無料版に「はてブ」やtwitter、Yahoo!ブックマークのアイコンをつける

 ブログのタイトルまわりに各種ブックマークとはtwitterのアイコンをつける機能が各種ブログサービスにありますが、ココログの無料版(ココログ ベーシック、ココログ フリー)では、それがなくテンプレートの編集もできない、ということで、以前、こういうのを書きました。
ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつけるはてなブックマーク - ココログ無料版に「はてブ」アイコンや登録数、twitterアイコンをつける

 で、その後、はてブだけじゃなくてYahoo!ブックマークとかもつけたらいいかも、とか思いまして。また、以前の記事のコメントに「ココログの画像ポップアップが作動しなくなってしまいました」とあり、「jQuery.noConflict();の記述を加えることで、何とか両方が動作しました。」ともあったので、それも参考にしつつ、試していました。

 ということで、今回も以下のコードをココログの管理画面で「マイリスト」の項目に追加してみてください。

 設定タブで「メモをテキストとして表示」すること、管理タブで「タイトル」「アドレス」ではなく「メモ」欄にコードを入れるのがポイント。これで、項目がJavaScriptとして動作するはず。

(追記 2012年04月)
 上の段、間違い。古いです。現在は、マイリストの新規作成時に、「リストのタイプ」に「メモ」を選択(名前は適当)。ラベル欄はなし(空欄)のまま、備考欄にここで紹介しているコードを入れてください。

 アイコンファイルは各自どっかにアップロードして、そのURL(http://からはじまるやつ)を指定することを忘れずに。

<script type="text/javascript">
(function(){
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 {
jQuery.noConflict();
jQuery("a.permalink").each(function(){
var u = jQuery(this).attr('href');
var sep = ' <span class="separator">|</span>';
var gp = jQuery(this).parent().parent().find("h3"); //●
//はてな
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;border:none;" 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;border:none;" /></a>';
//Twitter
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;border:none;" alt="Twitterでつぶやく" /></a>';       a +=t; //Twitter Icon
//Yahoo!ブックマーク
var y = '<img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" title="Yahoo!ブックマークに登録" alt="Yahoo!ブックマークに登録" style="border:none;" onClick="yb(&quot;' +u+ '&quot;,&quot;' + twTitle +'&quot;)">';
a +=y; //Yahoo! bookmark button
//jQuery(gp).after(a); //記事タイトルの次の行に表示したい場合▲
jQuery(gp).append(a); //記事タイトルの行内に表示したい場合▲
jQuery(this).after(sep + a); //記事の下に入れる場合▲
});
}
}, 100);
})();
function yb(u,title){
void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+title+'&amp;u='+u+'&amp;ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);
}
</script>

 それぞれのアイコンについてコメントがあるので、不要ならそのへんをばっさりカットしてください。アイコンファイルの指定は◆で囲んだ部分です。

 配置したい場所の指定は▲があるところを参照。行頭の「//」を外すととそこに表示、加えると非表示。3種類あるのでご自由に。

 今回もココログベーシックでテスト。テンプレートによってはうまくいかないかも。ココログ フリーのあるテンプレートでは、「●」のある行を

 var gp = $(this).parent().parent().parent().find(“h3”);//●

 とすることでうまくいったので、テンプレートによってはいろいろいじる必要があると思います。

 あまり需要はないとは思いますが、一応。なんか不具合あればコメントください。

(追記2012年4月)
 Yahoo!ブックマークが動いてなかった(ポップアップウィンドウが表示されない)ので一部修正。気になる方はいろいろご自身で試してみてください。

コメント

タイトルとURLをコピーしました