AMP Conf 2020: Save the date!
AMP
  • websites

amp-facebook-comments

Introduction

The amp-facebook-comments component allows embedding Facebook comments into AMP files.

Setup

Import the amp-facebook-comments component

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

Basic usage

The amp-facebook-comments component only requires the href of the comments.

<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>

Internationalization support

You can set the locale to render the comments in a different language, for example French by specifying 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>

Limit number of comments

You can restrict the number of comments to show at a time by specifying 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>

Theming

Set the color scheme of the comments to be dark by specifying 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>

Comment ordering

By default the comments are ordered in order of most popular, you can change that to be time based by specifying 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>
需要进一步说明?

如果此页面的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

在 GitHub 上编辑实例