ワザワザブログにブックマークに登録するボタンを設置しなくとも、SBM各サービスでツールバーにブックマーク登録ボタンを設置して簡単にブックマークできる機能(ブックマークレット)を提供しているため、今更必要ないかもしれないが、Bloggerのブログに各ソーシャルブックマークサービスのブックマーク登録ボタンを設置する方法を紹介します。
有名ドコロは抑えたつもりですが、『reddit』など、Iconをそのまま持ってくるのは如何なものか？というサービスは割合しました。
参考までに、どうしても『reddit』のIconが欲しい場合はここ。
『reddit』のブックマークボタン設置方法はここで。
Bloggerに設置する場合、こんな感じになります。
ブックマークボタンの設置方法へのリンク
各サービスにブックマーク登録ボタンの設置方法についてのヘルプがありますので参考に。ボタンに使用するIconをアップロードするのが面倒なので、Iconを提供しているところだけに絞りました。
Bloggerに設置する場合の基本形は次の通り
- 基本形『<a expr:href='[URL]'></a>』
- URLはシングルクォート『'』で囲む。
- 上の [URL] 内で使用する文字列は『"』で囲む必要がありますが、『"』を『"』に変換する必要があります。
- 『&』は『&』に変換します。
- 記事のURLは『data:post.url』で取得
- 記事のタイトルは『data:post.title』で取得
- これら文字列と取得した値は『+』で繋げます。
ボタンを設置する位置
重要なのは「設置する位置」ですが、必ず『Post』つまり記事内に設置すること。記事毎のタイトルとURLを取得するのでサイドバーなどに設置しても無意味です。上部に設置するなら『post-header-line-1』、
下部なら『post-footer-line post-footer-line-(1~3)』辺りが適当でしょう。
設置するタグ
以下のタグをテンプレートに貼り付けるだけでボタンを設置出来ます。
はてブ エントリー
はてな
はてなブックマーク数
Google
FC2
Newsing
Yahoo
Buzzurl
del.icio.us
livedoor
Digg
iza
Choixまとめてどぞ。
<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:
はじめまして。使わせていただきました。ありがとうございます。deliciousのボタンをつけてみたんですが、typoがありましたので報告します。
data:post.titile → data:post.title
ありがとうございます。
修正させて頂きました。
ありがとうございます。
addclipが使えなくて微妙に困っていたので、助かりました。
コメントを投稿