Cara menambahkan Widget Fan like di blog

      Menambahkan Facebook sebagai Widget di blog kita adalah salah satu nilai Plus yang di miliki oleh blog kita, karena selain blog kita secara langsung dapat berhubungan dengan Visitor yaitu dengan Jejaring sosial tadi. Blog kita juga dapa dengan mudah diingat oleh Visitor, karena kemungkina Visitor tidak hanya sekali mengunjungi blog kita dan apa lagi dengan selalu UP TO DATE postingan dengan mudah Visitor mencari informasi di blog kita.

Baiklah , sobat kali ini saya akan sharing kepada anda semuanya bagaimana cara membuat atau menambahkan Widget Fan atau Like di blog.

Sebelunya saya mohon maaf sobat kalau sobat mengetik ulang code sebanyak ini maka itu akan sangat memberatkan sobat.

Tetapi dengan Zaman yang Modern ini sobat jangan khawatir sobat dapat mengunjungi blog saya yang sudah tersedia di sana code seperti ini dan kemudaian tinggal sobat Copy Paste saja.

www.tutorialkamu.blogspot.com

Berikut adalah beberapa panduanya:

Sebelumnya saya mohon maaf saya tidak bia menjelaskaan begitu detail namun saya akan berbagi kepada sobat tentang tahapan-tahapanya saja.

1.      Tetunya, sobat sudah memiliki latar belakang atau judul dari blog sobat misalkan tema music, hiburan, dll. Maka, dari judul blog sobat atau judul lain yang nantinya di jadikan FAN bagi jutaan Visitor.

2.      Maaf sebelumnya sobat harus mengunjugi Page Fb di http://www.facebook.com/pages/create  atau cara yang lebih mudah sobat bisa cari di penaturan kemudian klik tambah halaman.

3.      Kalau sudah ketemu halaman seperti di bawah ini maka sobat hanya perlu membuat  halaman yang sesuai dengan tema blog sobat saja.

Catatan : isi dengan lengkap data-data yang sesuai dengan blog sobat.

1.      Kemudian buka halam baru  http://developers.facebook.com/docs/plugins/ maka akan muncul halam seperti di bawah ini. Dan silakan pilih dengan tampilan yang sobat inginkan.

 

Setelah sobat pilih dan sobat kilik maka akan muncul halaman seperti di bawah ini.

Isi dengan data-data yang sesuai sobat inginkan ukuran tinggi dan lebar.

Perhatikan tanda panah merah URL yang di maksud adalah URL dari Fan Fb sobat seperti berikut ini. Kemudian Copy dan Pastekan di kolom yang terdapat tanda panah merah di bawah.

Nah, sobat maka akan muncul tampilan seperti ini. Dan kemudian blok dan Copy code HTML yang berada di bawah.

Dan kemudian sobat Pastekad di code bawah ini, tapi satu hal yang harus diketahui bersama, dalam meletakan code HTML kita harus berhati-hati jangan sampai salah letak, karena kalau kita salah letak maka hasinya akan berbeda dengan apa yang kita inginkan.

 

<style type="text/css">
#topbar{
position:absolute;
padding-left:1px;
background-color: transparancy;
width: 238px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 10);
}
ftlObj = ml("topbar");
stayTopright();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)

window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMax4_hAd2Wy2MnQ4hEstBWb6EVO9JFDS8tJISSRUcm9bTQZ5_Jres-0K33tPMjpKyT7wWPu8oGoQvy-ljP8zVWmH6Cw3bafCQgmIu6F41-_PyjBKR0vmzQ9_lBCPiX6fdCjw1OdhMtuM/s1600/closanku.png" /></a></div>
<center>
<div style="background: #fff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FPundiOnline&amp;width=238&amp;height=360&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:238px; height:360px;" allowtransparency="true"></iframe>
</div>
</center>
</div>

Keterangan: Ganti kode sript iframe warna biru  diatas dengan kode iframe fans page group sobat.
 Simpan perubahan dan lihat hasilnya. Cukup menarik buakn? Selamat mencoba.