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


facebook Developersへ登録】【アプリケーションIDの取得】【ボタンコードの取得


facebook Developersへ登録


facebook Developersへ登録 手順1

facebook Developersにアクセス(facebookアカウントにログインしていない場合はログイン画面が出ますのでログインして下さい。)、ページ右上のRegister Nowをクリックします。


facebook Developersへ登録 手順2

「facebook開発者として登録」の画面が開きますので登録するアカウントを確認、プライバシーポリシーを確認後、「はい」にセットし、登録ボタンを押します。


facebook Developersへ登録 手順3

facebook開発者への登録が成功しました〜云々のメッセージが表示されるので、完了ボタンを押して登録完了です。


アプリケーションIDの取得


facebook Developers アプリケーション 作成1

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

あらかじめfacebookログインよりログインし、facebook Developers へアクセス。ページ上のAppsのプルダウンメニューよりCreate a New Appを選択します。


facebook Developers アプリケーション 作成2

Create a New Appを選択すると新しいアプリを作成する画面が開きます。Display Nameにはアプリケーションの表示名を入力します。例では、いいね!ボタンを設置するWEBサイトのタイトルやブログのタイトルを入力。Namespaceは空欄で構いません。Is this a test version of another app?はいいえのまま。カテゴリはページ用アプリを今回は選択。


facebook Developers アプリケーション 作成3

表示された文字列を入力するセキュリティチェックの後に表示される画面です。App IDが発行されているのを確認。


facebook Developers アプリケーション 作成4

左のメニューよりSettingsを選択し、Contact Emailにメールアドレスを入力し、+Add Platformボタンをクリックします。


facebook Developers アプリケーション 作成5

Websiteを選択します。


facebook Developers アプリケーション 作成6

Site URLにいいね!ボタンを設置するサイトまたはブログのURLを入力し、Save Changesボタンをクリックします。


facebook Developers アプリケーション 作成7

Status&Reviewを選択し、右上のスイッチをYESにセットし、アプリを有効にして完了です。

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


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

facebook Developers へアクセスし、The Like ButtonのLearn Moreボタン(赤丸)をクリックします。


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

Learn Moreボタンを押すとソーシャルプラグインのページが開きます。画面左の「いいね!」ボタン、またはLike Buttonのリンクをクリックします。


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

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


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

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


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

修正前)

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhomepagelecture.web.fc2.com%2F&amp;width=150&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=XXXXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
		

修正後)

<iframe src="http://www.facebook.com/plugins/like.php?href=http://homepagelecture.web.fc2.com/&width=150&layout=button_count&action=like&show_faces=false&share=true&height=21&appId=XXXXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" title="facebook いいね!ボタン">facebook いいね!ボタン</iframe>
		

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


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要素に追加で記述します。名前空間の記述が無いと、いいね!ボタンを押してもらっても友達のニュースフィードに表示されないようです。

なお、html要素の名前空間のURLがxmlns:fb="http://www.facebook.com/2008/fbml"から、xmlns:fb="http://ogp.me/ns/fb#"に変更されていました。古いURLのままですと、せっかくいいね!ボタンを押してもらえても、押して下さった方がアクティビティログより黒丸(●)のタイムラインに表示にセットしない限りお友達のニュースフィードに掲載されないようです。


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としてフォローしてくれるみたいですね。


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

関連)

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


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


inserted by FC2 system