アメブロの記事ごとにFacebookの「いいね！」ボタンを設置する方法
アメブロの記事ごとに、Facebookの「いいね！」ボタンを設置したくてやってみました。
最初はこうだったのが・・・
ボタンを設置すると、こうなり・・・
いいね！をクリックされると、こうなります！
＜Facebookにログインしている場合＞
＜Facebookにログインしていない場合＞
SNS系のボタンがまとまってていい感じ。
こちらのブログの内容を参考に、ちょっと編集させていただいて設置しました。
「アメブロでfacebookやはてぶ等の各種ソーシャルブックマークボタンを自動で設置する方法」
http://ameblo.jp/amebloger-x/entry-10678387982.html
私が設置したかったのは、記事下の「なうで紹介・mixiチェック・ツイートする」ボタンの下だったので、
$(".entry_head").eq(i).before
の部分を、
$(".subContents").eq(i).after
に変更しました。
あとは、ボタンの表示の仕方をただのカウントだけじゃなくてコメントやアイコン付きで出したかったので、
layout=button_count
の部分を
layout=standard
に変更しました。
あとは幅や高さを調節して、はてぶやツイッター、mixiボイスのボタンはいらなかったので、サクッと削りました。
そして、フリープラグインにscriptをコピペして保存して、完了です。
ということで、私が編集して設置しているソースと手順は以下のとおりです。
以下のソースをコピーする。
<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ';$(".subContents").eq(i).after(" <span>"+e+"</span>")}});</script>
ブログを書く＞サイドバーの設定＞プラグインの追加＞フリープラグイン のところに、1でコピーしたものをペースト。
保存してブログを確認して掲載されていたら完了。
＜注意点＞
選ぶデザインスキンによっては、ボタンが表示されないものもあるので、ご注意を。
ちなみに私はカスタム可能のベーシックを使っています。
＜気になる点＞
ボタンをクリックされてFacebookのウォールに出ると、
「○○さんがameblo.jpの「アメブロのデザインをフルカスタマイズしてみた」について「いいね！」と言っています。」
というふうに表示されます。
このameblo.jpのところを、ブログタイトルが表示されて、実際にブログにリンクはられた状態にしたいんだけど、なんとかならないかしら。
誰か教え･･･いやいや（＾＾；、何かできないか調べてみよっと。