amp-facebook

1.0 0.1

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

用法

您可以使用 amp-facebook 元件來嵌入 Facebook 貼文、Facebook 影片或 Facebook 貼文上的留言。

以下範例示範如何嵌入貼文

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://127.0.0.1/ParksCanada/posts/1712989015384373">
</amp-facebook>

以下範例示範如何嵌入影片

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://127.0.0.1/nasaearth/videos/10155187938052139">
</amp-facebook>

以下範例示範如何嵌入貼文上的留言

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-as="comment"
    data-href="https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

屬性

data-href

Facebook 貼文/影片/留言的 URL。例如，貼文或影片看起來會像 https://127.0.0.1/zuck/posts/10102593740125791。留言或留言回覆看起來會像 https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185。

data-embed-as

值可以是 post、video 或 comment。預設值為 post。

貼文和影片都可以嵌入為貼文。為 Facebook 影片設定 data-embed-as="video" 會嵌入影片播放器，並同時加入隨附的貼文卡片。設定 data-embed-as="post" 會忽略標題卡片。這樣做的目的是確保我們正確地放大影片。

comment 值會嵌入貼文上的單一留言 (或留言回覆)。這與 amp-facebook-comments 不同。

請查看文件，瞭解 貼文嵌入 和 影片嵌入 之間的差異。

data-include-comment-parent

值可以是 true 或 false。預設值為 false。

當您嵌入留言回覆時，您可以選擇性地加入回覆的父留言。

data-allowfullscreen

值可以設定或省略。預設為省略 (無全螢幕)。

嵌入影片時，設定此值即可允許全螢幕體驗。

data-align-center

值可以是 true 或 false。預設值為 false。

對於貼文和影片，將此屬性設定為 true 會將貼文/影片容器對齊置中。

data-locale (選填)

預設情況下，locale 會設定為使用者的系統語言；但是，您也可以指定 locale。

如需此處接受的字串詳細資訊，請造訪 Facebook API 本地化頁面。

title (選填)

為元件定義 title 屬性，以傳播到基礎 <iframe> 元素。預設值為 "Facebook"。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

驗證

請參閱 AMP 驗證器規格中的 amp-facebook 規則。