Widget Alternatif Facebook Like Box Untuk Blog Amp

Berikut merupakan solusi bagi Anda yang memakai 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 aku terapkan di blog aku Jurus Anak Elektro dengan Template AMP produksi KompiAjaib. Semoga artikel ini sanggup membantu Anda untuk memasang widget custom Facebook Fan Page Like untuk blog AMP Anda.

AMP .JS

amp-facebook-like.js
Letakan arahan amp-facebook-like.js berikut di atas arahan </head>. AMP js ini yang menjadi kunci dari alternatif Widget Facebook Like Box ini, dengan widget ini kita sanggup menampilkan widget like dan share facebook. Anda juga sanggup 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 membuat efek slide up pada cover facebook Anda biar terlihat lebih cantik. Letakan di atas arahan </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 arahan 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 arahan 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="Widget Alternatif Facebook Like Box untuk Blog AMP Widget Alternatif Facebook Like Box untuk Blog AMP"></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 sanggup mengunjungi link berikut.

DEMO

Sekian artikel ini Semoga Bermanfaat....

Postingan ini dikirim oleh:

Muhammad Syahrul Fadli

Electro Blogger, Berbagi biar bermanfaat. Admin dari blog jurusanakelektro.blogspot.com.

Sumber https://www.kompiajaib.com/

Share this post