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

    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.