LoginSignup
4

More than 5 years have passed since last update.

Facebookのいいね!ボタンを動的ロードしているページに設置する

Posted at

いいねボタン(やシェアボタン)がFacebookに投稿するタイトル、画像、説明、URLは、それぞれ og:title, og:image, og:description, og:url を参照しています。

Define an Open Graph object

Facebookの開発者サイトのデバッグツールに、いいねボタンのdata-hrefに指定しているURLを入力すると、そのURLをいいね、シェアしたときに取得される情報を見る事ができます。

さて、ページ遷移をせずに、Ajaxでページの一部を書き換えるようなページにおいては、data-hrefやog*をどうすればいいでしょうか。
以下に例を示します。

example.js
// 動的コンテンツのロード
$.ajax('/path/to/fragment_contents', { id: 1 }, function (contents) {
  $('#contents').html(contents);
  FB.XFBML.parse(); // いいねボタンの再読み込み
})
fragment_content.haml
.fb-like{ data: { href: "http://example.jp/base_page?id=#{@id}" } }

data-hrefは土台のページのURLにクエリパラメータをくっつける形にしました。
og:*は動的に変更してやれば行けるのではと思ったんですが、いいねボタンのフォームはDOMから値を取得するのではなく、Facebookのクローラーが取得したページから値を取得しているようなので、上手くいきませんでした。

したがって、上記例ではhttp://example.jp/base_page?id={id}が返すHTMLに、適切なog:*が設定されていなければなりません。
ついでにidが指定されている場合は指定されたidのコンテンツがロードされるようにしておくと良い感じですね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4