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 專頁呈現 `timeline` 和 `events` 分頁。
<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 上編輯範例-
由 @nainar 撰寫