琵琶湖を中心にしたバス釣りブログです。バスボートで琵琶湖のバスを釣っています。

　

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

サイドバーに表示したついでに、記事タイトルの下にもFacebookの「いいね」ボタンを設置します。

今回のカスタマイズではアメブロの記事タイトルの下に・・・

 

このようにFacebookの「いいね」ボタンを表示させることができます。

 

・・・ちょっと表示がずれてますけどね。

アメブロにFacebookのいいねボタンを表示させる詳しい手順

今回のはカスタマイズは超簡単です。

まずは以下のコードを全てコピーしてください。

<script>
$(document).ready(function(){

var page_url = location.href;
if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
var entries = $(".newentrytitle a");
var classname = ".updatetime";
var flg = 0;
} else {
var entries = $(".foot a:contains('記事URL')");
var classname = "div.entry .theme";
var flg = 1;
}
for (i = 0; i < entries.length; i++) {
var url = entries[i];
if (flg == 0) {
title = entries.eq(i).text();
} else {
title = $("div.entry h3.title").eq(i).text();
}

var facebook_btn = '<iframe src="http://www.facebook.com/plugins/like.php?href='+ encodeURIComponent(url)+'&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>';

$(classname).eq(i).append(' <span>' + facebook_btn + '</span>');
}
})
</script>

 

次にアメブロへログインして、

「ブログを書く」 ⇒ 「サイドバーの設定」 ⇒ 「プラグインの追加」 ⇒ 「フリープラグイン」。

先ほどコピーしたコードを貼り付け、保存します。

 

次に 「ブログを書く」 ⇒ 「サイドバーの設定」 ⇒ 「サイドバーの配置」 で、フリープラグインを配置、保存。

 

お疲れ様でした。

これでアメブロの記事タイトルの下にFacebookのいいねが表示されます。

サイドバーに表示する方法はこちら。

 

◆2011年07月11日 追記◆

いいねボタンの表示がずれることに関して、対処法をコメントいただきました。

コピペするコードの最後のほうで、

style="border:none; overflow:hidden; width:450px; height:21px;"

のところを以下に変更することできれいに表示されるそうです。

style="border:none; overflow:hidden; width:70px; height:21px; margin:3px 0 -5px 3px;"

 

人気ブログランキングの応援お願いします。

• tweet
• 

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓