Fans page (auto hide)

Cara membuat facebook / Fans page, Like Box auto hide
Fans page bertujuan untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page / Like Box. Facebook page sudah sangat lazim digunakan di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan.

Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.

Cara Membuat Fans Page Facebook di Blog/Website
1. Langkah pertama Sobat login FACEBOOK
2. Kemudian buka halaman ini:  Facebook Page
3. Klik opsi Merek atau Produk

Rex Screen Shoot:

4. Opsi no.1 "website" dan No.2 "nama Page" sesuai dengan yang 
   diinginkan. centang "Persetujuan" dan klik "Mulai"

Rex Screen Shoot:

5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang 
   telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai 
   petunjuk, misalnya mengupload foto/gambar untuk Facebook 
   Page,mengedit informasi, dan lain sebagainya, atau langsung 
   membuat Facebook Like Box yang nantinya dapat dipasang di 
   blog/website.

Rex Screen Shoot:

Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/ReXRooM/484669718232930

Rex Screen Shoot:

6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" 
   atau bisa juga buka halaman berikut: Like Box

Rex Screen Shoot:

7. Selanjutnya, isikan spesifikasi seperti gambar berikut:

   Keterangan gambar (no. 6)

• Facebook Page url: paste url Facebook Page yang di copy tadi
• Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.
• Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.
• Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.
• Show Faces: Centang untuk menampilkan foto profil likers.
• Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.
• Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.
• Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".
• Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. 
   Kemudian akan muncul pop-up window yang menampilkan 3 jenis 
   kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy 
   kodenya. (Untuk Blogger, disarankan pilih HTML 5).

Rex Screen Shoot:

Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.



Cara pemasangan like Box pada Blog:

Buka Dasbor > Tata Letak > Klik Tambah gadget > HTML/JavaScript.
Masukkan kode yang telah dicopy ke dalam kotak kode
HTML/JavaScript. 
Save/Simpan

.
Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.



Cara pemasangan Like Box Auto Hide
Buka Dasbor > Template > Edit HTML > Expand Template Widget
Search </head> dan pastekan di bawahnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/></a> Balik ke Dasbor > Tata Letak > Tambah gadget > HTML/Javasctipt Dan Paste :  /span>

<script src="http://infonetmu.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script><div id="fbslidebox" style="position: fixed; width: 330px; overflow: hidden; bottom: 20px; right: 10px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfIfPbf_9XuQIBQXAV3L43ozKZqEU7vQMNUL-Rsg5MEnyT-krYgxYH6kELx9VAUzp_wmSdFPd81jfhCQDC73efG7jDv2h10KAf1EUhNoHj01HOTjZroOCDR2Um6JCZvuOknlW1TyBb66M/s0/bo-bg-html.gif&quot;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(17, 17, 17); display: block;"> <div style="width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;"> <a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="http://www.blogger.com/post-create.g?blogID=4155701203275692831#">Exit</a> <strong style="color: rgb(102, 173, 61);">Jangan Lupa Klik Like Ya</strong> <div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/pages/ReXRooM/484669718232930?ref=stream" data-width="300" data-height="335" data-show-faces="true" data-border-color="#000" data-stream="false" data-header="false"></div> </div></div>

Keterangan :  
Warna merah adalah Lebar box
Warna biru adalah Facebook fan page   
Save dan check it out



 

Related Post: