アメブロの記事ごとにFacebookの「いいね!」ボタンを設置する方法 | WEB制作ってオモシロイ♪
2010-12-17 14:17:30

アメブロの記事ごとにFacebookの「いいね!」ボタンを設置する方法

テーマ:tips・report

アメブロの記事ごとに、Facebookの「いいね!」ボタンを設置したくてやってみました。



最初はこうだったのが・・・


WEB制作ってオモシロイ♪-記事フッター



ボタンを設置すると、こうなり・・・


WEB制作ってオモシロイ♪-いいね!ボタン設置



いいね!をクリックされると、こうなります!


<Facebookにログインしている場合>
WEB制作ってオモシロイ♪-いいね!ボタンクリック


<Facebookにログインしていない場合>
WEB制作ってオモシロイ♪-いいね!



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をコピペして保存して、完了です。


ということで、私が編集して設置しているソースと手順は以下のとおりです。



1 以下のソースをコピーする。


<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+'&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;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>


2 ブログを書く>サイドバーの設定>プラグインの追加>フリープラグイン のところに、1でコピーしたものをペースト。


3 保存してブログを確認して掲載されていたら完了。



<注意点>
選ぶデザインスキンによっては、ボタンが表示されないものもあるので、ご注意を。
ちなみに私はカスタム可能のベーシックを使っています。


<気になる点>
ボタンをクリックされてFacebookのウォールに出ると、
「○○さんがameblo.jpの「アメブロのデザインをフルカスタマイズしてみた」について「いいね!」と言っています。」
というふうに表示されます。
このameblo.jpのところを、ブログタイトルが表示されて、実際にブログにリンクはられた状態にしたいんだけど、なんとかならないかしら。
誰か教え・・・いやいや(^^;、何かできないか調べてみよっと。

美樹さんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントする]

Ameba人気のブログ

Amebaトピックス

    ブログをはじめる

    たくさんの芸能人・有名人が
    書いているAmebaブログを
    無料で簡単にはじめることができます。

    公式トップブロガーへ応募

    多くの方にご紹介したいブログを
    執筆する方を「公式トップブロガー」
    として認定しております。

    芸能人・有名人ブログを開設

    Amebaブログでは、芸能人・有名人ブログを
    ご希望される著名人の方/事務所様を
    随時募集しております。