Facebook Page PluginなどをJavaScriptで追加した時に、キチンと表示させる魔法の関数

ブログなどのサイトでは、FacebookのPage Pluginを使うことがよくあると思う。

以前は、iframeでPage Pluginや投稿の埋め込みなどをすることができたのだが、最近それができなくなり、独自のJavaScriptによって挿入しておいたDIVにコンテンツが挿入される仕組みになっている。

通常のWebページであればこれでも全く問題ないし、むしろ複数のFacebook埋め込みを使うときに高速化できるはずなのだが、JavaScriptで動的に変化するSPAのようなものを作っているとこれは厄介である。

実際、AngularJSとWP-API(WordPressの中身をjsonで取れるAPI)を使ってリロードなしで動くテーマを作っているのだが、AngularJSでDIVを挿入しても、それがレンダリングされないため、ただのDIVになってしまっていた。

そこでネットで色々調べたところ、DIVをレンダリングするための関数があることが分かった。

FB.XFBML.parse();

このコードである。

引数に要素のオブジェクトを渡せばそこだけレンダリングしてくれるようだが、面倒なので何も指定していない。ちゃんとやってくれるし良いのではないだろうか。

ということで、自分用のメモ。