facebookの投稿を、Webサイトに埋め込む仕組みが使えるようになったみたいです。
- Facebook、「埋め込み投稿」機能を全ユーザーが利用可能に -INTERNET Watch
- Embedded Posts Now Available to Everyone- Facebook Developers
動画の再生もlikeも、この埋め込み投稿からできるよ! とのことです。
いちおう仕組みとか使い道とか、いろいろ調べてみました。
埋め込みタグの取得方法
方法は2つあります。
まず、facebook上で、投稿の右上に付いている矢印から「埋め込み投稿」を選ぶ方法。
例えばザッカーバーグの投稿とか。
クリックするとこんな画面。ここで出てくるタグをhtmlに貼ると、投稿が埋め込みできるわけです。
ふたつめ。ここのページでポストのURLを入力すると、埋め込みタグつくれます。
こちらはこんな画面。
なお、facebookの投稿のURLは、投稿の時刻の部分に貼られてるリンクからとれますよ。
埋め込みタグ
埋め込むときの実際のタグはこんな感じ。
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/fnobi/posts/523780947693730"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/photo.php?v=10200120650771638">Post</a> by <a href="https://www.facebook.com/mumfordandsons">Mumford and Sons</a>.</div></div>
おなじみのfb-rootに、fb-postっていうものがくっついている形ですね。
タグの形式は非常にシンプルで、 data-hrefに埋め込みたい投稿のURLを入れるだけみたいです。
中のfb-xfbml-parse-ignoreは、代替コンテンツみたいなかんじですね。
公式が生成するタグはこういう感じのテキストリンクが入ってますが、たぶん別のものいれても動くと思います。
何に使えそうだろうか
たとえばキャンペーンサイト上で、投稿に対するlikeを可視化したり、ねだったりしやすくなるので、できることは増えそう。
投稿のURLがあれば埋め込みタグはこっちでも生成できそうなので、
APIであるウォールの投稿ぜんぶ引っ張ってきて、すべて埋め込みとして表示、とかもできますね。
投稿自由なfacebookページを作っておいて、ユーザーにあるテーマで投稿してもらって、そのいいね数を競う…みたいな?