AMP
  • 网站

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 上编辑示例