ホームページやブログにFacebookの「いいね」ボタンを表示する

• 詳細
• 最終更新日 2011年9月02日（金曜）11:31

最近ではブログサイトなどのツールに標準で「いいね」ボタンの追加ができるようになっているので、ブログサイトなどでは必要ないかもしれませんが、ホームページに「いいね」ボタンを表示したい、という場合には・・・？それほど難しいわけではないんです。

■「いいね」ボタン？

Facebookの「いいね」ボタンです。→こんな感じの

このボタンをホームページに設置するとどうなるかというと・・・？

読んでくれた読者の方がFacebookユーザーで、「いいね」ボタンをクリックすると、Facebook上に「○○さんがいいね、と言っています」と表示してくれる、というワケです（Facebook上でサイトの紹介を出来るという事になります、ね＾＾）

■設置手順

まず、「いいね」ボタンを表示するソースコードを取得するためのWebページへ行きます。

以下のアドレスへアクセスして下さい。（右図のようなサイトです）

「いいねボタン」コード取得ページ

 

必要事項を入力していきます。

URL to Like　

「いいね」を表示したいホームページのアドレス
（http://kspc-web.com　のような）

Send Button (XFBML Only)

メッセージを入力する欄を表示するかどうかのチェックですが、ここはレ点チェックを外しておいたほうが良いと思います。（※ページ末尾に説明）

Layout Style

ボタンと文章の配置を選択肢から選びます（入力欄右側に、実際の表示例が出ますので、切り替えながら確認して選んで下さい）

Width

表示させるボタンの幅（ピクセル単位で数字を入力します）

Show Faces

「いいね」を押してくれたFacebookユーザーの顔写真を表示するかどうか？を選びます。

Verb to display

表示するのを「いいね」か「おすすめ」かどちらかを選びます。「Like」が「いいね」、「Recommend」が「おすすめ」

Color Scheme

ボタンのカラー

Font

フォント（文字の字体）を選ぶのですが、日本語サイトの場合は意味が無いようです。

入力し終えたら「Get　Code」をクリックします。

なお、上記の入力中、右側の表示サンプルはずっと英語のままの表記ですが、取得したコードをホームページ上に貼り付けて実際に表示すると日本語に変わりますので、この時点でその心配は必要ありません。

■コードをコピー

「Get　Code」をクリックすると、右図のような画面が出てきますので、上の部分「iframe」の欄の中のコードを全てコピーします。

（下のXFBMLを使っても表示されるようですが、オススメしません）

コピーできたら、あとはこのコードを、表示させたいホームページのソースコードへ追加するだけです。

ホームページをソースコードで編集する事ができる状態であれば、ご自分でお好みの位置に挿入すれば良いですし、CMS（WordpressやMovableTypeなど）なら、iFrameコードを記述するモジュールか何かに入れて、お好みの場所へ表示させれば良いと思います（このあたりの方法や手順は、運営されているホームページによって異なりますので、詳しく知りたい方は個別にご質問・ご相談下さい）

 

※SEND BUTTON(XFBML Only)について

SendButtonは、いいね！を押した時にコメントも一緒に追加する機能のようですが、これは「XFBML　Only」になってます。XFBMLというのはFacebook独自のソースコードの体系のようなのですが、今年はじめにFacebookの仕様変更で使えなくなったそうです。つまり、このボタンを表示させようとすると、XFBMLという、今はもう使用できないソースコードが生成されてしまう、とのことのようです（確認していませんので実際のところはわかりませんが・・・）。iframeというのは、普通のHTMLの一般的なソースコードなので、こちらを使うためにも、SendButtonは表示しない方を選択することをオススメします。

■ご注意

この手順と解説は、この記事を編集している2011年8月8日時点の情報です。Facebookは仕様変更ややり方の変更・表示の変更などが非常に早く、数カ月後には「そのやり方は古い。もう方法が違っている」なんてこともあるかもしれません（ないかもしれませんけど＾＾；）。申し訳ありませんがそのつもりで、あくまで参考記事程度にお読み下さい。