facebookのLike!ボタンは、ボタンを押したサイトへのリンクや更新情報を、facebookのマイページに登録するボタンである。ここでは、自分のサイトをfacebookに登録するLike!ボタンを作成し、自分のサイトにLike!ボタンを追加する方法を解説する。
1. Likeボタンの作成
facebookの開発者向けページで、Likeボタンを作成します。
Likeする対象となる自分のサイトのURLを記入しますLayout Style
"standard" は、Likeボタンの横や下に、誰がLikeを押したかを表示します。Show Faces
"button_count"は、Likeされたカウントだけを表示します。
チェックすると、Likeボタンの下に、Likeボタンを押した人のプロフィール写真を表示しますWidth
Likeボタンを表示するiframeの横幅を指定しますVerb to display
"Like"か"Recommend"を選びます。日本語だと「いいね!」か「おすすめ!」でしょうか。
"Get Code"をクリックすると、対応するHTML(iframe)と、XFBMLが表示されます。XFBMLは、facebookアプリケーションをXHTMLに記述する仕組みですが、使うにはfacebookへの登録や準備が必要です。HTMLの方が簡単で、すぐに終わります。
2. Likeボタンの貼り付け
作成したHTMLを、自分のページに貼り付けていきましょう。ただ、Likeボタンを表示するiframeの高さが
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fringoon.jp%2F&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height:px;" frameborder="0" scrolling="no"></iframe>
設定されていないので、忘れずに記入しましょう。例えば、height: 25px; とすると、こんな感じです。
3. 個別エントリーへのLikeボタン
iframeのsrcの href=http%3A%2F%2Fringoon.jp%2F を個別のURLに置き換えれば、個別エントリーへのLikeボタンが貼れる・・・と思います。
MovableTypeなら
<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTArchiveLink$>&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height: 25px;" frameborder="0" scrolling="no"></iframe>
javascriptなら
<script type="text/javascript"><!--
var url = "http://www.facebook.com/plugins/like.php?href=" + encodeURIComponent(location.href) + "&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light";
document.write('<iframe src="' + url + '" allowtransparency="true" style="border: medium none ; overflow: hidden; width: 450px; height: 25px;" frameborder="0" scrolling="no"></iframe>');
//-->
</script>
という感じです。
初めまして。トラックバックの承認も有り難うございます。設置についてはこの記事を参考にさせていただきました。これからも宜しくお願いします。
参考になったみたいで良かったです。
コメントありがとうございました!
すてきなポストをありがとう