2014年版 facebook いいね!ボタンの設置例のページを作成しました。

facebook いいね!ボタンの設置例


facebook開発者トップページ

facebookのいいね!ボタンのコードを取得する前に、アプリケーションIDを取得します。アプリケーションIDはいいね!ボタンから得られる情報をクリックした人のニュースフィードに掲載するために必要な情報(facebookアカウント等)を関連付けます。

facebook開発者 へアクセスし、ページ最上部のアプリ(下線)をクリック。

※facebookアカウント取得済み、facebook開発者登録済みとします。


facebook開発者 アプリ

ページ右上のボタン 新しいアプリケーションの作成 をクリック。


facebook開発者 新しいアプリケーションを作成

App Display Name:(アプリケーションの表示名 / Validと表示されたら成功です。)を記入し、I agree to the Facebook Platform Policies.(facebookのポリシーに同意)にチェックを入れ、続行ボタンを押します。なお、今回はApp Namespaceは空欄で構いません。


facebook開発者 新しいアプリケーションを作成

ページ上部のApp ID:をメモし、ページ中以降の「アプリをFacebookに結合する方法を選択してください」のウェブサイトのサイトURLにfacebookボタンを掲載するURLを記入し、変更を保存ボタンを押して完了です。

※作業を中断するなど、作成したアプリのページを見失ってしまった場合は、facebook開発者 へアクセスし、ページ最上部の「アプリ」のリンクをたどればまたアクセスできます。

facebook いいね!ボタンのコードの取得


facebook開発者トップページ

Like Button facebook開発者 へアクセスし、Step 1 - Get Like Button Codeにコード取得に必要な情報を入力します。

例)

facebookいいね!ボタンコードの取得

以上を入力しましたら、Get Codeボタンを押してコードを取得します。


Like Buttonのプラグインコード

Get Codeボタンを押すとLike Buttonのプラグインコードのダイヤログが開きます。IFRAME を選択し、前半でアプリケーションを作成している場合は「This script uses the app ID of your app:アプリケーション名」という項目がありますので、アプリケーション名を確認しコードをコピーし、ボタンを表示するページのソースに貼り付けます。


facebook いいね!ボタンのコードの修正例

修正前)

Like Buttonのプラグインコード 修正前


修正後)

Like Buttonのプラグインコード 修正後

※例として使用したトップページ用のボタンです。


Open Graph Protocol(OGP)で表示するサムネイル(画像)を設定


タイムラインに表示されたリンクです。Open Graph Protocol(以降、OGP)を設定していない状態では意図しない画像が表示されています。


Open Graph Object Debugger

Open Graph Object Debuggerの結果です。画像を多く使っているページなので画像のプロパティにいっぱい表示されています。本来表示してほしいのは左から10番目(表示順位10番目?)の画像ですがfacebookのタイムラインに表示された画像は一番左の画像です。実際にタイムラインに表示された画像は下のプレビューとは少し違う(左から4、5、6番目が候補)ようですがまぁ、気にせずに画像を指定する以下のOGPをhead要素に入力。


html要素 XHTML 1.0 例)

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">

赤色の文字列をhtml要素に追加で記述します。名前空間の記述が無いと、いいね!ボタンを押してもらっても友達のニュースフィードに表示されないようです。(注1)


Get Open Graph Tags 例)

<meta property="og:image" content="http://homepagelecture.web.fc2.com/cpu_motherboard/msi_z97_gaming7.jpg" />

name属性 例)

<meta name="og:image" content="http://homepagelecture.web.fc2.com/cpu_motherboard/msi_z97_gaming7.jpg" />

property属性をname属性に置き換えても大丈夫なようです。特に拘るところでもないのですが、property属性がHTML,XHTMLでサポートしていない点が気になる方はどうぞ。


Open Graph Object Debugger

OGPをページに設定したあと、Open Graph Object DebuggerのFetch new scrape informationボタンでキャッシュをクリアした結果です。意図した画像が表示されています。


タイムラインのサムネイルも指定した画像に変更されていました。


余談ですが、og:imageのほか、OGPを設定する上で必須プロパティとされるog:title(ページのタイトル)、og:type(ページのタイプ)、og:url(ページのURL)ですが、Warnings That Should Be Fixedにも掲載されているものの、facebookではog:descriptionも加え、もともとtitle要素やmeta要素などで設定してあればそちらを参照してOGPとしてフォローしてくれるみたいですね。


注1

facebookタイムライン

いいね!ボタンを押すと最近のアクティビティに表示されます。その後、アクティビティログを表示させ、いいね!ボタンを押したページを黒丸(●)のタイムラインに表示にセットしないと友達のニュースフィードには表示されないようです。デフォルトでは白丸(○)のタイムラインに表示にセットされていました。黒丸と白丸の違いは私も謎。公開設定を自分のみにしたときに自分のタイムラインに表示する(●)か表示しないか(○)の違いっぽいのですが、それ以外の違いはわかりません。

html要素の名前空間のURLをxmlns:fb="http://www.facebook.com/2008/fbml"から、xmlns:fb="http://ogp.me/ns/fb#"へ変更することでデフォルトの白丸(○)でも友達のニュースフィードに表示されるようになりました。


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

関連)

はてなブックマークボタンの設置例facebook いいね!ボタンの設置例facebook いいね!ボタンの設置例 2014facebook いいね!ボタンの設置例2Google +1 ボタンの設置例twitterボタンの設置例各ボタンを綺麗に横に並べる各ボタンを綺麗に横に並べる 2トップページへ戻る


RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system