- 2009年3月26日 13:56
- WEB制作
以前「ソーシャルブックマーク用アイコンを設置 - cosmos blog」で設置したものから変更を加えたので、覚書も含めてアーカイブとして残しておこうと思います。
このBlogで稼動中なので、サンプルはありません！！（きっぱり
前回同様、動作には一貫性を持たせ・・・ブックマーク登録画面は_blankで別タブ（あるいは別ウィンドウ）に表示され、登録用のURLは<$MTEntryPermalink$>で指定しています。
参考に使われる方は、自分の環境に合わせて書き換えてください～。
今回対応させたのは以下の7つのソーシャルブックマーク。
- Delicious
- はてなブックマーク
- buzzurl
- Yahoo!ブックマーク
- livedoorクリップ
- POOKMARK Airlines
- FC2ブックマーク
このBlogには、１～6が表示されていますので、参考にしてくださいな～。
●Delicious用
既にDeliciousにブックマークされている場合、登録用アイコンの隣に、ブックマーク数が「x users」のカタチで表示されます。
Delisiousの場合、ブックマーク数を表示するのは少々面倒で・・・。
非リンク数表示には、MD5ハッシュの作業が必要になります。
ここでは、プラグインとJavaScriptを使ってデータハッシュさせて表示させるという方法を使いました。プラグインは、別エントリーで紹介している"Movable TypeのMD5フィルタ・プラグイン"を利用しているので、タグもそれに沿った書き方です。
アーカイブリストなどでもそれぞれの記事ごとにブックマーク数が表示できるように、ファンクション名をエントリーベースネームを使って分けるように設定しているので、これを参考になさる方はご自分の環境によって書き換えてください。
ファンクション名を固定にすると、最初に読まれたものしか表示しなくなりますよ。
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<$MTEntryPermalink$>')+'&title='+encodeURIComponent('<$MTEntryTitle$>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"><img src="http://static.delicious.com/img/delicious.med.gif" height="16" width="16" border="0" title="[<$MTEntryTitle$>]をdeliciousに追加" /></a>
<a href="#" target="_blank" id="<$MTEntryBasename$>" title="[<$MTEntryTitle$>]のdelicious登録数"></a>
<script>
function <$MTEntryBasename$>(data){
var tp,a;
(tp = data[0].total_posts)
&& (a = document.getElementById( '<$MTEntryBasename$>' ))
&& (a.innerHTML = tp + ' user' + (1 < tp ? 's': ''))
&& (a.href = 'http://del.icio.us/url/' + data[0].hash);
}
</script>
<script src="http://badges.del.icio.us/feeds/json/url/data?hash=<$MTEntryPermalink md5="1"$>&callback=<$MTEntryBasename$>"></script>●はてなブックマーク用
既にはてなにブックマークされている場合、登録用アイコンの隣にブックマーク数が「x users」のカタチで表示されます。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<$MTEntryPermalink$>&title=<$MTEntryTitle$>" target="_blank"><img src="http://d.hatena.ne.jp/images/b_entry.gif" title="[<$MTEntryTitle$>]をはてなブックマークに追加" width="16" height="12" border="0" /></a>
<script src="http://b.hatena.ne.jp/entry/json/?url=<$MTEntryPermalink md5="1"$>&callback=<$MTEntryBasename$>"></script>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" title="[<$MTEntryTitle$>]のはてなブックマーク数" border="0" /></a>●buzzurl用
既にbuzzurlにブックマークされている場合、登録用アイコンの隣にブックマーク数表示されます。
<a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" target="_blank"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_08.gif" title="[<$MTEntryTitle$>]をBuzzurlにブックマーク" border="0" /></a>
<img src="http://api.buzzurl.jp/api/counter/<$MTEntryPermalink$>" title="[<$MTEntryTitle$>]のBuzzurl登録数" border="0" />●Yahoo!ブックマーク用
既にYahoo!にブックマークされている場合、登録用アイコンの隣にブックマーク数表示されます。
<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle$>&u=<$MTEntryPermalink$>" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" title="[<$MTEntryTitle$>]をYahoo!ブックマークに登録" border="0" /></a>
<img src="http://num.bookmarks.yahoo.co.jp/image/small /<$MTEntryPermalink>" title="[<$MTEntryTitle$>]のYahoo!ブックマーク登録数" border="0" />●livedoorクリップ用
既にlivedoorにブックマークされている場合、登録用アイコンの隣にブックマーク数表示されます。
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle$>" target="_blank"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" title="[<$MTEntryTitle$>]をlivedoorクリップに登録" width="16" height="16" border="0" /></a>
<img src="http://image.clip.livedoor.com/counter/small/<$MTEntryPermalink$>" title="[<$MTEntryTitle$>]のlivedoorクリップ登録数" border="0" />●POOKMARK Airlines用
登録用アイコンのみの表示ですが。
<a href="http://pookmark.jp/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle>" target="_blank"><img src="http://pookmark.jp/images/add/add.gif" title="[<$MTEntryTitle$>]をPOOKMARK Airlinesに追加" width="18" height="12" border="0" /></a>●FC2ブックマーク用
登録用アイコンのみの表示ですが。
<a href="http://bookmark.fc2.com/user/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle$>" target="_blank"><img src="http://www.bayashi.net/images/fc2.gif" title="[<$MTEntryTitle$>]をFC2 Bookmarkに追加" width="12" height="12" border="0" /></a>- Newer: 蔦珈琲店
- Older: 「Canon Eos 7s」がやってきた。