Bloggerにブックマーク登録ボタンを設置する

ワザワザブログにブックマークに登録するボタンを設置しなくとも、SBM各サービスでツールバーにブックマーク登録ボタンを設置して簡単にブックマークできる機能(ブックマークレット)を提供しているため、今更必要ないかもしれないが、Bloggerのブログに各ソーシャルブックマークサービスのブックマーク登録ボタンを設置する方法を紹介します。

有名ドコロは抑えたつもりですが、『reddit』など、Iconをそのまま持ってくるのは如何なものか?というサービスは割合しました。


参考までに、どうしても『reddit』のIconが欲しい場合はここ
『reddit』のブックマークボタン設置方法はここで。
Bloggerに設置する場合、こんな感じになります。

<a expr:'&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img src='[Icon URL]'></a>


ブックマークボタンの設置方法へのリンク

各サービスにブックマーク登録ボタンの設置方法についてのヘルプがありますので参考に。
ボタンに使用するIconをアップロードするのが面倒なので、Iconを提供しているところだけに絞りました。

Bloggerに設置する場合の基本形は次の通り

  • 基本形『<a expr:href='[URL]'></a>
  • URLはシングルクォート『'』で囲む。
  • 上の [URL] 内で使用する文字列は『"』で囲む必要がありますが、『"』を『&quot;』に変換する必要があります。
  • 『&』は『&amp;』に変換します。
  • 記事のURLは『data:post.url』で取得
  • 記事のタイトルは『data:post.title』で取得
  • これら文字列と取得した値は『+』で繋げます。
これらが理解できれば応用可能ですので、ここに挙げられていない登録ボタンを設置したい場合の参考にして下さい。


ボタンを設置する位置

重要なのは「設置する位置」ですが、必ず『Post』つまり記事内に設置すること。記事毎のタイトルとURLを取得するのでサイドバーなどに設置しても無意味です。
上部に設置するなら『post-header-line-1』、
下部なら『post-footer-line post-footer-line-(1~3)』辺りが適当でしょう。


設置するタグ

以下のタグをテンプレートに貼り付けるだけでボタンを設置出来ます。

はてブ エントリー
<a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot;+ data:post.url' target='_blank'><img alt='このエントリーを含むはてなブックマーク' src='http://d.hatena.ne.jp/images/b_entry.gif ' style='border: none;' title='このエントリーを含むはてなブックマーク'/></a>

はてな
<a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='はてなブックマークに追加' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='はてなブックマークに追加'/></a> 

hatebuentorynum はてなブックマーク数
<a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot;+ data:post.url' target='_blank'><img expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:post.url' style='border: none;'/></a>

Google
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Googleブックマークへ追加' src='http://www.google.co.jp/favicon.ico' style='border: none;' title='Googleブックマークへ追加'/></a> 

FC2
<a expr:href='&quot;http://bookmark.fc2.com/user/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='FC2ブックマーク' src='http://bookmark.fc2.com/images/add-16.gif' style='border: none;' title='FC2ブックマークへ追加'/></a> 

Newsing
<a expr:href='&quot;http://newsing.jp/add?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='newsing it!' height='16' src='http://image.newsing.jp/common/images/newsingit/newsingit_s.gif' style='border: none;' title='newsing it!' width='16'/></a> 

Yahoo
<a expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url'><img alt='Yahoo!ブックマークに登録' height='16' src='http://i.yimg.jp/images/sicons/ybm16.gif' style='border:none;' title='Yahoo!ブックマークに登録' width='16'/></a> 

Buzzurl
<a expr:href='&quot;http://buzzurl.jp/entry/&quot; + data:post.url' target='_blank' title='Buzzurlにブックマーク'><img alt='Buzzurlにブックマーク' src='http://buzzurl.jp/static/image/api/icon/add_icon_mini_08.gif' style='border:0'/></a> 

del.icio.us
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='Del.icio.us' height='16' src='http://del.icio.us/static/img/delicious.gif' style='border:none;' title='Del.icio.us' width='16'/></a> 

livedoor
<a expr:href='&quot;http://clip.livedoor.com/redirect?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title +  &quot;&amp;jump=myclip&quot;' title='この記事をクリップ!'><img alt='この記事をクリップ!' height='16' src='http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif' style='border: none;' width='16'/></a> 

Digg
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' height='16' src='http://digg.com/img/badges/16x16-digg-guy.png' style='border: none;' title='Digg' width='16'/></a>

iza
<a expr:href='&quot;http://www.iza.ne.jp/bookmark/add/regist/back/&quot; + data:post.url'><img alt='イザ!ブックマーク' src='http://www.iza.ne.jp/images/common/bookmark_icon02.gif' style='border:none' title='イザ!ブックマーク'/></a>

Choix
<a expr:href='&quot;http://www.choix.jp/bloglink/&quot; + data:post.url' target='_blank'><img alt='この記事をChoix!' height='16' src='http://www.choix.jp/img/choix_it.gif' style='border:none;' title='この記事をChoix!' width='16'/></a>


まとめてどぞ。
<ul class='bookmark'><!--
--><li><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='はてなブックマークに追加' src='http://b.hatena.ne.jp/images/append.gif' style='border:none;' title='はてなブックマークに追加'/></a></li><!--
--><li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Googleブックマークへ追加' src='http://www.google.co.jp/favicon.ico' style='border:none;' title='Googleブックマークへ追加'/></a></li><!--
--><li><a expr:href='"http://bookmark.fc2.com/user/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='FC2ブックマーク' src='http://bookmark.fc2.com/images/add-16.gif' style='border:none;' title='FC2ブックマークへ追加'/></a></li><!--
--><li><a expr:href='"http://newsing.jp/nbutton?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='newsing it!' height='16' src='http://image.newsing.jp/common/images/newsingit/newsingit_s.gif' style='border:none;' title='newsing it!' width='16'/></a></li><!--
--><li><a expr:href='"http://bookmarks.yahoo.co.jp/action/bookmark?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Yahoo!ブックマークに登録' height='16' src='http://i.yimg.jp/images/sicons/ybm16.gif' style='border:none;' width='16'/></a></li><!--
--><li><a expr:href='"http://buzzurl.jp/entry/" + data:post.url' target='_blank' title='Buzzurlにブックマーク'><img alt='Buzzurlにブックマーク' src='http://buzzurl.jp/static/image/api/icon/add_icon_mini_08.gif' style='border:none'/></a></li><!--
--><li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.titile' target='_blank'><img alt='Del.icio.us' height='16' src='http://del.icio.us/static/img/delicious.gif' style='border:none;' title='Del.icio.us' width='16'/></a></li><!--
--><li><a expr:href='"http://clip.livedoor.com/redirect?link=" + data:post.url + "&title=" + data:post.titile + "&jump=myclip"' target='_blank' title='この記事をクリップ!'><img alt='この記事をクリップ!' height='16' src='http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif' style='border:none;' width='16'/></a></li><!--
--><li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' height='16' src='http://digg.com/img/badges/16x16-digg-guy.png' style='border:none;' title='Digg' width='16'/></a></li><!--
--><li><a expr:href='"http://www.iza.ne.jp/bookmark/add/regist/back/" + data:post.url' target='_blank'><img alt='イザ!ブックマーク' src='http://www.iza.ne.jp/images/common/bookmark_icon02.gif' style='border:none' title='イザ!ブックマーク'/></a></li><!--
--><li><a expr:href='"http://www.choix.jp/bloglink/" + data:post.url' target='_blank'> <img alt='この記事をChoix!' height='16' src='http://www.choix.jp/img/choix_it.gif' style='border:none;' title='この記事をChoix!' width='16'/></a></li><!--
--></ul>

3 Comments:

zajuji さんのコメント...

はじめまして。使わせていただきました。ありがとうございます。deliciousのボタンをつけてみたんですが、typoがありましたので報告します。

data:post.titile → data:post.title

y@s さんのコメント...

ありがとうございます。
修正させて頂きました。

はるみち さんのコメント...

ありがとうございます。
addclipが使えなくて微妙に困っていたので、助かりました。

Recent Posts