いいねボタン

このエントリーをはてなブックマークに追加

いいねボタンは、Facebook上で気軽にコンテンツを共有するためのシンプルなプラグインです。 サイト上のいいねボタンがクリックされると、そのコンテンツとボタンをクリックしたユーザとの間に、グラフ内の接続が作成されます。 また、いいねボタンのクリックはOpen Graphの「いいね(Like)」を公開し、 ユーザのタイムラインとフレンドのニュースフィードに、 ストーリーを表示します。 このストーリーは、サイトへのリンクバックになります。

「いいね」アクションによって作成されたストーリーは、 メタタグを使用することで、 Open Graphオブジェクト内で、 シンプルなHTMLページに切り替えられ、それによって価値が高められます。 もし、いいねボタンをウェブサイト上で使用するつもりならば、ガイドに沿って、 いいね!されたコンテンツが、メタタグによってタイムライン上とニュースフィード、その他の連携先で見栄えが良くなるようにすることをお勧めします。 コンテンツとFacebookとの間の連携をより良くするために、 「Maximizing Distribution for Media Content」 を読むことをお勧めします。

いいねボタンに表示されるカウントは、コンテンツに対する全ての「いいね」と「シェア」、またその他の要因がありますが、それについてはFAQを確認してください。 設定を正しく行えば、任意でいいねボタンがクリックされた際にストーリーのコメントを表示させることが出来ます。 いいね!の後にコメントされると、ニュースフィード内でそのストーリーが優先(目立つ?)表示されます。

下記の設定を参考に、いいねボタンのレイアウトやスタイルをカスタマイズする事が可能です。

もし、いいねボタンを2012/11/07以前に実装した場合は、お読みください。
  • 2012/11/07に、コンテンツの制限、公表の更新、組み込みのいいねアクションの統合など、 いいねボタンの機能が更新されました。
  • この更新以前にいいねボタンを実装していた場合、Button Migrationを読んで、 動作するのに必要な修正を行なってください。
  • 2013年7月のシステム移行後、いいねボタンのhrefパラメーターは絶対URLが必須になります。

コードの取得

「いいねボタン」の実装には、下記の3つの方法があります。

  • HTML5
  • XFBML(Facebookの特別なマークアップ)
  • iframe

HTML5とXFBMLのバージョンはより融通がきく一方、コンフィギュレーターを含むFacebook SDK の使用が必須になります。 この方法は、下記の事を行います。

  • プロフィール写真を表示する・しないに応じて高さを調節します
  • リアルタイムでいいねボタンがクリックされた事を検知するために、edge.createイベントをJavaScript SDKを使用して監視します。
  • いいねボタンがクリックされたら、コメントボックスが表示されるように有効化します。

設定

いいねボタンのためのツールがFacebookの開発者向けページにありますので、 それを利用して埋め込み用のコードを作成してください。

Fb like botton setup
(1)いいね!のURL
いいね!の対象になるURLです。XFBMLであれば、デフォルトで設置したページが対象になります。
(2)送信ボタン(XFBML限定)
送信ボタンを含めます。送信ボタンはjavaScript SDKが有効になっているサイトでしか使用できません。
(3)レイアウトスタイル
ボタンサイズ、その隣に表示するソーシャルコンテキスト(いいね!しているフレンド等)を指定します。
(4)横幅
ボタンの横幅をピクセルで指定します。 レイアウトスタイルによって指定出来る値が変わりますので、下の属性のlayoutを確認してください。
(5)プロフィール画像の表示
いいね!しているフレンドが2人以上いれば、そのフレンドのプロフィール画像を表示します。
(6)フォント
使用するフォントを指定します。
(7)色構成
色構成を指定します。
(8)表示する動詞
ボタンに表示する動詞を指定します。 現在サポートされているのは、like(いいね)とrecommend(おすすめ)です。
(9)[Get Code]ボタン
このボタンを押すとページ内に埋め込むコードがダイアログで表示されます。 このダイアログで、HTML5、XFBML、IFRAMEのいずれかを選択します。

レイアウトスタイル

standard button count box count
Fb like botton standard Fb like botton button count Fb like button box count

属性

href
「いいね!」対象のURLを指定します。 XFBMLでは、現在のページがデフォルトになります。 注意: 2013年7月移行後は、絶対URLでなければいけません。
send
「いいねボタン」に「送信ボタン」を含めるかを指定します。 これはXFBMLのみ動作します。
layout
下記の3つの中から選択します。
standard
ソーシャルテキストをボタンの右に、その下に友人のプロフィール写真を表示します。 最小幅は225pxで、actionが'recommend'なら、最小幅から40pxずつ、sendが'true'なら60pxずつ増加します。 初期値は幅:450px、高さは写真無しなら35px、写真有りなら80pxです。
button_count
「いいね!」の総数をボタンの右側に表示します。 最小幅は90pxで、デフォルトでは幅は90px、高さは20pxです。
box_count
ボタンの下に「いいね!」の総数を表示します。 最小幅は55pxで、デフォルトでは幅は55px、高さは65pxです。
show_faces
プロフィール写真をボタンの下に表示するかを指定します。(layout -> standardのみ)
width
「いいねボタン」の幅です。
action
ボタンに表示する動詞を指定します。'like','recommend'があります。
font
ボタンに表示するフォントです。 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'があります。
colorscheme
「いいねボタン」の色構成です。 'light', 'dark'があります。
ref
トラッキングリファラのラベルです。 50文字より少なくしなければならず、英数字文字列と一部の記号が使用出来ます。(現在、+/=-.:_) ref属性は、ユーザが一連の流れ(ストリーム)でリンクをクリックした際のリファラのURLに追加する2つのパラメータの元になります。
fb_ref
refパラメーター
fb_source
クリックが行われたストリームタイプ('home', 'profile', 'search', 'ticker', 'tickerdialog', 'other')、
ストーリータイプ('oneline', 'multiline')をアンダースコアで繋げます。

FAQ

ユーザーがいいねボタンをクリックしたのをどのように知ることが出来ますか?

もし、XFBMLによるボタンを使用しているのであれば、 FB.Event.subscribeを通して 'edge.create'に署名することが可能です。

いいねの際に、ユーザがコメントを追加することが出来ますか?

もし、XFBMLのいいねボタンを使用していれば、常にコメントを追加することが出来るようになります。 もし、iframeのいいねボタンを使用していれば、standardレイアウトを使用していれば、コメントを追加することが出来るようになります。 コメントされると、そのストーリーの優先度(目立つ?)が高まります。

いいねボタンの解析は出来ますか?

facebook.com/insightsに行き、ドメインを登録すれば、 日毎のドメインのいいね!の数と、いいねボタンをクリックした人の統計を確認することが可能です。

自分のFacebookページを、いいねボタンのリンク先にしても良いですか?

はい。単純に自分のFacebookページのリンクをボタンのhrefパラメータに指定してください。

ページ上のいいねボタンのトラフィックを知る最良の方法はなんですか?

'ref'パラメータをプラグインに追加してください。(上記、"属性"を参照)
例:

<fb:like ref="top_left"></fb:like>
<iframe src="...&ref=top_left"></iframe>

ユーザがリンクをクリックしてウェブサイトに戻ってき際に、リファラURL内のfb_refパラメータとfb_sourceパラメータの両方を渡します。
例:

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline

ストリーム、ストーリーは全て、カンマで繋げられてref属性に含まれます。

Facebookはいつページをスクラップするのですか?

Facebookがページをスクラップするには、サイトがどのように表示されているのかを知る必要があります。

Facebookはプロパティが最新であることを確認するために、24時間毎にサイトをスクラップします。 オープングラフの管理者が、いいねボタンをクリックしした際にページはスクラップされ、 そのURLはFacebook URL debuggerに入れられます。 FacebookはURLのキャッシュヘッダーを"Expires"と"Cache-Control"の順に観察します。 これに長い時間が指定されていても、Facebookは24時間毎にスクラップを行います。

スクラップのagentは、"facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"です。

異なる言語でいいねボタンを表示させるには、どうしたら良いですか?

もし、XFBMLバージョンを使用しているのであれば、ライブラリのインスタンスを作成する際に言語コードが含まれているので、 "en_US"を変更したい言語コードに置換してください。

'//connect.facebook.net/en_US/all.js';

もし、iframeバージョンを使用しているのであれば、srcのURLにlocaleパラメータに国のコードを指定してください。
例:

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."

また、ボタンの幅はその言語に適した大きさに変更する必要があります。

いいねボタンに表示されているのは、何の数値ですか?

表示されている数字は、これらの合計です。

  • ページのURLが、いいね!された数
  • ページのURLが、シェアされた数(コピー/ペーストされたFacebookへのリンクバックも含む)
  • ページのURLについて、Facebookのストーリー上でいいね!とコメントされた数

いいねボタンをクリックした際に、ポップアップウインドウが表示されませんでした。何故?

もし、いいねボタンをoverflow:hiddenのHTMl要素の端に設置していた場合、 ボタンをクリックした際に欠けてしまうか、または完全に隠れてしまいます。 overflowのプロパティ値を、visiblescrollautoのいずれかにして、 これを修正してください。

 Back to top

© 2010 - 2017 STUDIO KINGDOM