ソーシャルブックマーク用アイコンを設置

  • 投稿日:
  • by

以前から付けたかったものですが、ようやく?設置しました(^^;)

以前、「プルダウン式「ListMe!」の導入」というのを書きましたが、
いまいちユーザービリティーに欠けているな、と思ってました。

ということで、さまざまなソーシャルブックマーク用のアイコンを、
各エントリーい置くことにしました。


とりあえず、できあがりはこんな感じになりました。

bukkuma-kunozu.gif


使用したソーシャルブックマークですが、以下の通りです。

Del.icio.us
はてな
Technorati
livedoorクリップ
ECナビ
Googleパーソナライズ
MyYahoo
Bloglines
BlogPeople
DRECOM/ドリコム
niftyクリップ


それでは設置方法です。

MTの管理画面のテンプレートからモジュールを選択し、
「モジュールを新規作成」を選びます。

テンプレート名は任意です。

ここでは「bookmarklet」でもしておきましょう。


モジュールの内容に、以下を挿入します。


<div class="bookmarklet">
<a href="http://del.icio.us/post?url=<$MTEntryPermalink encode_url="1"$>" title="「del.icio.us」にブックマーク"><img alt="del.icio.us" src="アイコンのURL" width="16" height="16" /></a> <a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink encode_url="1"$>" title="このエントリーをはてなブックマークに追加"><img alt="はてなブックマーク" src="アイコンのURL" width="16" height="12" /></a> <a title="このエントリーのブックマーク数" href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" /></a> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" title="このエントリーを含むはてなブックマーク"><img alt="はてなブックマーク" src="アイコンのURL" width="16" height="12" /></a> <a href="http://www.technorati.jp/search/search.html?query=<$MTEntryPermalink$>" title="このエントリーのテクノラティ・リンク検索結果"><img alt="テクノラティ・リンク検索結果" src="アイコンのURL" width="11" height="10" /></a> <a href="http://www.technorati.com/cosmos/links.html?rank=&amp;url=<$MTEntryPermalink$>" title="Technorati&nbsp;で関連サイトを調査"><img alt="Technorati" src="アイコンのURL" width="14" height="11" /></a> <a href="javascript:void(window.open('http://www.blogpeople.net/ib_addlink.jsp?u='+escape('<$MTEntryPermalink$>')+'&amp;t='+escape('<$MTEntryTitle$>'),'blog_ib','scrollbars=no,width=475,height=350,left=100,top=100,status=yes,resizable=yes'))" title="このエントリを&nbsp;BlogPeople&nbsp;Instant&nbsp;Bookmark&nbsp;に登録"><img alt="BlogPeople&nbsp;Instant&nbsp;Bookmark" src="アイコンのURL" width="16" height="12" /></a> <a href="javascript:url='<$MTEntryPermalink$>';title='<$MTEntryTitle$>';void(window.open('http://tags.blogpeople.net/tags_addlink.jsp?u='+escape(url)+'&amp;ti='+escape(title),'BlogPeopleTags','scrollbars=no,width=480,height=320,left=100,top=100,status=yes,resizable=yes'))" title="このエントリを&nbsp;BlogPeople&nbsp;Tags&nbsp;に登録"><img alt="BlogPeople&nbsp;Tags" src="アイコンのURL" width="11" height="11" /></a> <a href="javascript:void(window.open('http://rss.drecom.jp/shortcut/add_clip?url=<$MTEntryPermalink encode_url="1" $>&amp;title='+encodeURIComponent('<$MTEntryTitle$>'),'add_clip','scrollbars=yes,width=450,height=500,left=100,top=100,status=yes,resizable=yes'))" title="このエントリをドリコムRSSにクリップ"><img alt="ドリコムRSS" src="アイコンのURL" width="21" height="11" /></a> <a href="http://clip.nifty.com/create?url=<$MTEntryPermalink encode_url="1" $>&amp;title=<$MTEntryTitle encode_url="1" $>" title="このエントリをニフティクリップに登録"><img alt="ニフティクリップ" src="アイコンのURL" width="14" height="14" /></a> <a href="http://clip.livedoor.com/clip/add?link=<$MTEntryPermalink encode_url="1" $>&amp;title=<$MTEntryTitle encode_url="1" $>&amp;jump=ref" title="このエントリをlivedoorクリップに登録"><img alt="livedoorクリップ" src="アイコンのURL" width="19" height="14" /></a> <a href="http://clip.livedoor.com/page/<$MTEntryPermalink encode_url="1" $>" title="このエントリのlivedoorクリップでの登録状況"><img alt="livedoorクリップ" src="アイコンのURL" width="19" height="14" /></a> <a href="http://news.ecnavi.jp/entry/<$MTEntryPermalink$>" title="このエントリーをECナビに登録"><img alt="ECナビに登録" src="アイコンのURL" width="16" height="16" /></a>
<br /><br />
<a href="http://e.my.yahoo.co.jp/config/jp_promo_content?.module=jp_rss&amp;.url=RSSのURL" title="My Yahoo!に追加"><img align="top" alt="My Yahoo!に追加" src="アイコンのURL" width="91" height="17" /></a> <a href="http://fusion.google.com/add?feedurl=RSSのURL" title="Add to Google"><img align="top" alt="Add to Google" src="アイコンのURL" width="104" height="17" /></a> <a href="http://r.hatena.ne.jp/append/RSSのURL" title="はてなRSSに追加!"><img align="top" alt="はてなRSSに追加!" src="アイコンのURL" width="89" height="22" /></a> <a href="http://www.bloglines.com/sub/RSSのURL" title="Bloglinesに登録"><img align="top" alt="Bloglinesに登録" src="アイコンのURL" width="94" height="20" /></a>
</div>


アイコンのURLは適宜アップロードしたURLを指定してください。

RSSのURLも同様です。

そして、設置した場所に以下を挿入します。

<$MTInclude module="bookmarklet"$>


これでリビルドすればOKです。


なお、スタイルシートへは、クラス「bookmarklet」を指定していますので、
そちらを適宜カスタマイズしてください。

例:

.bookmarklet {
margin: 20px;
border:none;
}

実際の設置は、このエントリーの下にありますので参照ください。

今後、他のソーシャルブックマークも追加していきたいと思います。

Web2.0でビジネスが変わる
神田 敏晶
ソフトバンククリエイティブ


図解 Web2.0 BOOK
図解 Web2.0 BOOK
posted with amazlet on 06.10.09
小川 浩 後藤 康成
インプレスジャパン