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"/>
<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;}
.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>
<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 ....