以下の設定フォームから設定を行い、コードを生成します。
設定項目は以下の通りになります。
URL to Link
ボタンを設置するURLを設定します。何も記述しなかった場合は設置したページが対象になります。MovableTypeは「<mt:EntryPermalink>」、WordPress「<?php the_permalink() ?>」を設定すれば良いのですが、前後のブラケット（<>の部分）が実体参照されてしまうので、ここでは<mt:EntryPermalink>、<?php the_permalink() ?>のみ設定してコードを生成した後に以下の通り修正を加えます。通常はXFBML形式で使用するのでその例を示します。
※MovableTypeの場合
| <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<$mt:EntryPermalink$>" send="true" layout="button_count" width="450" show_faces="true" font=""></fb:like> |
※XFBMLでWordPressの場合
|
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php the_permalink() ?>" send="true" layout="button_count" width="450" show_faces="true" font=""></fb:like> |
Leyout style
表示形式を設定します。デフォルトではstandardになっていますがbutton_count/box_countを選ぶこともできます。ブックマークがないとstandardでは友達に「いいね!」といっている人はまだいませんと表示されるので、それを望まない場合は他の表示形式を選んで下さい。button_countでは横に、box_countでは縦にいいねボタンと送信ボタンが表示されます。
Show Faces
チェックを入れるとユーザーアイコンが表示されます。
Width
表示領域の幅を設定します。デフォルトは450pxです。
Verb to display
表示するボタンの種類を選択します。Likeは「いいね」、Recommendは「おすすめ」になります。よく見かけるのは「いいね」だと思います。
Font
ボタンおよび表示される文章のフォントを選択します。arial、lucida grande、segoe ui、tahoma、trebuchet ms、verdanaがあります。
Color Scheme
ボタンの明るさを変更します。デフォルトはlightですが、darkを選択するとボタンや文字の色はダークグレーになります。
すべての設定が終わったら、Get Codeボタンを押すと別ウィンドウでコードが生成、表示されるので、コピーペーストします。iframe/XFBML両形式で表示されます。WordPressの場合はXFBML形式、MovableTypeの場合でも通常はXFBMLの方を選んで下さい。
ボタンを日本語で表示する
ボタンを日本語で「いいね」と表示するには、コードに含まれる「en_US」の部分を「ja_JP」に変更します。XFBML形式の場合は次のように変更します。
| <script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script> |
設定が終わったら、表示させたい位置にコードを貼り付けます。
※参照ページ
