ブログのタイトルまわりに各種ブックマークとは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("' +u+ '","' + twTitle +'")">';
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+'&u='+u+'&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!ブックマークが動いてなかった（ポップアップウィンドウが表示されない）ので一部修正。気になる方はいろいろご自身で試してみてください。
コメント