アメブロに『Twitterでつぶやく』と『ソーシャルブックマークに追加』ボタンをつける

このブログに、『Twitterでつぶやく』ボタンと『ソーシャルブックマークに追加する』ボタンを追加してみました。

（追記：facebookの「いいね！」ボタンを追加した最新バージョンの記事をアップしました。→『アメブロにfacebookの「いいね！」ボタンやソーシャルブックマークボタンを設置する方法』）

itboyさんの記事『Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ 』を参考にさせていただき、自分用にちょっとカスタマイズしてみました。

付けたいボタンは
　　　『ペタする』ボタン
　　　『Twitterでつぶやく』ボタン
　　　『はてなブックマークに追加する』ボタン
　　　『Deliciousに追加する』ボタン
　　　『Livedoor Clipに追加する』ボタン
　　　『Yahoo!ブックマークに追加する』ボタン
　　　『Googleブックマークに追加する』ボタン
　　　『FC2ブックマークに追加する』ボタン
　　　『Nifty Clipに追加する』ボタン
の９個で、付けたい場所は各ブログ記事の最初です。

下記にソースを載せておきますので、Amebaブログをお使いで興味のある方は ご自由にお使いください。

もちろん、カスタマイズしていただいても結構ですよ。

「サイドバーの設定」メニューの「フリープラグイン」にソースを貼り付ければ動くと思います。

（ただし、お使いになられる前には、現在お使いのソースのバックアップを必ずとってくださいね。）

<script>
$(document).ready(function(){
var entries = $(".foot a:contains('記事URL')");
var cName = "div.entry .subContents";
for (var i = 0; i < entries.length; i++) {
var url = entries[i];
var title = $("div.entry h3.title").eq(i).text();

var nObj=new Array();
var htmlData="";
var blog='ブログ名';
htmlData+='ペタボタンの情報';

nObj[0]={
href:'http://twitter.com/home/?status=' + encodeURIComponent(title + ' by 【' + blog + '】' + url),
alt:'このエントリをtwitterでつぶやく',
src:"Twitter画像のパス"
};

title+=' | ' + blog;

nObj[1]={
href:'http://b.hatena.ne.jp/append?' + url,
alt:'このエントリをはてなブックマークに追加',
src:"はてなブックマーク画像のパス"
};

nObj[2]={
href:'http://del.icio.us/post?url=' + url + '&title=' + title,
alt:'このエントリをDeliciousに追加',
src:"Delicious画像のパス"
};

nObj[3]={
href:'http://clip.livedoor.com/clip/add?link=' + url + '&title=' + title + '&jump=ref',
alt:'このエントリをLivedoor Clipに追加',
src:"Livedoor Clip画像のパス"
};

nObj[4]={
href:'http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' + title + '&u=' + url + '&opener=bm&ei=UTF-8',
alt:'このエントリをYahoo!ブックマークに追加',
src:"Yahoo!ブックマーク画像のパス"
};

nObj[5]={
href:'http://www.google.com/bookmarks/mark?op=add&amp;bkmk=' + url + '&amp;title=' + title,
alt:'このエントリをGoogleブックマークに追加',
src:"Googleブックマーク画像のパス"
};

nObj[6]={
href:'http://bookmark.fc2.com/user/post?url=' + url + '&title=' + title,
alt:'このエントリをFC2ブックマークに追加',
src:"FC2ブックマーク画像のパス"
};

nObj[7]={
href:'http://clip.nifty.com/create?url=' + url + '&title=' + title,
alt:'このエントリをNifty Clipに追加',
src:"Nifty Clip画像のパス"
};

for (var n=0; n < nObj.length; n++){
htmlData+='<a href="'+ nObj[n].href +'" target="_blank"><img src="'+nObj[n].src+'" alt="'+nObj[n].alt+'" title="'+nObj[n].alt+'" /></a>';
}

$(cName).eq(i).before('<div id="bke" style="margin-bottom:20px;">'+htmlData+'</div>');
}
$('#bke a').css('margin-right','8px');
$('#bke a img').css({'padding':'0px','margin':'0px','vertical-align':'bottom'});
})
</script>

赤文字の部分は、ご自身の情報に置き換えてください。

Twitterやソーシャルブックマークのそれぞれの画像は、あらかじめアップロードしておく必要があります。

ペタボタンの情報は、「ペタボタンの追加」を押したときに出てくるソース

<a href=　～　中略　～　</a>
をそのまま貼り付けてください。

フリープラグインの設置方法を間違えると、スキンデザインが崩れたり他のプラグインまで動かなくなってしまう場合があります。
現在のフリープラグインのソースのバックアップを必ずとり、表示がおかしかったらすぐ元に戻せるようにしておいてください。
設置については、自己責任でお願いします。

もし分からないところなどあれば、ご相談いただければ、できるだけお答えしたいと思います。

なお、フリープラグインで追加できるのはHTMLタグで4000文字までなので、「あとちょっと文字数が少なければ入るのに！」という場合は JS Minifierを使うと便利です。

ソースコードを貼り付けて『JS Min』ボタンを押せば、不要なスペースや改行を取り除いた状態に変換してくれます。
ただし、ソースの最後に<br />タグがあると『<br/』　となってしまい『>』がなくなってしまうというバグがあるようですので、ご注意を！

2010/8/10 追記

Amebaブログの仕様変更に伴い、一部修正しました。

2011/1/9 追記

facebookの「いいね！」ボタンを追加した最新バージョンの記事をアップしました。（『アメブロにfacebookの「いいね！」ボタンやソーシャルブックマークボタンを設置する方法』）