SBM(ソーシャルブックマーク)の登録ボタンを出力するJavaScript
楽:技林ブログで
SBM(ソーシャルブックマーク)の登録ボタンを出力するJavaScriptを紹介されていたので、備忘録。
このスクリプトの肝としては、RSS登録ではなく、あくまでもブクマ。
ワードプレスなどのブログではプラグインがありますけど、ショップサーブなどのWEBサイトでは
何種類か設置するのが面倒ですので、このスクリプトは大変便利です。
ブクマ登録できるようになるのは、はてな、ヤフー、グーグル、ライブドア、FC2、
del.icio.us、Pookmark、buzzurl の8種類。
順番も並び替えられますし、好きなものだけ表示することもできます。
スクリプトは↓
function putSBM (title_this, url_this) {
// Yahoo!ブックマーク
document.write(' <a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' + encodeURIComponent(title_this) + '&u=' + encodeURIComponent(url_this) + '&opener=bm&ei=UTF-8" target="_blank"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="' + title_this + 'をYahoo!ブックマークに登録" border="0" align="bottom" /><img src="http://num.bookmarks.yahoo.co.jp/image/small/' + url_this + '" border="0" alt="' + title_this + 'のYahoo!ブックマーク登録数" align="bottom" /></a>');
// Google Bookmarks
document.write(' <a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=' + encodeURIComponent(url_this) + '&title=' + encodeURIComponent(title_this) + '" target="_blank"><img src="http://www.google.co.jp/favicon.ico" alt="' + title_this + 'をGoogle Bookmarksに追加" width="16" height="16" border="0" align="bottom" /></a>');
// はてブ
document.write(' <a href="http://b.hatena.ne.jp/append?' + url_this + '"><img src="http://b.hatena.ne.jp/images/append.gif" width="16" height="12" border="0" alt="' + title_this + 'をはてなブックマーク に追加" align="bottom" /><img src="http://b.hatena.ne.jp/entry/image/' + url_this + '" border="0" alt="' + title_this + 'のはてブ数" align="bottom" /></a>');
// livedoorクリップ
document.write(' <a href="http://clip.livedoor.com/clip/add?link=' + encodeURIComponent(url_this) + '&title=' + encodeURIComponent(title_this) + '"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_12_b.gif" width="16" height="12" alt="' + title_this + 'をlivedoorクリップに追加" border="0" align="bottom" /><img src="http://image.clip.livedoor.com/counter/' + url_this + '" alt="' + title_this + 'をlivedoorクリップに追加" border="0" align="bottom" /></a>');
// del.icio.us
document.write(' <a href="http://del.icio.us/post?url=' + encodeURIComponent(url_this) + '&title=' + encodeURIComponent(title_this) + '"><img src="http://images.del.icio.us/static/img/delicious.gif" width="12" height="12" border="0" alt="' + title_this + 'を del.icio.us に追加" align="bottom" /></a>');
// Pookmark
document.write(' <a href="http://pookmark.jp/post?url=' + encodeURIComponent(url_this) + '&title=' + encodeURIComponent(title_this) + '"><img src="http://pookmark.jp/images/add/add.gif" alt="' + title_this + 'をPookmark に追加" border="0" align="bottom" /></a>');
// FC2
document.write(' <a href="http://bookmark.fc2.com/user/post?url=' + encodeURIComponent(url_this) + '&title=' + encodeURIComponent(title_this) + '" target="_blank"><img src="http://bookmark.fc2.com/img/add-16.gif" alt="' + title_this + 'をFC2 Bookmarkに追加" width="12" height="12" border="0" align="bottom" /></a>');
// buzzurl
document.write(' <a href="http://buzzurl.jp/config/add/confirm?url=' + encodeURIComponent(url_this) + '" target="_blank"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_08.gif" alt="' + title_this + 'をBuzzurlに追加" width="12" height="12" border="0" align="bottom" /><img src="http://api.buzzurl.jp/api/counter/' + url_this + '" border="0" alt="' + title_this + 'のBuzzurl登録数" align="bottom" /></a>');上記をコピペで適当な名前で保存。(例 bookmarks.js とか)
保存した上記のスクリプトをサーバーにアップしたら、
ヘッドにスクリプトを設置して呼び出します。
あとは、HTMLの中で登録画像を出力したい場所に以下のコードを置く。
<script type="text/javascript">
<!--
putSBM('ページのタイトル', 'ページのURL');
//-->
</script>これでOK。
あとはスクリプトの中で順番変えたり、
表示したいものだけ残したりはお好みで。
: : このページの内容と関連がある記事 : :
- ショートハンド
- copyright(コピーライト)表記を自動で更新するスクリプト
- http と https で同じスクリプトを使い分ける!?
- 角丸画像で切り抜いた写真に角丸の枠線を付ける方法
- 背景ではなく単純に特定の画像に適用するCSS Sprite







