How to create facebook comments on AMP Blogger

Finally Google chose Facebook comments plugin first supported by AMP HTML. For that then I tried it on one of my AMP blog and Facebook comments appear perfect on the blog, how to install it is quite easy. 

In addition, incoming comments can be synced with the fans page, meaning incoming comments can appear on the blog and on the fan page by using the Facebook application. 

To try Facebook comments on the AMP blog, please try on the button below. 


If you want to try posting a Facebook comment on the AMP blog, please follow the steps below. 

Please copy this HTML code. 

<b:includable id='fb-comment' var='post'> 
<div class='fb-comments' id='fb_comments'> 
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'> 
</amp-facebook-comments> 
</div> 
</b:includable> 

If your blog background is light or bright, please delete the code&nbsp;data-colorscheme='dark'&nbsp;

Then please save the HTML code below under the following code:&nbsp;

<b:includable id='comments' var='post'> 
............ 
............ 
............ 
</b:includable> 

So it looks like the following:&nbsp;

<b:includable id='comments' var='post'> 
............ 
............ 
............ 
</b:includable> 
<b:includable id='fb-comment' var='post'> 
<div class='fb-comments' id='fb_comments'> 
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'> 
</amp-facebook-comments> 
</div> 
</b:includable> 

Please copy the following code:&nbsp;

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fb-comment'/> 

And save it right under the following code:&nbsp;

<b:include data='post' name='post'/> 

Then please save the below meta code above&nbsp;</head>&nbsp;code&nbsp;

<meta content='xxxxxxxxxxxxxxx' property='fb:admins'/> 
<meta content='xxxxxxxxxxxxxxx' property='fb:profile_id'/> 

Please replace&nbsp;xxxxxxxxxxxxxxx&nbsp;for&nbsp;fb:admins&nbsp;with&nbsp;your Facebook profile ID&nbsp;and&nbsp;xxxxxxxxxxxxxxx&nbsp;for&nbsp;fb:profile_id&nbsp;with your fan page fan page.&nbsp;

Then please save the following code above the code&nbsp;</head>&nbsp;

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/
</b:if> 

Then please check Facebook comments on one of your blog posts.&nbsp;

Well to display incoming comments appear on blogs and fans page Facebook, please follow the steps below.&nbsp;

Please create a new Facebook&nbsp;Application&nbsp;at&nbsp;https://developers.facebook.com/&nbsp;.&nbsp;

Please give&nbsp;FB_Comments a&nbsp;name for the&nbsp;application&nbsp;you created.&nbsp;After the application page appears please click the&nbsp;App Review&nbsp;tab in the left sidebar.&nbsp;And change your&nbsp;application&nbsp;to&nbsp;Public&nbsp;and select the app for fans page.&nbsp;

Then please save the following meta code above&nbsp;</head>&nbsp;code&nbsp;

<meta content='xxxxxxxxxxxxxxxx' property='fb:app_id'/> 

Replace&nbsp;xxxxxxxxxxxxxxxx&nbsp;with the&nbsp;xxxxxxxxxxxxxxxx&nbsp;ID you created earlier.&nbsp;

Now please go to one of your blog post and then click on&nbsp;Moderation Tool&nbsp;on Facebook comments like the&nbsp;following&nbsp;picture:&nbsp;

Moderation ToolModeration Tool
On the next page please click your Application name as shown below:&nbsp;

nama Aplikasinama Aplikasi
On the next page please click&nbsp;Settings&nbsp;like the following picture:&nbsp;

SettingSetting
Then in the popup that appears please check on&nbsp;yes, mirror to&nbsp;and select your blog fan page.&nbsp;

popuppopup
Done.&nbsp;

Well this mirroring will appear in the new post after this is created, any comments made on the blog will appear on the fan page, and vice versa comments made on the post fans page will appear in blog comments.

Keyword: Put Facebook Comments On AMP Blog HTML And Fans Page Sync