Cara Memasang Fan Page Facebook Di Blogspot

Memasang fan page facebook pada blog/website kita memang memberikan suasana yang beda terhadap isi dari konten blog/website. Kebanyakan para blogger memasang widget ini sebagai tambahan ornamen web atau sebagai media promosi untuk memperkenalkan sebuah bisnisnya. Dengan sedikit kreatif oleh para tangan-tangan blogger merubah bentuk asli dari widget tersebut menjadi sedikit lebih menarik.

Menggunakan fan page facebook memang sudah terbukti bahwa memiliki keistimewaan tersendiri. Pada widget ini bisa menampung lebih banyak dari akun facebook kita sendiri, bisa sampai beribu-ribu penggemar/like. Mereka juga memanfaatkan widget ini agar penggemarnya like (suka) atau share artikel-artikel yang ada didalam web tersebut supaya blog itu sendiri lebih terkenal dan bertambahnya pengunjung blog.

Maka dari itulah semakin bertambah para blogger menggunakan widget ini.Oke tidak usah basa-basi lagi, kita langsung saja ke topik pembicaraan yaitu memasang widget fan page facebook di blogspot.

1. Masuk Akun Facebook Developers
Kunjungi disini >> Facebook Developers

2. Isikan yang ada di form tersebut.
Isikan sesuai dengan keinginan anda seperti ukuran lebar ,tinggi dan URL fanpage. Seperti gambar berikut .

Isi form diatas jika sudah tekan "Get Code" dibawah form tersebut.

3. Pilih Iframe
Untuk mendapatkan code widget. seperti gambar berikut.

 

4. Copy Code

Copy semua coding diatas, dan paste di blogspot anda. Jadi deh.

Jika anda tidak mau ribet seperti diatas, cukup mudah saja tinggal copy paste saja. Hasilnya sudah melayang untuk code di bawah ini.

<style type='text/css'>

/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Kalau Bermanfaat,Silahkan Di LIKE Dulu.!!</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FRumah-Software%2F442412252546220%3Fref%3Dhl&amp;width=320&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=ryanmantab77&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

• Untuk tulisan warna merah : Gantikan dengan code fanpage anda
• Untuk tulisan warna biru : Gantikan dengan akun twitter anda

Maka untuk hasilnya akan seperti ini :

 

Oke mungkin itu saja yang bisa saya berikan, semoga bisa membantu anda untuk mendesain blogspot anda. Jangan lupa tinggalkan komentar, Terimakasih sudah mampir dan membaca artikel saya.

Cara Memasang Fan Page Facebook Di Blogspot 2014-03-23T09:47:00-07:00 Rating: 4.5 Diposkan Oleh: Blog Gado-Gado