Cara Memasang Widget Facebook Fan Page Melayang di Blog

Cara Memasang Widget Facebook Fan Page Melayang di Blog - Pada kesempatan kali ini saya akan membagikan tips cara memasang widget facebook fan page melayang di blog yang terbaru, tahun ini. Beberapa member mengalami masalah untuk melakukan pemasangan fan page melayang dikarenakan facebook menghapus beberapa fitur, seperti HTML5 dan fitur lainnya. Dulunya membuat fanspage melayang sangatlah mudah dengan menggunakan HTML5 ini, namun sekarang sudah dihapuskan.

Walaupun begitu tiada cara yang tidak bisa dilakukan oleh blogger penasaran. dengan beberapa riset akhirnya saya bisa memahami kerja fitur SDK JavaScript dan IFrame yang tersisa untuk membuat fan page melayang.

Langkah-langkah Membuat Fan Page Melayang di Blog

Login terlebih dahulu ke akun Facebook Anda www.facebook.com
Kemudian buka halaman Developer Facebook
Masukan URL Fan Page Anda pada kolom URL Halaman Facebook yang sebelumnya sudah anda buat, atur lebar, tinggi serta tampilan Fan Page Anda inginkan seperti apa, kemudian klik "Dapatkan Kode/Get Code".
Kemudian pilih Tab IFrame, pilih id dan copy paste semua script yang ada pada kolom.
Login ke Blogger.com, kemudian pilih blog yang ingin Anda pasangkan widget facebook fan page.
Setelah itu silakan menuju Layout/Tata Letak > Tambahkan Gadget/Widget > HTML/Javascript > paste script fan page tadi kedalamnya lalu save, dan lihat hasilnya
Untuk membuat fans page tersebut melayang, silakan pilih Tab SDK JavaScript, cukup copy paste script yang ada pada kolom pertama dan kedua.

Paste script tadi ke dalam kode dibawah ini, hapus script berwarna merah kemudian paste-kan script tadi.<!-- FP melayang tombol close --!>

<style type='text/css'>
#skipzen-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:330px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#skipzen-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}

</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#skipzen-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='skipzen-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Jangan Sungkan,<blink> Untuk Like !!!</blink> </p>
<!-- Mulai --!>

<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.6&appId=774487709327804";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/Eventgamepsp/" data-tabs="timeline" data-width="300" data-height="200" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/Eventgamepsp/"><a href="https://www.facebook.com/Eventgamepsp/">Event Game PSP</a></blockquote></div></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://skipzen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.skipzen.org/2016/06/cara-memasang-widget-facebook-fans-page-melayang-di-blog.html">More Widget</a></p>
</div>

Hasil akhirnya akan terlihat seperti gambar berikut.