Movable Typeでソーシャルブックマーク
Posted by 琉羅 at 2007年04月17日 14:58
Yahoo!ブックマークがリニューアルし、新たにソーシャルブックマーク機能を実装したようですが、皆さんは利用されてますでしょうか？私も登録だけしてみましたけど、まだ本格的な利用に至っていないという状況ですね。
これを機に・・・という訳ではないんですが、前々から気になっていた各ソーシャルブックマークへ登録するアイコンをエントリー毎に表示させてみました。そこで、今回はMovable Type
でエントリー毎に各ソーシャルブックマークへ登録するためのリンクをテンプレートに組み込むための記載方法としてご紹介したいと思います。
参考にさせていただいたのは、
のサイトです、ありがとうございました。
記載方法といっても、下記のソース青字部分を各自のサイトで置き換えて、表示させたい各テンプレートへ追加するだけなので、難しい知識は全く要りません。ただし、Yahoo!ブックマーク以外のアイコン画像に関しては、各ソーシャルブックマークサービスよりダウンロードしてからご利用ください。
また、各書式はそのままコピー＆ペーストしてもW3CのXHTML1.1でValidできるように記載してあります。
はてなブックマーク
アイコン画像を利用したリンク
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をはてなブックマークに追加"><img src="<$MTBlogURL$>はてなブックマークのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をはてなブックマークに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をはてなブックマークに追加">はてなブックマークに登録</a>被ブックマーク数を表示する
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>のはてなブックマーク数"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" alt="<$MTEntryTitle encode_html="1"$>のはてなブックマーク数" /></a>del.icio.us
アイコン画像を利用したリンク
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加"><img src="<$MTBlogURL$>del.icio.usのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をdel.icio.usに追加">del.icio.usに登録</a>Yahoo!ブックマーク
アイコン画像を利用したリンク
<a href="#" onclick="window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0); return false;" title="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" alt="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加" width="16" height="16" /></a>テキストを利用したリンク
<a href="#" onclick="window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0); return false;" title="<$MTEntryTitle encode_html="1"$>をYahoo!ブックマークに追加">Yahoo!ブックマークに登録</a>※修正しました（2007.4.18）
livedoorクリップ
アイコン画像を利用したリンク
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="<$MTEntryTitle encode_html="1"$>をlivedoorクリップに追加"><img src="<$MTBlogURL$>livedoorクリップのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をlivedoorクリップに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>&jump=ref" title="<$MTEntryTitle encode_html="1"$>をlivedoorクリップに追加">livedoorクリップに登録</a>ニフティクリップ
アイコン画像を利用したリンク
<a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をニフティクリップに追加"><img src="<$MTBlogURL$>ニフティクリップのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をニフティクリップに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をニフティクリップに追加">ニフティクリップに登録</a>POOKMARK Airlines
アイコン画像を利用したリンク
<a href="http://pookmark.jp/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をPOOKMARK Airlinesに追加"><img src="<$MTBlogURL$>POOKMARK Airlinesのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をPOOKMARK Airlinesに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://pookmark.jp/post?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をPOOKMARK Airlinesに追加">POOKMARK Airlinesに登録</a>Saafブックマーク
アイコン画像を利用したリンク
<a href="http://bm.saaf.jp/bm/add?url=<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>をSaafブックマークに追加"><img src="Saafブックマークのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をSaafブックマークに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://bm.saaf.jp/bm/add?url=<$MTEntryPermalink$>" title=""<$MTEntryTitle encode_html="1"$>" をSaafブックマークに追加">Saafブックマークに登録</a>※追加しました（2007.5.24）
Buzzurl（バザール）
アイコン画像を利用したリンク
<a href="http://news.ecnavi.jp/config/add/confirm?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をBuzzurlに追加"><img src="Buzzurlのアイコン画像" alt="<$MTEntryTitle encode_html="1"$>をBuzzurlに追加" width="画像の幅（px）" height="画像の高さ（px）" /></a>テキストを利用したリンク
<a href="http://news.ecnavi.jp/config/add/confirm?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="<$MTEntryTitle encode_html="1"$>をBuzzurlに追加">Buzzurl（バザール）に登録</a>※追加しました（2007.5.24）
アイコン画像をテキストに揃えるためのCSS
当ブログの場合テキストよりやや上目にアイコン画像が表示されているように見えてしまいます。サイトの文字の大きさにもよると思うのですが、そういった場合はCSSで
.sbm img {
margin: 0 0 -0.15em 0;
}みたいに記述することで補正できます。青字の数値は各自のサイトで調整ください。
トラックバックスパム防止のため、末尾の XXXXXX 部分を上記画像の数字に置き換えてからご利用ください。お手数ですがご協力よろしくお願いいたします。
ソーシャルブックマークサービスへの追加アイコンなぞを設置してみた from なんかのぶろぐ
とりあえず色々とつけてみました。 他のブログで前々から気になっていたのでググってみました。 したら以下 [続きを読む]
Tracked on 2007年05月31日 03:20
ソーシャルブックマーク追加ボタンの設置 from とあるアフィリエイターカップルのおはなし
Yahoo!の検索結果にYahoo!ブックマークの登録数が表示されるようになったので、これを機にソーシャルブックマーク追加ボタンの設置をしてみました♪ 追... [続きを読む]
Tracked on 2007年06月21日 14:08
![[Valid RSS]](http://weblog.2-d.jp/images/valid-rss.png "Validate my RSS feed"){kind=small}
![[Valid Atom 1.0]](http://weblog.2-d.jp/images/valid-atom.png "Validate my Atom 1.0 feed"){kind=small}
