いいねボタンのOGP設定

◼︎「いいね!」ボタンを設置したら必ずopen graph protocol(OGP)を設定する

「いいね!」ボタンを設置したら必ずOGPの設定をしておきましょう。OGPはfacebookだけでなく、mixiなど他のソーシャルメディアで活用されているメタタグの記述方式で、異なるwebサイト間で効率的かつ分かりやすく情報を共有するための仕組みです。

OGPを設定すれば、ユーザーが外部webサイトに「いいね!」をした時、そのウェbサイトの情報が意図したとおりに表示されるようになります。

  1. OGPを設定するwebサイトのDoctype宣言の後に次のコードを登録してxmlns属性を指定する
  2. 「いいね!」ボタンのコードを出力できるページ「like button」にアクセスする(このページは英語表記のみ)
  3. 先ほどコードを出力したstep1の下に「step2 get open graph tags」が表示されるので、必要な項目を入力する
  4. 「get tags」ボタンをクリックする
  5. コードが出力される
  6. コードをコピーする
  7. 「OK」ボタンをクリックして画面を閉じる
  8. このコードにはサイトの説明を記述するdescriptionが設定されていないので、次の例のようにコンテンツについての簡単な説明を加える
  9. 修正したコードをコピーする
  10. 設置するコンテンツの〈head〉〈/head〉内に貼り付ける

→注意「webサイトを選択する時」

ブログやニュースサイトなど、記事1つ1つにOGPを設定する場合は、注意が必要です。webサイトのカテゴリには「blog」「website」「article」の3つのtypeが用意されていますが、articleは少し位置付けが異なります。「article」はブログの記事やニュース、写真、動画など、サイトの中のコンテンツにつけるために用意されています。ブログ全体やニュースサイトに対しては、「blog」「website」を選択します。

→正しく設定できたかチェックする

正しく設置できたかをチェックするためにはデバッガーを使います。facebook URL Linterにアクセスして、webページのURLを入力し、デバッグボタンをクリックすれば、チェックできます。

問題なければ、実際にサイトの該当コンテンツから「いいね!」ボタンをクリックしてみましょう。自分のウォールに「いいね!」ボタンをクリックしたことが表示されること友達のニュースフィードにも表示されることを確認しましょう。

→何故かうまく表示されないという場合の対処方法

OPGをきちんと設定しているのにfacebookで投稿した時に画像が表示されないことがあります。よくあるのが、ブログの更新を告知しようとしていつもはOGPの設定が反映されるのに、記事によって反映されないというケースです。こうした場合に上記のデバッガーにアクセスして一度URLをデバッグしてみると、正常に表示されるようになることがあります。

□モバイルからの見え方を確認する

スマートフォンからfacebookページを表示して見え方を確認しましょう。スマートフォン用アプリをダウンロードする。facebookは公式のスマートフォン用アプリを用意しています。iOS版、Android版がダウンロードできます。

◼︎作成したfacebookページを確認する

アプリを入手してfacebookページを見てみましょう。

●iOS版の手順

  1. メニューから表示するfacebookページをタップする
  2. facebookページが表示される
  3. 管理人であればモバイルからもページ名で投稿することができる。「投稿」あるいは「写真をシェア」をタップする

→モバイルからfacebookページは見られない

2012年現在ではモバイル端末からfacebookページを表示してもタイムライン表示されませんが、近々個人ページと同様にタイムライン表示されることに成ると予想されています。