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 貼文/影片/留言的網址。例如，貼文或影片看起來會像這樣：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"。

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 規則。