TOP > カテゴリ > インターネット・ブログ >

Facebookのいいねボタンで拡散するOGPの設定方法

Facebookのいいねボタンをクリックしただけでは友達のニュースフィード(ウォール)には表示されません。ここではいいねボタンをクリックした際にニュースフィードにも表示されるOGPの設定方法をご紹介します。

1.アプリIDを取得する

公式の開発者ページ(Facebook Developers)でWEBサイトをアプリ登録します。上部にある「MyApps」メニューの「Add a New App」から登録できます。

登録後、左メニューにあるダッシュボード(dashboard)を選択するとアプリID(App ID)を取得する事が出来ます。

設定に関しては左メニューの設定(Settings)でApp DomainsとContact Emailを設定します。App DomainsはドメインでContact Emailはメールアドレスとなります。

次に左メニューの「Status & Review」で上部にあるタイトルの右横にあるバーをYESに変更します。

2.HTMLのコード(初期設定)

[xhtmlの場合] htmlタグに下記のコードを追加します。

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

[HTML5の場合] headタグに下記のコードを追加します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

HTML5でブログのトップページの場合は二箇所のarticleをblogにする。記事の場合はarticleのままです。WEBサイトの場合はwebsiteに変更してください。

3.HTMLのコード(OGPの設定)

OGPはheadタグ内にmetaタグとして挿入します。

<meta property="og:title" content="プチモンテ" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.petitmonte.com/" />
<meta property="og:image" content="http://www.petitmonte.com/images/makiba.gif" />
<meta property="og:description" content="プチモンテのブログです。" />
<meta property="fb:app_id" content="1234567890" />
OGP説明
og:titleページのタイトルです。
og:typeブログのトップページの場合はblog。記事の場合はarticle。WEBサイトの場合はwebsiteとする。
og:urlページのURLです。
og:imageページ用の画像です。
og:descriptionページの説明です。
fb:app_id1.で取得したアプリIDです。

以上でOGPの設定は完了となります。





掲示板

ソフトウェア、ハードウェアのプログラミング用の掲示板を作成しました。質問やわからない事は＠掲示板でユーザー同士で情報を共有して下さい。

関連記事


前の記事：日本語OCRの最高峰(?)技術を無料で利用する
次の記事：Googleマップを埋め込む

公開日：2015年02月02日
記事NO：00176