Komputer Seo - Mengapa saya beri judul "Cara Membuat FanpageFacebook Di Blog" karena, sekarang saya mau membagikan tutorial "Cara Membuat Fanpage Facebook Di Blog", langsung aja kita ke TKP.
-------------------------------------------------------------------------------------------------------------------------
1) Tutorial Pertama Cara Bikin Fanspage FB Dan Pasang Like Box Di Blog"
-------------------------------------------------------------------------------------------------------------------------
Pada bagian artikel ini, ada 2 bagian yang di bahas, yaitu :
1. Cara Bikin Fanpage
2. Cara Pasang Widget Like box di Blog
Cara Bikin Fanpage :
Ok deh, langsung aja dan untuk memulai jangan lupa login ke akun facebook masing-masing :
Untuk Cara Bikin / membuat Fanpage langsung saja masuk sini :http://www.facebook.com/pages/create.php Muncul tampilan seperti di bawah ini. Pilih salah satu yang paling menggambarkan tema bisnis atau group anda.
Selanjutnya, muncul tampilan form seperti di bawa ini : Upload profile picture dll, tapi proses ini bisa di skip dan bisa di updated belakangan
Ok, skip dulu dan lanjut proses sampai sistem menampilkan halaman penyelesaian akhir seperti tampilan screenshot di bawah ini :
Sampai disini, artinya pembuatan sebuah fanpage udah selesai dengan alamat URL :http://www.facebook.com/pages/nama fan page/kode fanpage atau
http://www.facebook.com/nama fan page
Proses berikutnya tinggal updated :
- Add profile picture
- Add Cover buat header
- Setting untuk admin
- Dan langkah berikutnya adalah menarik member atau orang lain untuk nge-like fan page kita
Salah satu cara efektif, mungkin dengan cara pasang Fanpage kita di Blog, untuk fitur ini di namakan LIKE BOX. Jadi pengunjung blog bisa melakukan "LIKE" dari Like Box yang di pasang di blog milik sobat.
Pasang widget Like Box di Blog :
Dari pilihan aplikasi yang tampil, pilih Like Box, seperti gambar berikut :
Selanjutnya sampai di form pengisian data seperti gambar di bawah :
Perhatikan gambar di atas :
- Facebook Page URL : Di isi dengan link fanpage sobat yg udah di bikin diatas
- Width & Height : adalah ukuran lebar dan tinggi, bisa di atur-atur sesuai dengan ukuran sidebar blog
- Color Scheme : Untuk menyesuaikan dengan backgroung blog milik sobat. Kalau backgroundnya terang, sebaiknya pilih light saja
- Selebihnya bisa di coba-coba sendiri, silahkan di test dengan melihat hasil preview di sampingnya.
- Langkah terakhir, Klik Get Code. Kode inilah yang nanti di pasang di widget blog
Gimana Cara mengambil Code-nya kemudian di pasang di Blog?
Dari membaca komentar - komentar dari pengunjung, rupanya masih banyak kendala yah?, sebetulnya cukup mudah. Pada saat klik Get Code, kita di hadapkan pada pilihan mau format :
1. HTML5
2. XFBML
3. IFRAME
4. URL
Dari 4 pilihan itu kebanyakan orang ambil HTML5 atau IFRAME, Namun saya lebih suka memakai kode HTML5. Kenapa?, karena script yang di bungkus IFRAME kurang bagus buat SEO. Kalau blog kita di test di http://chkme.com kode IFRAME akan mengurangi penilaian SEO blog milik kita:). Untuk itu pakai yg pilihan Tab HTML5 saja. Perhatikan gambar di bawah :
2 bagian script di atas jadikan satu dan Copas ke Widget atau bagian blog yg ingin di tampilkan FP tersebut. Kalau ingin tampil di Sidebar, copas apa adanya saja seperti script asli pada saat kita Get Code.
-------------------------------------------------------------------------------------------------------------------------
2) Tutorial Kedua "Cara Bikin Fanspage Facebook Melayang Di Blog"
-------------------------------------------------------------------------------------------------------------------------
Jika anda ingin memasang facebook fan page anda melayang di blog, saudara dapat mengikuti langkah-langkah di bawah ini. Namun jika anda ingin memasang facebook fan page yang standar atau yang lazim di gunakan oleh banyak orang. Anda bisa membaca artikel saya sebelumnya
Di sini saya akan memberikan dua script fan page melayang yang berbeda, jadi anda hanya harus memilih salah satu script saja untuk dipasang di blog anda. dan untuk melihat hasilnya anda bisa mencoba scriptnya satu persatu.
- Login dengan akun blogger saudara
- Masuk ke menu TATA LETAK
- Klik Tambah Gadget => HTML/Javascript
- Silahkan masukan salah satu script di bawah ini
Script Fan Page Melayang Yang Pertama . . .
<style type="text/css">
#topbar{position:absolute; padding-left:260px; background-color: transparancy; width: 300px;
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 = 30 //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.left=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.stayTopLeft=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("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
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/AVvXsEhGinGLxB9FYACgHght-WlA04oP-Qo7XARq3iX-vgpkvdMEjFD-1t3LkxGSfsgtiuzAHupxDP27XZJ6Zp1-5bHOYHKOYhR6pfTxdQ66OTvCFKxnhReCkZtt3hoeZkG92eIN5SIWa548qhxr/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="
https://www.facebook.com/pages/Blognya-Ilmu/147008725448902" width="250" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>
</div>
</center>
</div>
<style type="text/css">
#topbar{position:absolute;padding-left:-100px;background-color: transparancy;width: 300px;visibility: hidden;z-index: 200;}
</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 = 25 //set x offset of bar in pixels
var startY = 25 //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.left=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.stayTopLeft=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("stayTopLeft()", 10);}
ftlObj = ml("topbar");
stayTopLeft();}
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/AVvXsEhGinGLxB9FYACgHght-WlA04oP-Qo7XARq3iX-vgpkvdMEjFD-1t3LkxGSfsgtiuzAHupxDP27XZJ6Zp1-5bHOYHKOYhR6pfTxdQ66OTvCFKxnhReCkZtt3hoeZkG92eIN5SIWa548qhxr/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlognya-Ilmu%2F147008725448902%3Fref%3Dhl&width=300&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>
</div>
</center>
</div>
- Ganti yang berwarana merah dengan url fan page saudara.
- Kode berwarna Biru, ganti dengan script fan page facebook saudara.
Nama Saya Firmansyah Nuralif Rohman, Saya Selaku Pembuat Dan Pengembang Blog Ini Mengucapkan Trimakasih telah Berkunjung Ke Blog Yang Sederhana Ini
