2011.06.13 もみじ
こんにちは、もみじです。
今回はすこーしだけ手を加えられた箇所について。
お気づきの方もいらっしゃると思いますが、Facebookの「いいね!」ボタンを組み込んでみました!
(本当はコメント欄を先に、と考えていたのですが、「いいね!」を気に入ってる方からの要望で。)
参考になるサイトがたくさん見つかったので、すんなり実装。
Like Button - Facebook開発者にて取得したソースを追加するだけです。
フォームに必要事項を入力します。入力内容は以下を参考にあなたのサイトにあわせてください。
URL to Like
「いいね!」ボタンを設置するページのURLを記入します。
とりあえず「00000」とかテキトーに入力して作成しちゃいます。
ソース取得時に「00000」の部分を<$mt:EntryPermalink$>に変更して使用すればOK!
(この時点でMTタグを入れてしまうと、ソース取得時に文字実体参照に変換されてしまうらしい)
Layout Style
表示される「いいね!」ボタンのスタイルです。
変更すると、入力欄右側のボタンの表示が切り替わるのでどれを選ぶかはお好みで。
今回は「button_count」を採用してみました。
standard
「いいね!」ボタンの横に、何人「いいね!」済みなのかを表示
自分もしくはのお友達が「いいね!」済みの場合、お友達のアイコンも表示されるようです。横幅がかなり必要!
button_count
「いいね!」ボタンの横に、何人「いいね!」済みなのか小さく表示されます。
box_count
「いいね!」ボタンの上に、何人「いいね!」済みなのか、吹き出し表示されます。高さも必要なスタイルです。
Show Faces
上記の「Layout Style」項目で「standard」を選択した場合のみ必要な項目。
自分もしくはのお友達が「いいね!」済みの場合表示される写真アイコンの表示・非表示を選択することができます。
Width
表示される「いいね!」ボタンの横幅です。
デフォルトの450のままでも特に問題はないかと。
Verb to display
ボタンに表示されるもじを設定します。「like」の場合「いいね!」が表示され、「recommend」の場合そのまま英語表記になります。
ここはやはり「いいね!」を選びます。
「recommend」にするのであれば、横幅を広くしておいたほうがいいかも。
Font
日本語フォントは選択できないので選択不要。(多分。。。)
Color Schemet
「いいね!」ボタンの色を選択できます。
よく見かけるのは「light」なので、「light」で作成しました。
画像の出来上がりサンプルは「dank」を選択した場合の色です。
いい感じで設定できたらあとは「Get Code」ボタンをクリックでソース取得!!
これをコピペすればできあがり♪
次はtwitterやmixiと連動できるようにしたいですね。
少しずつですが、良くしていければいいなと思います。