Cara Membuat Like Button Fanpage Facebook dengan Efek Slide di Blog

Kali ini saya akan membagikan widget Like Button / Like Box Facebook efek slide di blog dengan CSS Keyframe. Karena ada teman blogger yang bertanya waktu lalu, bagaimana cara bikin  Fanpage Facebook seperti di blognya agan. Oleh karena itu saya akan membagikannya.

Sebenarnya ini widget ini biasa karena hanya di tambah efek css keyframe yang menjadi efek slide animasi, anda juga dapat mengatur arah slide yang akan ditampilkan seperti dari atas, kiri, bawah, atau kanan, dan waktu yang diperlukan. Dengan menambah efek ini dapat menarik dan meningkatkan traffik pengunjung untuk mensukai fanpage facebook anda. Tapi jangan kuatir widget ini dibuat dengan css keyframe sehingga membuat lebih ringan daripada javascript.

facebook fanpage slide efek

Cara Membuat Fanpage Facebook dengan Efek Slide di Blog

1. Anda harus mempunyai Fanpage Facebook

2. Klik Tata Letak >> Tambah Gadget/Widget >> Html/Javascript

3. Masukan kode di bawah ini (pilih salah satu, sesuai selera)

Dari kiri ke kanan

<style> /*Fixed Facebook Like Box Zuamsyah*/ .fb-btn-zuamsyah {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} .fb-btn-zuamsyah {padding:5px ;color:#fff;font-size:120%;} .fb-btn-zuamsyah a:link, .fb-btn-zuamsyah a:visited {color:#ffcc00;} .fb-btn-zuamsyah a:hover {color:#fff;} .fb-btn-zuamsyah2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} .fb-btn-zuamsyah2 {padding:3px ;color:#fff;font-size:120%;} @-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-zuamsyah"> <div class="fb-btn-zuamsyah2"> <div class="fb-page" data-href="https://www.facebook.com/zuamsyah" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/zuamsyah"><a href="https://www.facebook.com/zuamsyah">zuamsyah.id</a></blockquote></div></div> </div> </div>

Dari kanan ke kiri

<style> /*Fixed Facebook Like Box Zuamsyah*/ .fb-btn-zuamsyah {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;} .fb-btn-zuamsyah {padding:5px ;color:#fff;font-size:120%;} .fb-btn-zuamsyah a:link, .fb-btn-zuamsyah a:visited {color:#ffcc00;} .fb-btn-zuamsyah a:hover {color:#fff;} .fb-btn-zuamsyah2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s} .fb-btn-zuamsyah2 {padding:3px ;color:#fff;font-size:120%;} @-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kanan{ from{transform:translate(30000px, 0px)} to{transform:translate(0px,0px)} } @keyframes kanan{ from{transform:translate(30000px, 0px)} to{transform:translate(0px,0px)} } </style> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-zuamsyah"> <div class="fb-btn-zuamsyah2"> <div class="fb-page" data-href="https://www.facebook.com/zuamsyah" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/zuamsyah"><a href="https://www.facebook.com/zuamsyah">zuamsyah.id</a></blockquote></div></div> </div> </div>

Jika anda ingin menambahkan tombol close dalam widget tersebut berikut kodenya.

Dari Kanan ke Kiri dengan tombol close

<style> #close { float:right; display:inline-block; padding:1px 6px; background:#A0A0A0; cursor:pointer; } /*Fixed Facebook Like Box Zuamsyah*/ .fb-btn-zuamsyah {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;} .fb-btn-zuamsyah {padding:5px ;color:#fff;font-size:120%;} .fb-btn-zuamsyah a:link, .fb-btn-zuamsyah a:visited {color:#ffcc00;} .fb-btn-zuamsyah a:hover {color:#fff;} .fb-btn-zuamsyah2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s} .fb-btn-zuamsyah2 {padding:3px ;color:#fff;font-size:120%;} @-webkit-keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @keyframes atas{ from{transform:translate(0px, -2000px)} to{transform:translate(0px,0px)} } @-webkit-keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } @keyframes kiri{ from{transform:translate(-30000px, 0px);} to{transform:translate(0px,0px);} } </style> <script> window.onload = function(){ document.getElementById('close').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; }; </script><div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-btn-zuamsyah"><span id='close'>x</span> <div class="fb-btn-zuamsyah2"> <div class="fb-page" data-href="https://www.facebook.com/zuamsyah" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/zuamsyah"><a href="https://www.facebook.com/zuamsyah">zuamsyah.id</a></blockquote> </div></div> </div> </div>

4. Hapus kode warna biru dengan url link facebook fanpage anda.
5. Simpan

DEMO

Baca Juga!

Cara Membuat Facebook Fanspage Popup muncul terus di blog

Like Box Fanpage Facebook ini dapat anda pasang di blogger atau cms lain yang support dengan script tersebut.