数日前に、あまり深いことを考えずにこのブログにもFacebookの「いいね！」ボタンを貼り付けてみました。もっとも日本ではFacebookはあまり人気が無いので、このボタンを押す人はいないだろうと思ってましたが、何人かの方が押して下さったようです。ありがとうございます。
本当は当初、この事は記事にしようとは思っていませんでしたが、実際に活用してくださる方がいるということで、設置の流れを自分への覚書としての意味も含めて書いておこうと思います。ちなみに私はプラグインは使用しないでテンプレートに直接書いています。たった１行を追加するのにプラグインを使用して処理を重くする必要は無いと考えたからです。
まず、Facebookのデベロッパーページに行きます。
 |
すると、このようなジェネレータがあるのでここで必要な設定をして、[Get Code]ボタンを押すと自分のブログに張るコードを取得することが出来ます。 ここで各設定を簡単に説明します。 【URL to Like】 ここでは、「いいね！」ボタンを設置したいページのURLを入力します。ただし今回は各記事のページに設置します。記事を書く度にコードを取得するのは面倒なので、WordPress側で動的にURLを生成するようにします。なので、とりあえずのURLを入力します。 【Layout Style】 「いいね！」ボタンの右隣に表示するテキストの種類です。「standard」にすると 【Show Faces】 ここにチェックを入れると、押した人のFacebookの画像が表示されます。 【Width】 横幅です。【Layout Style】の設定や設置する場所に合わせて設定します。ただしこの値は後で変更出来るので、デフォルトのままにしておきます。 【Verb to display】 ボタンに表示されるテキストです。[like]にすると[いいね！]になり、[recommend]にすると[おすすめ]になります。 【Font】 ボタンのフォントの種類ですが、日本語は関係ないのでデフォルトのままです。 【Color Scheme】 ボタンの背景色です。[light]にすると薄い青で、[dark]すると薄いグレーになります。サイトのイメージに合わせて設定します。 |
 クリックで拡大 |
設定して[Get Code]ボタンを押すと、ソースコードが生成されます。 コードは「iframe」と「XFBML」がありますが、今回はより一般的な「iframe」を使用します。 |
以下が、生成されたソースコードです。
<iframe src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fkclab.jp%252F&amp;layout=button_count&amp;show_faces=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>しかし、このままではＵＲＬが固定なので動的に変更するようにWordPressのテンプレートタグを使います。また表示させる場所に合わせてサイズも変更させています。以下が実際に設置しているコードです。
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink(); ?>&amp;layout=button_count&amp;show_faces=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height: 20px" allowTransparency="true"></iframe>後はこのコードをWordPressのテンプレートの「いいね！」ボタンを表示させたい位置にコピペすればＯＫです。
またこの「いいね！」ボタンを押すにはFacebookのアカウントが必要です。正確にはFacebookにログインしている必要があります。恐らくクッキーを見ている（？）んだと思いますが、ログインしていないでボタンを押すと、
ログインを促すダイアログが開きます。通常は自宅のパソコンではログインした状態になっていると思います。その場合は普通に押すことが出来ると思います。
「いいね！」ボタンを押すとFacebookの自分のページの「最新のアクティビティ」のところに以下のように表示されます。
実は私はFacebookのアカウントは半年ぐらい前に取得していたのですが、どうも使い方がよく分からなくて放置状態でした。これを期にもうちょっとFacebookの使い方を勉強してみようかと思っていたり、思っていなかったり・・・。
Facebookのアカウントのある方はテストＯＫですので、このページ上部のタイトルのすぐ下にある「いいね！」ボタンを押してみてください。ちなみに一度押しても、もう一度押せば解除出来ます。なので、ボタンと言うより、オンオフが出来るスイッチみたいですね。
