「Facebookいいね！ボタン」をホームページやブログに設置～ワードプレス、ムーバブルタイプ～

ブログにFacebookのいいねボタンを設置した時のおぼえがきです。

まずはじめに「いいねボタン」のコードを「Like Button – Facebook開発者ページ」から取得。

すると、以下画面が表示されますので、必要に応じて設定を変更します。
※画像をクリックすると拡大表示します。

●URL to Like
いいね！の対象となる記事のURLを入力します。
MovableTypeやWordpressで各記事毎にいいね！ボタンを設置する場合は
【Wordpressの場合】<?php the_permalink(); ?>
【MTの場合】　　　　<$mt:EntryPermalink$>
の記述を入力します。

出力されたコードの
<iframe src=”http://www.facebook.com/plugins/like.php?href=********
*******部分を書き換えます。

●Send Button (XFBML Only)
特定のグループにいいね！を送る事ができます。
残念ながらiframeコード出力には対応してません…。

●Layout Style
右にプレビューが表示されますので、３種より好みのスタイルを選択します。

●Show Faces
プロフィール写真の表示、非表示を選択します。true（表示）。false（非表示）

●Width
表示エリアの横幅を指定。

●Verb to display
likeが「いいね！」表示です。プレビューはLikeとなってますが、実際は自動的に「いいね！」と表示されます。
recommendは「おすすめ」となります。

●Font
フォントを指定。デフォルトのままでＯＫかと思います。

●Color Scheme
明るめのボタンと暗めのボタンを選択できます。

上記を入力したら「Get Code」をクリックしてコードを取得します。
HTML5とiframeとXFBMLの３種のコードが表示されますので、
上記コードを自社ホームページやブログ（WordPress、Movable Type）に記述すればＯＫです。

【MTの場合　例】
<iframe src=”http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink$>&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:200px; height:21px;” allowTransparency=”true”></iframe>

【Wordpressの場合　例】
<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=200&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:200px; height:21px;” allowTransparency=”true”></iframe>

【CMS以外で構築のホームページの場合　例】
javascriptで該当ページのURLを取得します。