midori

Facebook 「いいね」の数とOGPの関係を理解する

OGPのしくみ

  • 「いいね」したときに自分と友人のニュースフィードにも上がる。
  • OGPの設定内容はニュースフィードに表示する内容を指定することができる。

OGPとは

  • Facebook以外のページをFacebookページのように見せる仕組みである。
  • OGPの参照方法は、OGPを設定したURLの先にOGPがあれば、そのOGPのURLを参照し

どんどんたどって最終的なOGPを取得している。

「いいね」ボタンの数とFQLのいいねの数

  • 『「いいね」ボタンに設定したURLのページに設定されたOGPのURL』 をカウントしている。
  • FQLから取得する「いいね」の数は、『条件設定したURL』のカウントを取得している。

『FQL取得の「いいね」』と『「いいね」ボタンの数』が異なる現象に遭遇しました。

A.html 内に表示している下記はどちらも同じURL A.html を条件に指定しています。
OGPの記述のURLは B.html を設定しています。

上がFQLで取得した数。
下がボタンの数。
「いいね」対象のページを A.html とした場合
A.html のOGPのURLを、B.html という別のURLで設定すると

FQL取得では、条件設定するURLが A.html の場合、A.html のカウントになる。
「いいね」ボタンは B.html のOGPを取得し、カウントが B.html のカウントになる。

このOGPの取得の違いに気がつくまでハマってしまいました。

また、最近ではOGPの設定で

fb:app_id と fb:addmin で警告が出るため

対象となるドメインのアプリIDが必要なようです。

ここから作成する。

https://developers.facebook.com/apps/?action=create

アプリの詳細で、ウェブサイトにドメインを設定する。

取得したアプリIDをfb:app_id に設定するとOKです。

ドメイン毎に一つ作っておくだけでよいと思います。

<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="いいね対象のURL" />
<meta property="og:image" content="いいねしたいときに表示したい画像" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="サイトの説明文" />
<meta property="fb:app_id" content="アプリID(15桁)" />
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら