Great News! Try our new tool to convert img to amp-img. Try Now!

Saturday, September 22, 2018

How To Add Facebook Like Button in AMP Blogger Template

Tutorial How to Add a Facebook Like Button on Blogger Valid AMP without APP ID. Facebook Like Button is good for Your website traffic

Tutorial How to Add a Facebook Like Button on Blogger Valid AMP without APP ID

AMP Blogger - Facebook is the most popular social media on the Internet. More than 2 billion people already have a Facebook account, and more than 2 million people online and actively use Facebook every day..
Facebook juga banyak digunakan oleh para marketing untuk memasarkan dan mempromosikan jasa atau barang yang mereka jual. Karena pasar Facebook saat ini memang masih ramai dan potensial.

Begitu juga dengan para pemilik website atau blog yang mempromosikan website miliknya untuk mendatangkan trafik. Salah satu cara yang biasa digunakan para webmaster adalah Facebook Share dan Facebook Like Button.

But this time I will only explain how to add Facebook Like Button to a Blogger AMP Template, because I have explained about Facebook Share in the article How to install Addthis Share.

Add Like Button on AMP Blogger


As usual, to add new components to the AMP page, we need a JavaScript component from AMP HTML. And to install Facebook Like Button, AMP HTML has prepared amp-facebook-like.

Enter Edit HTML in your Blogger template. Copy and paste this component in the tag head (before </ head>)

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

Next, copy this following HTML code and paste it in the desired place. 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-facebook-like width="90"
  height="20"
  layout="fixed"
  data-layout="button_count"
  expr:data-href="data:post.url">
</amp-facebook-like>
</b:if>

For example, to place the Facebook Like Button at the end of the article, you must add it above the last  <data:post.body/> code. 

Add Share Button

If you want to add the share button next to Like Button, you only need to add the data-share= 'true' code and add the attribute width to 180px, so the code is as below:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-facebook-like width="180"
  height="20"
  layout="fixed"
  data-layout="button_count" data-share='true'
  expr:data-href="data:post.url">
</amp-facebook-like>
</b:if>

Next save changes to your template.

But it should be noted, if a visitor clicks Like, he must confirm that the likes can be counted.