Home » WordPress, プログラミング

WordPressにFacebookの「いいね!」ボタンを貼り付けてみる  このエントリをはてなブックマークに登録 

[ 2010年05月06日 | No Comment | 0 Trackbackk ]


数日前に、あまり深いことを考えずにこのブログにもFacebookの「いいね!」ボタンを貼り付けてみました。もっとも日本ではFacebookはあまり人気が無いので、このボタンを押す人はいないだろうと思ってましたが、何人かの方が押して下さったようです。ありがとうございます。

本当は当初、この事は記事にしようとは思っていませんでしたが、実際に活用してくださる方がいるということで、設置の流れを自分への覚書としての意味も含めて書いておこうと思います。ちなみに私はプラグインは使用しないでテンプレートに直接書いています。たった1行を追加するのにプラグインを使用して処理を重くする必要は無いと考えたからです。

まず、Facebookのデベロッパーページに行きます。

http://developers.facebook.com/docs/reference/plugins/like

いいね!ボタン生成

すると、このようなジェネレータがあるのでここで必要な設定をして、[Get Code]ボタンを押すと自分のブログに張るコードを取得することが出来ます。

ここで各設定を簡単に説明します。

【URL to Like】

ここでは、「いいね!」ボタンを設置したいページのURLを入力します。ただし今回は各記事のページに設置します。記事を書く度にコードを取得するのは面倒なので、WordPress側で動的にURLを生成するようにします。なので、とりあえずのURLを入力します。

【Layout Style】

「いいね!」ボタンの右隣に表示するテキストの種類です。「standard」にすると
standard
こうなります。「button_count」にすると
button_count
こうなります。どちらか好きな方を選択します。

【Show Faces】

ここにチェックを入れると、押した人のFacebookの画像が表示されます。
Show Faces
ただしこれは自分がログインしている場合のみ写真と(Facebookでの)名前が表示されるようです。なので、他人にはこの画像は見られないと思います(違うかな?)。ちなみにログインしていない場合は以下のように表示されます。
Show Faces
私の場合はスペースを大きく取られるのが嫌なので、チェックを外しています。

【Width】

横幅です。【Layout Style】の設定や設置する場所に合わせて設定します。ただしこの値は後で変更出来るので、デフォルトのままにしておきます。

【Verb to display】

ボタンに表示されるテキストです。[like]にすると[いいね!]になり、[recommend]にすると[おすすめ]になります。
Verb to display

【Font】

ボタンのフォントの種類ですが、日本語は関係ないのでデフォルトのままです。

【Color Scheme】

ボタンの背景色です。[light]にすると薄い青で、[dark]すると薄いグレーになります。サイトのイメージに合わせて設定します。
Color Scheme

ソースコード取得
クリックで拡大

設定して[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>

しかし、このままではURLが固定なので動的に変更するように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のテンプレートの「いいね!」ボタンを表示させたい位置にコピペすればOKです。


またこの「いいね!」ボタンを押すにはFacebookのアカウントが必要です。正確にはFacebookにログインしている必要があります。恐らくクッキーを見ている(?)んだと思いますが、ログインしていないでボタンを押すと、

Facebookログイン

ログインを促すダイアログが開きます。通常は自宅のパソコンではログインした状態になっていると思います。その場合は普通に押すことが出来ると思います。

「いいね!」ボタンを押すとFacebookの自分のページの「最新のアクティビティ」のところに以下のように表示されます。

最新のアクティビティ

実は私はFacebookのアカウントは半年ぐらい前に取得していたのですが、どうも使い方がよく分からなくて放置状態でした。これを期にもうちょっとFacebookの使い方を勉強してみようかと思っていたり、思っていなかったり・・・。

Facebookのアカウントのある方はテストOKですので、このページ上部のタイトルのすぐ下にある「いいね!」ボタンを押してみてください。ちなみに一度押しても、もう一度押せば解除出来ます。なので、ボタンと言うより、オンオフが出来るスイッチみたいですね。

スポンサーリンク

 

  にほんブログ村 アウトドアブログ アウトドア用品へ 人気ブログランキングへ  

関連する(かもしれない)記事

Trackback URL

コメントを投稿する(承認後に表示されます)