静的なAMPのブログにコメント欄の設置を可能にするamp-facebook-comments

ブログによくあるコメント欄、欲しくないですか？

「いやいや、普通のブログには付いてるでしょ」 って、はい、そのとおりです😓

でも、このブログにはない。 なぜか。 それは、このブログが 静的なhtmlで構成されている からです。 文字通りD.I.Y.でやってます（笑）

だから自力で付けなきゃいけません。 一見大変そうなこの作業も、実は簡単です。 それは、Facebookが提供している、コメントプラグインがあるからです。

早速実装してみたので、解説してみたいと思います。

facebook comments（コメントプラグイン）とは？

閲覧ユーザーが facebookアカウントでコメントができるエリア を設置することができます。

コメントプラグインがあれば、Facebookアカウントを使用して、サイトのコンテンツにコメントすることができます。利用者は、Facebook上でも同様に友達(および友達の友達)とコメントアクティビティをシェアできます。

コメント - ソーシャルプラグイン - ドキュメンテーション

コメントをするユーザーはfacebookアカウントを利用することになります。 ユーザーが拡散しやすくなるというメリットと、無為なイタズラなどの抑止力になりますね。

詳しい説明と、ソースコードの生成はfacebook公式サイトで生成することができます。 コメント - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

こちらのフォームに正しく記述すると、ソースコードを取得することができます。 通常のサイトであればこのソースコードを自身のサイトに貼り付ければ完成です。

さて、ここからはAMPで作られたページに、コメントプラグインを挿入する方法を説明していきます。

## AMPページに実装する方法 この機能をこのブログに設定したい。 しかし、このサイトはAMPで作られたページです。 なので、先程のジェネレーターで取得したコードをそのまま挿入することができません。

AMPには amp-facebook-comments というfacebook comments専用のスクリプトとコードが用意されています。 そちらを使って実装します。

って、偉そうに書きましたが、すっごく簡単です（笑）

基本的には公式ドキュメントに沿って順に作業をしていけば、誰でも設置できると思います。 amp-facebook-comments – AMP

amp-facebook-commentsコンポーネントを読み込む

いつものように用意された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 width=486 height=657
  layout="responsive"
  data-numposts="4"
  data-href="https://chaos-boy.tokyo/">
</amp-facebook-comments>

特に、ユーザーIDなど特有の値をパラメータにセットする必要はありません。

パラメータ

amp-facebook-comments のドキュメントにも書いてありますが、facebookコメントプラグインで設定できるパラメータは、ampコンポーネントでも同じものを設定できるようです。 data-numposts="4" はコメントの表示個数を設定します。

data-href="https://chaos-boy.tokyo/" プラグインが表示されるページのURLを設定します。

記事のURLですのでページごと異なることに注意してください。

order_byこれは興味深いパラメータです。

• social（質の高いコメント順）
• reverse_time（新しい順）
• time（古い順）

質の高いコメント順ですって。 公式では以下のように説明しています。

social (デフォルト) これは「Top」とも呼ばれます。コメントプラグインでは、ソーシャルシグナルを使用することで、最も質の高いコメントが最上部に表示されます。コメントは、友達や友達の友達からの関連度の最も高いコメント、「いいね！」の数が最も多いスレッド、発言数の多いスレッドが最初に表示されるように並べ替えられます。スパムとして報告されたコメントはビューに表示されません。

コメント - ソーシャルプラグイン - ドキュメンテーション

さすがはfacebook！ データを活用してくれるみたいですね。

まとめ

facebookIDなども不要で非常に気軽に設置できます。 ブログだけではなく、通常のwebサイトなどにコメントエリアをつけることが可能なので、活用の幅が広がりますね。

一般的なブログに付属したコメントとはまた違ったメリットを提供してくれるのが嬉しいところです。 特に コメントを拡散 とか、 質の高いコメント の抽出などは、作者とユーザー双方にメリットがありそうです。

AMPでコメントの機能が欲しければ、このコンポーネントで楽に解決できそうです。