Memasang Widget Fanspage Facebook Melayang Mini, Ringan dan Responsive

Memasang widget fanspage facebook melayang ringan dan reponsive - Widget Fanspage Facebook biasanya dipasang di sidebar blog. Namun ada pula yang memasangnya dengan teknik popup di tengah halaman.

Widget fanpage facebook berikut sangat ringan terhadap loading blog. Sekalipun menggunakan kode Javascript. Widget ini akan tampil di pojok kanan bawah dengan animasi SlideUp.

Tinggi dan lebar widget dibuat otomatis. Hanya perlu menyesuaikan jarak widget dengan posisi bawah layar (margin-bottom). Kalau kamu memasang sticky ads denagn ukuran 728 x 90 maka margin-bottom diatur menjadi 130px. Tapi jika tidak ada iklan hamparan di halaman bawah maka margin-bottom di-sett 0px. Kalau kamu menggunakan tombol back to top maka atur margin-bottom nya supaya posisi widget di atas tombol back to top.

Wdiget ini sangat ringan. Setelah saya pasang, saya rasa ini lebih baik daripada memasangnya di sidebar. Jika widget fanspage facebook di pasang di sidebar, kadang tidak muncul. Jadi cukup memakan loading blog ya. Mengapa widget fanspage facebook ini ringan? Hal lainnya karena CSS widget di bawah ini hanya menampilkan nama halaman, foto profil fanspage dan tombol menyukai saja.

Selain itu, widget fanspage facebook berikut dilengkapi dengan tombol Close (x) yang responsive. Begitu klik, dah langsung hilang itu widget. Jelas widget ini tidak akan mengganggu kenyamanan pengguna

Wigdget fanspage facebook ini akan tampil di semua halaman situs baik di halaman beranda (homepage), halaman artikel (item), laman (statis), dan error. Kalau kamu ingin membatasi kamu bisa menambahkan tag kondisional sebelum kode CSS nya.

Nah, mulai saja yuk memasang widget fanspage facebooknya. Demonya bisa lihat langsung di situs tercinta ini (selama masih dipakai).

1. Salin kode CSS berikut di atas /head.

Kode CSS Widget Fanspage Facebook

<!-- start css-->
<style type='text/css'>
#fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:210;float:left;height:auto;margin-bottom:130px;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
@-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
</style>
<!--- end css-->

Sesuaikan bagian yang diwarnai dengan posisi yang kamu mau. Kebetulan admin ada iklan sticky di bawah dengan tinggi 90px jadi posisinya admin naikkan lagi di atas iklan. Kamu bisa memberi nilai 0px jika tidak ada iklan atau widget melayang serupa di bawah.

2. Salin kode HTML dan Javascript berikut di atas /body.

Kode HTML dan JAVASCRIPT Widget Fanspage Facebook

<!-- start js widget-->
<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times'/></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/supervba' data-show-faces='true' data-stream='false' data-width='230'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fsupervba&amp;width=230&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:230px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>
<!-- end js widget-->

Ganti supervba dengan nama fanspage kamu.

3. Simpan template.

Jika anda mengalami masalah seperti tombol Close tidak muncul coba tambahkan kode berikut di atas kode /body.

Kode HTML Widget Fanspage Facebook

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>

Pemasangan widget fanspage facebook sudah selesai. Coba cek hasilnya di blog kamu guys.

Demikian cara memasang widget fanspage facebook melayang di blog. Semoga bermanfaat.

Update Artikel: Agustus 2019

Referensi:
1. https://putuguna.com/2017/08/membuat-widget-melayang-pojok-kanan-blog-dengan-tombol-close.html