Widget Alternatif Facebook Like Box untuk Blog AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/07/2018

Berikut merupakan solusi bagi Anda yang menggunakan blog dengan AMP HTML  yang ingin memasang widget Facebook Fan Page Like untuk blog Anda namun masih bermasalah dengan "ini dan itu".

Widget ini sudah saya terapkan di blog saya Jurus Anak Elektro dengan Template AMP produksi KompiAjaib. Semoga artikel ini bisa membantu Anda untuk memasang widget custom Facebook Fan Page Like untuk blog AMP Anda.

AMP .JS

amp-facebook-like.js
Letakan kode amp-facebook-like.js berikut di atas kode </head>. AMP js ini yang menjadi kunci dari alternatif Widget Facebook Like Box ini, dengan widget ini kita dapat menampilkan widget like dan share facebook. Anda juga dapat mengganti tombol "Like" dengan Tombol "Rekomendasi".

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

amp-animation.js dan amp-position-observer
AMP .js ini berfungsi untuk menciptakan efek slide up pada cover facebook Anda agar terlihat lebih cantik. Letakan di atas kode </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

Letakan kode CSS berikut untuk widget Facebook Like Box di halaman blog AMP Anda.

#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

Letakan kode HTML berikut dengan menambahkan widget HTML/Javascript di Layout/Tata Letak di blog Anda.

<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>

Keterangan:

Cover
Ganti url berikut dengan url foto cover halaman facebook Anda.

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"

Profil
Ganti url berikut dengan url foto profil halaman facebook Anda.

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
Ganti juruselektro dengan ID Facebook Anda sendiri dan Jurus Anak Elektro dengan nama halaman Facebook Anda

Untuk Demo bisa mengunjungi link berikut.


Sekian artikel ini Semoga Bermanfaat....