アメブロにfacebookの「いいね！」ボタンやソーシャルブックマークボタンを設置する方法
以前、このブログで「アメブロに『Twitterでつぶやく』と『ソーシャルブックマークに追加』ボタンをつける」という記事を書きましたが、最近コソっとfacebookの「いいね！」ボタンをつけてみたら反響がありましたので、あらためてソースを公開いたします。
（追記：2011/6/3 Google+1ボタンやTwitterフォローボタンなどに対応した最新記事「アメブロにGoogle +1ボタンやfacebook「いいね！」ボタンなどをまとめて設置する方法」をアップしました。）
付けたいボタンは
『ペタする』ボタン
『Twitterでつぶやく』ボタン
『はてなブックマークに追加する』ボタン
『Deliciousに追加する』ボタン
『Livedoor Clipに追加する』ボタン
『Yahoo!ブックマークに追加する』ボタン
『Googleブックマークに追加する』ボタン
『FC2ブックマークに追加する』ボタン
『Nifty Clipに追加する』ボタン
『POOKMARK. Airlinesに追加する』ボタン
『Buzzurl（バザール）に追加する』ボタン
そして、facebookの「いいね！」ボタンです。
これらを付けたい場所は、各ブログ記事の直後です。
『なうで紹介』ボタンの後に付けるなら完全自動化できるのですが、そうすると記事のあとにまず広告がきて、その下にボタンが表示されるようになってしまうため、今回は各記事の直下に表示されるということにこだわりました。
そのために、記事を書いた最後におまじないの一文（後述します）を必ず書かなければらないのですが・・・。
（
でも、そんなに面倒じゃないですよ
）
下記のソースを記述したJavaScriptファイルを外部に置いて、それを読み込むようにします。
（ソースが長いので、Amebaのフリープラグインの中には書ききれません。文字数制限に引っかかってしまいます。）
$(document).ready(function(){
var entries = $(".foot a:contains('記事URL')");
var cName = "div.entry .end";
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+='ペタボタンの情報';
var twitterTitle = 'RT @twitterアカウント: 【' + title + '】 by 『' + blog + '』 ' + url;
nObj[0]={
href:'http://twitter.com/home/?status=' + encodeURIComponent(twitterTitle),
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&bkmk=' + url + '&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画像のパス"
};
nObj[8]={
href:'http://pookmark.jp/post?url=' + url + '&title=' + title,
alt:'このエントリをPOOKMARK. Airlinesに追加',
src:"POOKMARK. Airlines画像のパス"
};
nObj[9]={
href:'http://news.ecnavi.jp/config/add/confirm?url=' + url + '&title=' + title,
alt:'このエントリをBuzzurl（バザール）に追加',
src:"Buzzurl画像のパス"
};
var facebook = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&layout=standard&show_faces=false&width=460&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:460px; height:35px;" allowTransparency="true"></iframe>';
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 class="sbm" style="margin:20px 0;">'+htmlData+'</div>'+facebook);
}
$('.sbm a').css('margin-right','8px');
$('.sbm a img').css({'padding':'0px','margin':'0px','vertical-align':'bottom'});
})
赤文字の部分は、ご自身の情報に置き換えてください。
ボタンの画像は、あらかじめアップロードしておく必要があります。
ペタボタンの情報は、「記事を書く」画面で「ペタボタンの追加」を押したときに出てくるソース
<a href= ～ 中略 ～ </a>
をそのまま貼り付けてください。
上記ソースのJavaScriptファイルを、例えば『insertSBM.js』という名前をつけて保存したら、お使いのレンタルサーバなどに設置します。
そしてAmebaの「サイドバーの設定」→「プラグインの追加」→「フリープラグイン」の中に
<script language="javascript" charset="UTF-8" src="http://xxxxx.com（設置したURL）/insertSBM.js"></script>
と記述すれば、JavaScriptファイルを読み込むことができます。
なお、これはまだ未検証なのですが、レンタルサーバなど外部に設置できるサーバがない場合、DropBox（無料のオンラインストレージ）のpublicディレクトリにアップロードしてURLを取得するという方法でも大丈夫なようです。
そして、先にも書きましたが、今回は各記事の直下に表示されるということにこだわったため、ブログ記事を書いたら最後に毎回、「HTMLタグを表示」タブを選択した状態で、下記の一文を必ず記述してください。
<div class="end"></div>
以上です。
今回は、現在私が使用している方法をそのまま公開しましたが、「ちょっと煩雑でわかりにくいよ～
」という方もいらっしゃるかと思います。
近いうちに、jQueryのjquery.socialbuttonプラグインを使用して、もうちょっと簡潔でキレイなソースに書き換えようと思っておりますので、その際はまたこのブログで公開させていただきます。
2011/3/2追記：
京都の帽子職人3代目さんに教えていただいたのですが、１画面に５件表示でうまく動作しないとき、いったん１画面に１件表示にしてから、５件表示に戻したらうまく動作したそうです。
もしうまく動作しないときなどは、この方法を試してみてください！
（京都の帽子職人3代目さん、情報ありがとうございました！）