amp-facebook

1.0 0.1

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

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-facebook-1.0.css">

用法

您可以使用 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-type="comment"
    data-href="https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

在有效的 AMP 文件之外獨立使用

Bento 讓您在非 AMP 頁面中使用 AMP 元件，而無需完全採用有效的 AMP。您可以將這些元件放在不支援 AMP 的框架和 CMS 實作中使用。請參閱我們的指南「在非 AMP 頁面中使用 AMP 元件」以瞭解更多資訊。

若要尋找 amp-facebook 的獨立版本，請參閱 bento-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 (選用)

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

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

title (選用)

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

data-numposts (選用)

要顯示的留言數量。目前 Facebook SDK 將此限制為最多 100 則。如需詳細資訊，請參閱 Facebook 留言文件。

data-order-by (選用)

顯示留言時使用的順序。如需詳細資訊，請參閱 Facebook 留言文件。

data-action (選用)

要在按鈕上顯示的動詞。可以是 like 或 recommend。預設值為 like。

data-kd_site (選用)

此屬性在 Facebook SDK 中也稱為 data-kid_directed_site。如果您的網站或線上服務，或您服務的某一部分是針對未滿 13 歲的兒童，您必須啟用此屬性。預設值為 false。

data-layout (選用)

選取外掛程式可用的不同版面配置之一。可以是 standard、button_count、button 或 box_count 之一。預設值為 standard。

data-ref (選用)

用於追蹤推薦的標籤，長度必須少於 50 個字元，並且可以包含英數字元和一些標點符號。

data-share (選用)

指定是否在「讚」按鈕旁邊包含「分享」按鈕。這僅適用於 XFBML 版本。預設值為 false。

data-size (選用)

按鈕的大小，可以是兩種大小之一，large 或 small。預設值為 small。

如需詳細資訊，請參閱 Facebook 留言文件。

data-tabs (選用)

指定要呈現的索引標籤 (即 timeline、events、messages)。使用逗號分隔的清單來新增多個索引標籤 (例如，timeline, events)。依預設，Facebook 粉絲專頁外掛程式會顯示時間軸活動。

data-hide-cover (選用)

隱藏標頭中的封面相片。預設值為 false。

data-show-facepile (選用)

顯示按讚粉絲專頁的朋友的個人資料相片。預設值為 true。

data-hide-cta (選用)

隱藏自訂的行動呼籲按鈕 (如果有的話)。預設值為 false。

data-small-header (選用)

改用小型標頭。預設值為 false。

通用屬性

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

已棄用的屬性

data-colorscheme (選用)

色彩配置。如需詳細資訊，請參閱 Facebook 留言文件。

注意：Facebook 不再支援此功能。如需更多詳細資訊，請追蹤我們的 追蹤問題 和 Facebook 的錯誤報告。

驗證

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