UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

amp-facebook | AMPにFacebookの埋め込みを挿入する

f:id:mochizuki_p:20170107174707p:plain

AMPでFacebookの埋め込みを表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • 各投稿(ビデオ)に対応したショートコードを入れる必要がある

専用のJavaScript

以下をhead内に追記してください。

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

HTMLでFacebookの埋め込みを利用する場合、以下のようにJavaScriptを利用します。

<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/sdk.js#xfbml=1&version=v2.8&appId=1635599950085868";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

上記と合わせて各埋め込みを配置したい箇所に設置しておく必要があります。

<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false"><blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a><p>How to share with just friends.</p>Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014</blockquote></div>

iframeを使用する場合もあります。

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&appId=1635599950085868&height=197" width="500" height="197" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

一方でAMPの場合は以下のような形式になります。

投稿

<amp-facebook width=486 height=657
    layout="responsive"
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

ビデオ

<amp-facebook width=552 height=574
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

つまり、通常の埋め込みコードからリンクのURLの部分を抜粋して、amp-facebookでレイアウトを指定した上で中に挟めばよいわけです。

わかりにくいですが、facebookの埋め込みコードにはdata-hrefで示されたリンクの部分があります。

data-href="https://www.facebook.com/facebook/videos/10153231379946729/"

この箇所をamp-facebookのdata-hrefで指定します。

まとめると必須となる要素は、

要素名 説明
width ツィートの埋め込み枠の幅 486
height ツィートの埋め込み枠の高さ 657
data-href 埋め込みたい記事・動画のURL

width, height

レンダリングの計算コストを削減するために事前にサイズを指定しておきます。

data-href

埋め込みたい記事・動画のURLを指定

例: https://www.facebook.com/facebook/videos/10153231379946729/

任意の要素

要素名 説明
data-embed-as 詳細は下で video
layout レイアウトの指定 responsive

data-embed-as

動画をシェアするときにこれを指定すると、リンクではなく、HTML5の動画プレイヤーだけが表示されます。