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

いいねボタン(やシェアボタン)が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のコンテンツがロードされるようにしておくと良い感じですね。