01時09分TweetListPocketFacebookアカウントを取得したので、ついでにブログのテンプレートも更新して「いいね!(like)」ボタンを設置することに。FC2ブログの標準機能としてFacebookのいいね!ボタンが設置できるようになってるものの、設置場所が好きに選べるわけではない(拍手ボタンと連動している)し「おすすめ(recommend)」表記に変えるなど細かい設定はできない。そこで、FC2ブログに限らず自分で「いいね!」ボタンを作成してブログやサイトに設置したい人向けに、説明エントリを書いてみた。Facebookのコード生成ページが日本語化されるまでは役に立つと思う。FC2ブログを使用している人は、そのままテンプレートに貼り付けて使えるコードを記載してあるので、コピーするなり参考するなりして使ってもらえればいいかと。記事の設定」から簡単にいいね!ボタンを表示することができるので、設定が面倒な人はそれを使った方が手っ取り早い。「いいね!(like)」と「おすすめ(recommend)」ボタンの作成ページはすでにFacebookのサポートページに用意されてる。Like」に各ブログやブログツールの変数(FC2ブログなら「<%topentry_enc_link>」)を入れればいいだけなんだけど、基本的に説明が英語でなおかつ試してみないと意味がよくわからないものがあるので一通り解説を。LikeURLを入れる。(コード出力時にURLはエスケープされる。)FC2の変数なら上記の通りに「<%topentry_enc_link>」なので、適当な文字(例えばAAAとか)を入れてあとで差し替えるか、そのまま変数を入れてしまえばよい。(ただしFC2の変数はコード生成時点で<>がエスケープされて%3C%25topentry_enc_link%3Eになってしまうので、どっちにしてもそのままは貼り付けられない。Styleボタンのスタイルを決定する。具体例は以下のとおり。(動作例のボタンの設定先は全て「http://www.google.co.jp/」のもの。)standard標準(スタンダード)タイプ。デフォルト設定だと横幅450ピクセル・縦幅80ピクセルのサイズを確保して表示され、"○○人が「いいね!」と言っています。Faces」をONにすると、そのページをいいね!した「サイトを表示した人」のフレンドの名前と画像が表示させることができるのが特徴。FacesをOFFにしても名前は表示される。)最低横幅は225ピクセルで、最低縦幅は画像表示をOFFにすれば35ピクセルとデフォルトの半分以下にすることが可能。ブログなどではよく使われているタイプなものの、前述のとおりに縦横幅の両方がかなり必要なので「単なるボタン」として設置するには大きすぎることもあるかもしれない。button_countいわゆる「ボタン」タイプの表示。省スペースで表示できるのが特徴で、最低限必要な幅はそれぞれ横90ピクセルと縦20ピクセル。他のボタン(例えばTwitterのツイートボタン)などと並べて表示するなら、恐らく一番扱いやすい大きさのはず。各サイトに表示されているのを見ていると、日本語環境だと表示幅が自然と広くなるせいか少しだけ上下左右が見切れる現象がよく確認できてしまう。表示スペースに余裕があるならサイズ設定に若干余裕を持たせた方がいいように思える。box_count正方形に近い縦長の表示タイプ。横長ボタンタイプのbutton_countとの表示差はほとんどなし。デフォルトの表示幅は横が55ピクセルで縦が65ピクセル。最小幅も同じなので、横幅に余裕がない環境のときはこれを選ぶという形になるのでは。上記の「button_count」と同じように日本語表示だとやはり(特に右が)切れて表示されてしまうので、最小幅には設定しないのをおすすめしたい。FacesONにするとFacebookにログインしている場合は、そのページを「いいね!」したフレンドのプロフィール画像が表示される。(ページの制作者ではなく)「そのページを表示した人」の話なので、その人がFacebookにログインしていなければ設定がどうであっても何も表示されないという点に注意。表示されるスタイルは「standard」に限られるため、「button_count」などを選択した場合は表示されない。standardでも表示されないなら表示サイズが小さすぎる可能性があるので、設定を見直してみること。Width横幅の表示設定。デフォルトでは「450(px)」が入っているので、環境に合わせて任意の数字に変更する。ちなみに表示スタイルを設定で変更してもデフォルトの「450」から自動で変わらないようなので、別のスタイルを選択するときは注意した方がいいかもしれない。displayボタンの表示を「いいね!(like)」と「おすすめ(recommend)」から選択する。「いいね!」と「おすすめ」には特に機能差がないものの、いちおうFacebookのアクティビティの表示で「いいね!といっています」「おすすめしています」と多少表現が変わるという違いがある模様。ちなみにどっちでもカウント数自体は変わらないため、好きな表現の方を選べばOK。「おすすめ」の表示例(google.co.jp)Font「arial」や「verdana」などの中からフォントを選択できる。日本語表記する場合は関係ないので、空欄でかまわないはず。Scheme表示色を「light」と「dark」から選べる。デフォルトは「light」。以下は「dark」の表示例。darkだと表示環境によっては文中の「アカウント登録」が見えないかも知れないが、これは恐らくリンクテキストの標準表示色が白になっているため。言語設定を変えるいいね!ボタンの作成ページには設定項目がないものの、パラメータを追加することで表示言語の設定も実は可能になっている。何も設定しなくてもそのサイトにあった言語で表示されるようにはなってるけど、任意で英語や日本語に変えたい場合は以下のように設定する。英語の表示例iframeを呼び出しているURLパラメータに「&amp;locale=[言語コード]」を追加する。場所は「src="http://www.facebook.com/plugins/like.php?~」の後なら(区切りさえよければ)どこでもいい。英語なら「&amp;locale=en_US」と設定する。逆に日本語だと明示したいなら「&amp;locale=ja_JP」と追加しておく。allowTransparency="true"></iframe>「いいね!」と「おすすめ」ボタンのFC2ブログへの設置コード例FC2ブログのテンプレートにそのまま貼り付けて使用できるコード例。<!--topentry-->から<!--/topentry-->のどこかに貼り付けて使用する。日本語環境だとボタンが見切れがちなので、サイズは少し大きめに設定している。allowTransparency="true"></iframe>Validな(HTMLエラーがない)コードにしたい場合Facebookのコード作成ページ(あるいはここのサンプルの)コードをそのまま使うと、実はHTMLの文法エラーが発生してしまう。これはifreamにIEの独自属性「allowTransparency="true"」でフレームの透過設定がしてあるのが原因。修正したい場合はこの「allowTransparency="true"」を丸ごと消してしまうしかないんだけど、そうするとIEのみフレームの中身が透過せずに背景を無視してボタンの周りが白になってしまう。Chromeなどは別に問題なし。)エラー修正をする場合は、環境によっては「あらかじめ背景の方を白く設定しておく」などの工夫が必要になるかもしれない。記事への反応この記事へのコメントコメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。URLこの記事にトラックバックする(FC2ブログユーザー)スパム対策のため、この記事へのリンクのないトラックバックは受信されません。この記事へのトラックバック【お知らせ】Facebookボタン、デザイン修正しましたtwitterボタンを設置した際に、Facebookボタンの見た目が気になったので修正。前から直したかったんだけど、タイミングがなく放置してたのを、↓のページを参考にして修正。Disqusブログロール空気を読まない中杜カズサブログ名の設定は、まだ。「メルペイ残高」はどう使うのがスマートでお得か?3つのルートから考える「コード決済」は進化か退化か。自分でQRコードをスキャンして初めて実感できた“存在意義”IIJmio(みおふぉん)を解約したのでSIMカードを返却。