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

2011年4月27日 21:23 takayuki | 個別ページ | コメント(0) | トラックバック(0)

ブログに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$>&layout=button_count&show_faces=false&width=200&action=like&font&colorscheme=light&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(); ?>&layout=button_count&show_faces=false&width=200&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>

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

Movable Typeの場合は「テンプレートモジュール」→「ブログ記事の詳細」に組み込み。
WordPressの場合はデザインテンプレートの「index.php」に組み込み。
で各記事に出力されます。この様にブログ記事のテンプレートに記述すれば、記事一覧ページでも各記事毎に対応した「いいね！ボタン」を設置できます。※テンプレート構成によって異なります。

【補足】
稀にFacebookのいいね！ボタン画像が表示されなくなる事がある様ですが、ＰＣのキャッシュやクッキーをクリアすると改善される様です...。