AMP
  • 網站

amp-facebook-page

簡介

amp-facebook-page 元件可讓您將 Facebook 粉絲專頁嵌入 AMP 檔案中。

設定

匯入 amp-facebook-page 元件

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

基本用法

amp-facebook-page 元件只需要 Facebook 貼文的 href 即可。

<amp-facebook-page width="340" height="130" layout="responsive" data-href="https://#/imdb/">
</amp-facebook-page>

國際化支援

您可以設定語言代碼,以使用不同的語言 (例如法文) 呈現頁面。

<amp-facebook-page width="340" height="130" layout="responsive" data-href="https://#/imdb/" data-locale="fr_FR">
</amp-facebook-page>

顯示不同分頁

指定 data-tabs="timeline, events",即可為特定的 Facebook 粉絲專頁呈現 timelineevents 分頁。

<amp-facebook-page width="552" height="310" layout="responsive" data-tabs="timeline, events" data-href="https://#/barackobama/">
</amp-facebook-page>

Facebook 粉絲專頁封面

指定 data-hide-cover="true",即可隱藏特定 Facebook 粉絲專頁的封面。

<amp-facebook-page width="552" height="310" layout="responsive" data-hide-cover="true" data-href="https://#/manchesterunited/">
</amp-facebook-page>

朋友

指定 data-show-facepile="false",即可隱藏追蹤特定 Facebook 粉絲專頁的朋友。(需要登入才能看到。)

<amp-facebook-page width="300" height="300" layout="responsive" data-show-facepile="false" data-href="https://#/itsdougthepug">
</amp-facebook-page>

行動呼籲

指定 data-hide-cta="true",即可隱藏特定 Facebook 粉絲專頁的行動呼籲。

<amp-facebook-page width="300" height="300" layout="responsive" data-hide-cta="true" data-href="https://#/TCF.Pak/">
</amp-facebook-page>

變更標題大小

指定 data-small-header="true",即可為粉絲專頁顯示小型標題。

<amp-facebook-page width="300" height="300" layout="responsive" data-small-header="true" data-href="https://#/itsdougthepug">
</amp-facebook-page>
需要更多說明嗎?

如果這個頁面上的說明沒有解答您的所有疑問,歡迎與其他 AMP 使用者聯繫,討論您的確切使用案例。

前往 Stack Overflow
有未說明的功能嗎?

AMP 專案大力鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎您針對特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例