Alternative Widget of Facebook Like Box for Blog AMP

Here is a solution for those of you who use blogs with AMP HTML who want to install Facebook Fan Page Like widget for your blog but still problem with "this and that".

This widget I have applied in my blog Jurus Anak Elektro with AMP Production Company template. Hopefully this article can help you to install custom widget of Facebook Fan Page Like for your AMP blog.

AMP .JS

amp-facebook-like.js

Put the following amp-facebook-like.js code above </'head'>. This AMP js which is the key of this alternative Widget Facebook Like Box, with this widget we can display widgets like and share facebook. You can also replace the "Like" button with the "Recommended" Button.

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

amp-animation.js and amp-position-observer

AMP. Js serves to create a slide-up effect on your facebook cover to make it look more beautiful. Put it on top

code </head>

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

CSS

Put the following CSS code for the Facebook Like Box widget on your AMP blog page.

#fb-box-like{width:300px;position:relative;height:110px}
.parallax-image-window {overflow: hidden;height:110px;border-radius:2px}
.parallax-image-window amp-img {margin-bottom: -30%;}
.likebutton{position:absolute;left:7px;bottom:12px;height:20px}
.fb-link{position:absolute;top:25px;left:70px;}
.fb-link a{text-decoration:none;color:#fff}
.fb-link a:hover{text-decoration:underline}
.profilthumb amp-img{position:absolute;top:10px;left:7px;}

HTML

Put the following HTML code by adding the HTML widget

<div id='fb-box-like'>
<div class="parallax-image-window">
  <amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)"
    intersection-ratios="1"
    layout="nodisplay">
  </amp-position-observer>
  <amp-img id="parallaxImage"
    width="300"
    height="170"
    src="https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25299387_957696964377969_984156055346347699_n.jpg?_nc_eui2=v1%3AAeHpJbu2t8WrlO0DQKgC3EkNGv1j0bofH9t-OdHWVSAeKqqHhf5v7P8kCcspn2sPpE6iyiqJzU48Ch_qhNYpCIsKw_QaX8FITB-lF26Uv-Fvxw&oh=e112ad04314140d557528536388fbb5b&oe=5AF89F74"
    alt="Jurus Anak Elektro Timeline"></amp-img>
</div>
<div class='profilthumb'><amp-img src='https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25443320_957696381044694_6120096655469337286_n.png?_nc_eui2=v1%3AAeFmzrvS6EofVO3L1X4YFpK0gKdXgON7lS77Shd1nPWpP6tAK_Tqt0eGmCVAikhPow1s8FW5VZDUG20pEqTqo0rnlBT_6APexi5fbT47DFUGVA&oh=82244c04f45a2d0dd6da887dc7b95903&oe=5AFDF64E' width='54' height='54'></amp-img>
</div>
<div class='fb-link'><a href='https://www.facebook.com/juruselektro/' target='_blank' rel='nofollow' title='Fans Page Jurus Anak Elektro'>Jurus Anak Elektro</a>
</div>
<div class='likebutton'>
<amp-facebook-like width='300' height='20'
    layout="fixed"
    data-share="true"
    data-layout="button_count"
    data-href="https://www.facebook.com/juruselektro/">
</amp-facebook-like>
</div></div>

Note:

Cover

Replace the following url with the cover url of your facebook page.

src="https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25299387_957696964377969_984156055346347699_n.jpg?_nc_eui2=v1%3AAeHpJbu2t8WrlO0DQKgC3EkNGv1j0bofH9t-OdHWVSAeKqqHhf5v7P8kCcspn2sPpE6iyiqJzU48Ch_qhNYpCIsKw_QaX8FITB-lF26Uv-Fvxw&oh=e112ad04314140d557528536388fbb5b&oe=5AF89F74"

Profile

Replace the following url with the profile url of your facebook page.

src='https://scontent.fsub2-1.fna.fbcdn.net/v/t1.0-9/25443320_957696381044694_6120096655469337286_n.png?_nc_eui2=v1%3AAeFmzrvS6EofVO3L1X4YFpK0gKdXgON7lS77Shd1nPWpP6tAK_Tqt0eGmCVAikhPow1s8FW5VZDUG20pEqTqo0rnlBT_6APexi5fbT47DFUGVA&oh=82244c04f45a2d0dd6da887dc7b95903&oe=5AFDF64E

Link Facebook

Replace juruselektro with your own Facebook ID and Jurus Anak Elektro with the name of your Facebook page

Some of this article Hopefully Helpful ....

Share this post