Cara Pasang Widget Facebook Fan Page Like Box di Blog

Widget Facebook Fan Page Like Box, Facebook Fan Page adalah sebuah halaman khusus facebook yang memberikan informasi beragam sesuai dengan keinginan pengelola (admin) fan page, mulai dari info produk, event, layanan publik, artis, komunitas dan lainnya. Facebook Fan Page Like Box bisa membantu follower serta pengunjung untuk mendapatkan informasi/artikel terbaru di Facebooknya mengenai site Anda hanya dengan mengklik tombol 'Like'. Hal ini lah yang dimanfaatkan oleh kalangan tertentu, contohnya pengelola toko online untuk memberikan informasi atau event kepada pelangganya melalui facebook. Dengan demikian penyebaran informasi akan lebih cepat diterima oleh banyak orang.

Manfaat Facebook Fan Page bagi blog Anda adalah untuk mengumpulkan pengunjung sebanyak-banyaknya. Sedangkan manfaat bagi Anda yang memiliki toko online adalah mengirim pesan-pesan marketing atau mempromosikan produk Anda untuk menghasilkan penjualan. Dengan semakin banyaknya jumlah penggemar Facebook Fan Page Anda, maka akan semakin besar pula blog Anda dikenal orang dan makin besar juga peluang Anda mendapatkan uang.

Dari penjelasan Facebook Fan Page di atas rasanya perlu bagi kita untuk segera membuat widgetnya. Langsung saja yuks kita ke topik utama, rasanya sudah tidak perlu lagi berlama-lama menjelaskan tentang Facebook Fan Page. Sebelum Anda memasang widget Facebook Fan Page Like Box ini di blog kesayangan Anda, terlebih dahulu Anda harus membuat Facebook Fan Page. Bagi Anda yang tidak tahu caranya Anda bisa klik link berikut Cara Membuat Fans Page di Facebook.

Cara Pasang Facebook Fan Page Like Box di Blog

1. Login dulu ke Facebook Anda www.facebook.com

2. Masuk ke Halaman Developer Facebook. 

3. Pada kolom "Facebook Page URL" silahkan masukkan URL Facebook Fan Page yang telah Anda buat, atur ukuran tinggi dan lebarnya, warna dan lain-lain. Setelah itu, silahkan klik tombol "Get Code"

4. Silahkan pilih tulisan "IFRAME" dan kemudian copas seluruh script yang ada dalam kotak.

5. Sebelum scriptnya di Paste/Tempel, silahkan login dahulu ke www.blogger.com

6. Dashboard > Layout > tambahkan Widget/Gadget > HTML/JavaScript > Kemudian pastekan seluruh script yang anda copas tadi.

7. Klik Save dan lihat hasilnya.

8. Untuk pemasangan di Wordpress, caranya kurang lebih sama, Pilih Menu Appearance > Widget > Widget Text > Add Widget > Paste seluruh script yang anda copas tadi > klik Save > lihat hasilnya

 

Bagi Anda yang tidak suka penempatan Facebook Fan Page Like Box di sebelah kanan template, Anda bisa memasangnya secara melayang di tengah home page. Anda cukup mengcopykan script dibawah ini dan memasangkannya seperti langkah 1 sd 9 di atas. Hanya saja pada langkah ke-3 script yang Anda copy, bukan script IFRAME tetapi HTML 5 yang kolom kedua.

COPAS CODE DIBAWAH INI......

<!-- FB melayang tombol close --!>

<style type='text/css'>

#kotak-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;}

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

$('#kotak-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='kotak-facebook'>

<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>

<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/galeripos" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></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://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>

</div>
Code HTML 5 yang berwarna merah tersebut, Anda ganti dengan Code Facebook Fan Page milik Anda.
Penampakannya seperti Facebook Fan Page Like Box Galeripos dibawah ini ;

Demikian informasi yang bisa saya bagikan untuk Anda tentang Cara Pasang Widget Facebook Fan Page Like Box di Blog. Mudah-mudahan bisa bermanfaat untuk anda sekalian. Terimakasih sudah berkunjung di blog saya.

 

Tweet