Facebookの「いいね」ボタンをブログに設定する

Facebookの「いいね」ボタンをブログに設定する

Posted at October 25,2010 2:55 AM
Tag:[Facebook]

Facebookの「いいね」ボタンをブログに設定する方法を紹介します。

Facebookの「いいね」ボタン

Facebookの「Like Button」のページにアクセスします。

Like Buttonのページ1

そして、ページにある次のフォームを使ってカスタマイズします。

Like Buttonのページ2

以下、それぞれの設定項目について説明します。なお、このページでのカスタマイズだけでは、冒頭の画像のように「いいね」という日本語は表示されないので、生成したコードに対して変更を加えます。変更方法は最後に書いておきます。

URL to Like

「いいね」ボタンを表示したい記事のURLを設定します。省略した場合、このコードを設置したページが対象になります。

Movable TypeやWordPressのメインページやアーカイブページの各記事に設定する場合は、ここに「<mt:EntryPermalink>」や「<?php the_permalink() ?>」を設定すればよいのですが、前後のブラケットが実体参照されてしまうので、「mt:EntryPermalink」や「the_permalink()」のみ設定して、取得したコードに後に修正します。

ちなみに、XFBML形式の場合、次のようにhref属性に設定します。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<$mt:EntryPermalink$>" width="450" font="verdana"></fb:like>

WordPressの場合も同様に修正します。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php the_permalink() ?>" width="450" font="verdana"></fb:like>

iframe形式の場合

<iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Layout Style

表示形式を選択します。

standardを選択した場合の表示
standardを選択した場合の表示

button_countを選択した場合の表示
button_countを選択した場合の表示

box_countを選択した場合の表示
box_countを選択した場合の表示

Show Faces

チェックすればユーザーのアイコンが下部に表示されます。

Show Faces

Width

「いいね」ボタンの表示領域の横幅を設定します。

Verb to display

表示するボタンの種類を選択します。Likeは「いいね」、Recommendは「おすすめ」になります。

Recommendを選択した場合の表示
Recommendを選択した場合の表示

Font

ボタンおよび表示される文章のフォントを選択します。arial、lucida grande、segoe ui、tahoma、trebuchet ms、verdanaがあります。

Color Scheme

ボタンの明るさを変更します。

lightを選択
lightを選択

darkを選択
darkを選択

設定が終わって「Get Code」をクリックすればコードが表示されます。コードはiframe要素のものと、XFBMLの2通りです。

コード

ボタンを日本語で表示する

ボタンを日本語で「いいね」と表示するには、コードに含まれる「en_US」の部分を「ja_JP」に変更します。XFBML形式の場合は次のように変更します。

変更前

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like width="450" font="verdana"></fb:like>

変更後

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:like width="450" font="verdana"></fb:like>

iframe形式の場合も同様です。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

ソーシャルネットワークボタン設置 from ところによりエンジニア
先日のfacebookとの連携の流れで、各種ソーシャルネットワークと共有できるボタンをブログに設置してみました。今時どこのブログを見てもこの程度のボタンは... [続きを読む]

Tracked on April 29, 2011 8:44 PM
コメント

はじめまして。
Movabletypeにいいねボタンを設置したくてこちらのブログを参考にさせていただきました。

ところが、
<$mt:EntryPermalink$>

と設置しても、実際ブログ側でいいねを押すとエラーになり、
なぜかリンク先URLが自ブログではなく、http://facebook.com/となってしまいます。
例)http://www.facebook.com/test/2011/06/post-1.html

本来なら、http://www.私のブログURL/test/2011/06/post-1.html

と、なるべきなんですが・・・

何か解決策などご存じでしたら教えていただけないでしょうか?
よろしくお願いいたします。

[1] Posted by ict : June 21, 2011 2:21 PM

>ictさん
こんばんは。
ご質問の件ですが、作成した「いいね!ボタン」のソース(テンプレートに貼り付けるときの内容)をコメント欄に貼り付けて頂けますでしょうか。
注:ソースの「<」は「&lt;」、「>」は「&gt;」に変換して入力してください。
それではよろしくお願い致します。

[2] Posted by yujiro logo : June 29, 2011 10:38 PM

お時間があれば、で、結構です。
以下の様なコメントが出てしまい、ソースが取得出来ないという、事態が起きております。
もし、ご存知でありましたら、よろしくお願い致します。

お手数なおはなしなので、余力があればで結構です。

Only verified developers can be added as listed developers of this application.
Only verified developers can be added as listed developers of this application. Read http://www.facebook.com/help/?faq=17580 for details.

[3] Posted by 島良一 : June 30, 2011 10:57 AM

>yujiroさん

ご返信ありがとうございます。
ソースは以下になります。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>

[4] Posted by ict : June 30, 2011 12:35 PM

>島良一さん
こんばんは。
メッセージに表示されている以下のリンクを参照願えますでしょうか。
http://www.facebook.com/help/?faq=17580

それではよろしくお願い致します。

>ictさん
こんばんは。

<$MTEntryPermalink encode_url="1"$>

<$MTEntryPermalink$>

としてみてください。
それではよろしくお願い致します。

[5] Posted by yujiro logo : July 1, 2011 12:28 AM

はじめまして。

MTに「いいね!」ボタンを設置したのですが、表示が上手くいかず困っています。

個々の記事にいいねボタンは表示されるのですが、投稿した時点ですでにいいねが押された状態になっており、『○○さん(自分)、○○さん(友達)、他31人が「いいね!」と言っています。』と表示されます。(ちなみに自分のFacebookのウォールに「いいね!」をしたことは表示されていません。)

過去の記事もほとんど同様の状態ですが、中には正しく『「いいね!」と言っている友達はまだいません。』となっているものもあります。(この場合は、いいねをクリックすると、自分のFacebookのウォールにも表示されます。)

どちらの記事も見る限りでは違いはなく、なぜこうなるのか原因がわかりません。

長々とわかりにくい説明で申し訳ございません。
ご多忙とは存じますがお時間がございましたらご回答よろしくお願いいたします。

[6] Posted by houseinfo : July 18, 2011 5:08 PM

>houseinfoさん
こんばんは。
ご質問の件ですが、テンプレートにペーストした「いいね!」ボタンのソースコードをコメントに貼り付けていただけますでしょうか(「いいね!」ボタンのソースコード以外のソースコードは不要です)。その際、このコメントフォームの下に書いてあるとおり、「<」や「>」はそれぞれ「&lt;」と「&gt;」にしてから投稿願います。
また「いいね!」ボタンはMTのどのページに貼り付けてますでしょうか(ブログ記事ページ・月別アーカイブページなど)。
それではよろしくお願い致します。

[7] Posted by yujiro logo : July 21, 2011 9:24 PM

>yujiroさん

お返事ありがとうございます。
「いいね!」ボタンのソースコードは下記の通りです。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=standard&show_faces=true&width=75&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:540px; height:80px"></iframe>

ソースコードはブログ記事につけています。


※先日まで質問した通りの内容でしたが、今は『「いいね!」と言っている友達はまだいません。』になっている記事の「いいね」ボタンをクリックしてもエラーがでて押せない状態です。

大変お手数をおかけしますが、何卒よろしくお願いいたします。

[8] Posted by houseinfo : July 23, 2011 3:53 PM

>houseinfoさん
こんばんは。
MTEnterPermalinkタグの「encode_url="1"」を削除してみてください。
それではよろしくお願い致します。

[9] Posted by yujiro logo : July 24, 2011 2:43 AM

>yujiroさん

お返事ありがとうございます。

早速削除して試してみましたが、変化はみられませんでした。

[10] Posted by houseinfo : July 24, 2011 3:09 PM

>houseinfoさん
こんばんは。
[8]のソースコードを実験用のサイトに貼り付けてみましたが、どのページも正常に表示され、同様の事象は確認できませんでした。
こちらでは今のところ対処案がないのですが、XFBMLのコードでも同様の事象になりますでしょうか。

[11] Posted by yujiro logo : July 24, 2011 10:47 PM

>yujiroさん

こんにちは。

XFBMLのコードでも同じでした。
いいねボタンの前後にシェアボタンとコメント欄を付けているのですがそれが影響しているのでしょうか…。

一旦全部消して再度挑戦してみます。

お忙しい中、何度もご返信いただきありがとうございました。

[12] Posted by houseinfo : July 25, 2011 1:18 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)