Cara Bikin Fanpage Facebook Di Blog

Firman Blog - 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 :

1. Add profile picture
2. Add Cover buat header
3. Setting untuk admin
4. 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 :

Pasang widget Like Box di blog :

Untuk membuat widget like box sama mudahnya dengan bikin FP Facebook, silahkan sobat klik link ini : http://developers.facebook.com/docs/plugins

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 :

1. Facebook Page URL : Di isi dengan link fanpage sobat yg udah di bikin diatas
2. Width & Height : adalah ukuran lebar dan tinggi, bisa di atur-atur sesuai dengan ukuran sidebar blog
3. Color Scheme : Untuk menyesuaikan dengan backgroung blog milik sobat. Kalau backgroundnya terang, sebaiknya pilih light saja
4. Selebihnya bisa di coba-coba sendiri, silahkan di test dengan melihat hasil preview di sampingnya.
5. 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/AVvXsEiVJFbOR2z5zWOK4CngSPlQ939bqwh5wm-kZc5qkeJVucT1DD3BpJuTvCWR18fZnc8PKrF70F0OzW8kn-PeIIGHm7XwtOR4jI-7AUq9B1hHDcXvNJYHxlg4YVGBqFMQ8admN-cvdBK4WCfB/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>

Script Fan Page Melayang Yang Kedua . . . 

 <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/AVvXsEiVJFbOR2z5zWOK4CngSPlQ939bqwh5wm-kZc5qkeJVucT1DD3BpJuTvCWR18fZnc8PKrF70F0OzW8kn-PeIIGHm7XwtOR4jI-7AUq9B1hHDcXvNJYHxlg4YVGBqFMQ8admN-cvdBK4WCfB/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&amp;width=300&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>
        </div>
        </center>
        </div>

Catatan :

• Ganti yang berwarana merah dengan url fan page saudara.
• Kode berwarna Biru, ganti dengan script fan page facebook saudara.

Trimakasih Telah Membaca "Cara Bikin Fanpage Facebook Di Blog"