amp-facebook-comments
簡介
amp-facebook-comments
元件允許將 Facebook 留言嵌入到 AMP 檔案中。
設定
匯入 amp-facebook-comments
元件
<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
基本用法
amp-facebook-comments
元件僅需要留言的 href。
<amp-facebook-comments width="486" height="657" layout="responsive" data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook-comments>
國際化支援
您可以設定語言環境以使用不同的語言呈現留言,例如法語,方法是指定 data-locale="fr_FR"
。
<amp-facebook-comments width="552" height="310" layout="responsive" data-order-by="social" data-href="https://developers.facebook.com/docs/plugins/comments" data-locale="fr_FR">
</amp-facebook-comments>
限制留言數量
您可以透過指定 data-numposts="5"
來限制一次顯示的留言數量。
<amp-facebook-comments width="552" height="310" layout="responsive" data-numposts="5" data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook-comments>
佈景主題
透過指定 data-colorscheme="dark"
將留言的配色方案設定為深色。
<amp-facebook-comments width="552" height="310" layout="responsive" data-colorscheme="dark" data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook-comments>
留言排序
預設情況下,留言會依熱門程度排序,您可以透過指定 data-order-by="time"
將其變更為依時間排序。
<amp-facebook-comments width="552" height="310" layout="responsive" data-order-by="time" data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook-comments> </body>
需要進一步說明嗎?
如果此頁面上的說明未能涵蓋您的所有問題,請隨時與其他 AMP 使用者聯繫,討論您的確切使用案例。
前往 Stack Overflow 有未說明的特色功能嗎?AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎您針對您特別關注的問題提供一次性的貢獻。
在 GitHub 上編輯範例-
作者: @nainar