Facebookアカウントを取得したので、ついでにブログのテンプレートも更新して「いいね！（like）」ボタンを設置することに。すでにFC2ブログの標準機能としてFacebookのいいね！ボタンが設置できるようになってるものの、設置場所が好きに選べるわけではない（拍手ボタンと連動している）し「おすすめ（recommend）」表記に変えるなど細かい設定はできない。
そこで、FC2ブログに限らず自分で「いいね！」ボタンを作成してブログやサイトに設置したい人向けに、説明エントリを書いてみた。Facebookのコード生成ページが日本語化されるまでは役に立つと思う。FC2ブログを使用している人は、そのままテンプレートに貼り付けて使えるコードを記載してあるので、コピーするなり参考するなりして使ってもらえればいいかと。
もちろん、FC2ブログ利用者ならブログの管理ページの「環境設定の変更 → ブログの設定 → 記事の設定」から簡単にいいね！ボタンを表示することができるので、設定が面倒な人はそれを使った方が手っ取り早い。
コード作成ページの説明
「いいね！（like）」と「おすすめ（recommend）」ボタンの作成ページはすでにFacebookのサポートページに用意されてる。
単に生成するだけなら「URL to Like」に各ブログやブログツールの変数（FC2ブログなら「<%topentry_enc_link>」）を入れればいいだけなんだけど、基本的に説明が英語でなおかつ試してみないと意味がよくわからないものがあるので一通り解説を。
URL to Like
URLを入れる。（コード出力時にURLはエスケープされる。）FC2の変数なら上記の通りに「<%topentry_enc_link>」なので、適当な文字（例えばAAAとか）を入れてあとで差し替えるか、そのまま変数を入れてしまえばよい。（ただしFC2の変数はコード生成時点で<>がエスケープされて%3C%25topentry_enc_link%3Eになってしまうので、どっちにしてもそのままは貼り付けられない。）
Layout Style
ボタンのスタイルを決定する。具体例は以下のとおり。（動作例のボタンの設定先は全て「http://www.google.co.jp/」のもの。）
standard
標準（スタンダード）タイプ。デフォルト設定だと横幅450ピクセル・縦幅80ピクセルのサイズを確保して表示され、"○○人が「いいね！」と言っています。"と表示される。後述の「Show Faces」をONにすると、そのページをいいね！した「サイトを表示した人」のフレンドの名前と画像が表示させることができるのが特徴。（ちなみにShow FacesをOFFにしても名前は表示される。）最低横幅は225ピクセルで、最低縦幅は画像表示をOFFにすれば35ピクセルとデフォルトの半分以下にすることが可能。
ブログなどではよく使われているタイプなものの、前述のとおりに縦横幅の両方がかなり必要なので「単なるボタン」として設置するには大きすぎることもあるかもしれない。
button_count
いわゆる「ボタン」タイプの表示。一番省スペースで表示できるのが特徴で、最低限必要な幅はそれぞれ横90ピクセルと縦20ピクセル。他のボタン（例えばTwitterのツイートボタン）などと並べて表示するなら、恐らく一番扱いやすい大きさのはず。
ただ各サイトに表示されているのを見ていると、日本語環境だと表示幅が自然と広くなるせいか少しだけ上下左右が見切れる現象がよく確認できてしまう。表示スペースに余裕があるならサイズ設定に若干余裕を持たせた方がいいように思える。
box_count
正方形に近い縦長の表示タイプ。横長ボタンタイプのbutton_countとの表示差はほとんどなし。デフォルトの表示幅は横が55ピクセルで縦が65ピクセル。最小幅も同じなので、横幅に余裕がない環境のときはこれを選ぶという形になるのでは。
ただ上記の「button_count」と同じように日本語表示だとやはり（特に右が）切れて表示されてしまうので、最小幅には設定しないのをおすすめしたい。
Show Faces
ONにするとFacebookにログインしている場合は、そのページを「いいね！」したフレンドのプロフィール画像が表示される。あくまで（ページの制作者ではなく）「そのページを表示した人」の話なので、その人がFacebookにログインしていなければ設定がどうであっても何も表示されないという点に注意。
また表示されるスタイルは「standard」に限られるため、「button_count」などを選択した場合は表示されない。もしstandardでも表示されないなら表示サイズが小さすぎる可能性があるので、設定を見直してみること。
Width
横幅の表示設定。デフォルトでは「450(px)」が入っているので、環境に合わせて任意の数字に変更する。ちなみに表示スタイルを設定で変更してもデフォルトの「450」から自動で変わらないようなので、別のスタイルを選択するときは注意した方がいいかもしれない。
Verb to display
ボタンの表示を「いいね！（like）」と「おすすめ（recommend）」から選択する。「いいね！」と「おすすめ」には特に機能差がないものの、いちおうFacebookのアクティビティの表示で「いいね！といっています」「おすすめしています」と多少表現が変わるという違いがある模様。
ちなみにどっちでもカウント数自体は変わらないため、好きな表現の方を選べばOK。
「おすすめ」の表示例（google.co.jp）
Font
「arial」や「verdana」などの中からフォントを選択できる。日本語表記する場合は関係ないので、空欄でかまわないはず。
Color Scheme
表示色を「light」と「dark」から選べる。デフォルトは「light」。以下は「dark」の表示例。
darkだと表示環境によっては文中の「アカウント登録」が見えないかも知れないが、これは恐らくリンクテキストの標準表示色が白になっているため。
言語設定を変える
いいね！ボタンの作成ページには設定項目がないものの、パラメータを追加することで表示言語の設定も実は可能になっている。何も設定しなくてもそのサイトにあった言語で表示されるようにはなってるけど、任意で英語や日本語に変えたい場合は以下のように設定する。
英語の表示例
iframeを呼び出しているURLパラメータに「&locale=[言語コード]」を追加する。場所は「src="http://www.facebook.com/plugins/like.php?～」の後なら（区切りさえよければ）どこでもいい。例えば英語なら「&locale=en_US」と設定する。逆に日本語だと明示したいなら「&locale=ja_JP」と追加しておく。
英語設定時のコード例
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.co.jp%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>「いいね！」と「おすすめ」ボタンのFC2ブログへの設置コード例
FC2ブログのテンプレートにそのまま貼り付けて使用できるコード例。<!--topentry-->から<!--/topentry-->のどこかに貼り付けて使用する。なお日本語環境だとボタンが見切れがちなので、サイズは少し大きめに設定している。
standard
いいね！（like）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>おすすめ（recommend）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=standard&show_faces=true&width=450&action=recommend&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>button_count
いいね！（like）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>おすすめ（recommend）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=button_count&show_faces=false&width=98&action=recommend&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:98px; height:21px;" allowTransparency="true"></iframe>box_count
いいね！（like）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=box_count&show_faces=false&width=70&action=like&colorscheme=light&height=68" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:65px;" allowTransparency="true"></iframe>おすすめ（recommend）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=box_count&show_faces=false&width=70&action=recommend&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:65px;" allowTransparency="true"></iframe>言語設定が「英語」の表示例
いいね！（like）
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2F128bit.blog41.fc2.com%2Fblog-entry-252.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>おすすめ（recommend）
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>&layout=standard&show_faces=true&width=450&action=recommend&colorscheme=light&height=80&locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>Validな（HTMLエラーがない）コードにしたい場合
Facebookのコード作成ページ（あるいはここのサンプルの）コードをそのまま使うと、実はHTMLの文法エラーが発生してしまう。これはifreamにIEの独自属性「allowTransparency="true"」でフレームの透過設定がしてあるのが原因。修正したい場合はこの「allowTransparency="true"」を丸ごと消してしまうしかないんだけど、そうするとIEのみフレームの中身が透過せずに背景を無視してボタンの周りが白になってしまう。（FirefoxやGoogle Chromeなどは別に問題なし。）
エラー修正をする場合は、環境によっては「あらかじめ背景の方を白く設定しておく」などの工夫が必要になるかもしれない。
この記事へのコメント
コメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。