Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Cara Membuat dan Pasang Widget Fans Page Facebook Melayang


Facebook logoTentu Anda sudah mempunyai fans page Facebook - halaman  khusus Faceebook yang dibuat bagi penggemar atau fans sebuah blog atau website. Untuk membuat dan pasang widget fans page facebook di blog, sebelumnya Anda harus sudah mempunyai halaman page fans di Akun Facebook atau membuatnya dahulu di akun facebook Anda dan catat alamat url fans page facebook tersebut.

Ada banyak cara memasang widget sosial media ini di blog, ada yang statis (diam), melayang (float), hiding (tersembunyi) atau yang lainnya. Secra default bila Anda membuat widget fans page Facebook di blog akan terpasang secara statis baik itu berada di sidebar atau footer.

Tutorial Blogger proBlogiz kali ini akan sharing tip dan trik desain blog Cara Pasang Widget Fans Page Facebook Melayang atau Floating Keuntungan Widget melayang (float) akan memberi tampilan blog menjadi lebih profesional dan menghemat ruang halaman page pastinya.
Pada kali ini adalah widget float right (melayang di sebelah kanan)- cukup mudah, Anda cukup ikuti panduan  tip dan trik berikut ini.

Langkah Pertama

Tambahkan kode script jquery dibawah ini tepat diatas </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/>
  • caranya masuk ke dasbor Blogger >>> Edit Template >>> edit HTML
  • tekan F3 untuk pencarian >>> cari kode </head>
  • letakkan kode script jquery tepat diatas </head>
  • Save Template
Langkah Kedua

Buka halaman Tata Letak
Klik tambah gadget >>> pilih tambah HTML/Javascript
copy dan pastekan kode script dibawah ini :
<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css" scoped > .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVqiG0KkPwjhu1D5qQHnVL4Rbbs5fVFtcpMpoiLlIW5pIgvpPtLeMEYKHu2mbZx0Xwa80qiZI2A0IHxf8S8L6MNb7Fw7vOGBp2iCb2IBW53MxF-9zUj5elWG4hK4jJy5kMLPhvGOZ-LE/s1600/fb1.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style> <div class="w2bslikebox"> <div> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FProBlogiz%2F146818852122783&amp;width=250&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" style="border:none;overflow:hidden; width:250px; height:258px;" ></iframe><span><a href="http://problogiz.blogspot.com/2012/09/pasang-widget-fans-page-facebook.html"><b>Get Widget</b></a></span> </div> </div>

*Update 16 Januari 2013 : gantilah kode yang berwarna biru diatas dengan kode iFrame Facebook Fans Page Anda.

Cara mendapatkan kode iFrame Facebook Fans Page :
1. Buka http://developers.facebook.com/docs/plugins/
2. Pilih Like Box.
3. Masukan url facebook page .
4. Atur width="250" height="258"
5. Jangan di check Show Stream dan Show Header.
6. Klik pada Get code.
7. Ada pilihan berikut: HTML5,XFBML,IFRAME and URL.
8. Pilih IFRAME.
9. Copy kode dan ganti kode yang berwarna biru dengan kode iFrame Anda tersebut.
Contoh url fans page facebook blog ini : http://www.facebook.com/pages/ProBlogiz/146818852122783 

Sedangkan untuk gambar logo facebooknya seperti "https://sites.google.com/site/problogiz/home/fb6.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri atau kalau berminat saya berikan contoh  logo facebook yang bisa Anda gunakan :

Klik DEMO

logo facebook
logo fb 1
logo facebook

logo fb 2
logo facebook
logo fb 3

logo fb 4
logo fb 5
logo fb 6
(transparant)



Alamat url untuk cotoh gambar logo facebook diatas :
  • url logo fb 1 = https://sites.google.com/site/problogiz/home/fb.png
  • url logo fb 2 = https://sites.google.com/site/problogiz/home/facebook.png
  • url logo fb 3 = https://sites.google.com/site/problogiz/home/fb3.png
  • url logo fb 4 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwa9UHv99IhgUFmNN1ctpfbaOjJOVs20mydJu5nZzMB1klxXNLUQs0EGVlyWcRPiFMptiXRUskaMgZTryoKvyOk8SHt7igHDtQ7JobE7haVK1KvIf5EncXmMqgnmGUBomuPsrRYtOVBrH/s1600/facebook-icon.png
*tip : usahakan upload sendiri gambarnya, untuk lebih aman

Anda bisa pilih salah satu contoh logo diatas dan letakkan pada kode script diatas kecuali Anda ingin memakai koleksi  logo facebook sendiri.

Setelah langkah diatas selesai maka simpan dan Anda bisa melihat  Widget Fans Page Facebook Melayang kreasi Anda sendiri...

Bagaiman tertarik untuk membuatnya di blog Anda?
Semoga tip dan trik Pasang Widget Fans Page Facebook Melayang ini bisa membantu dan bermanfaat bagi sobat....

Have nice day....


Catatan :
Jika Anda mengalami masalah pada Widget Fans Page Facebook, umumnya seperti message "Login to see this content" saat Anda log out, solusi untuk mengatasinya >>>


Artikel Terkait Lainnya:
Click here for comments

36 komentar

Terima kasih sharenya sob...bermanfaat sekali utk saya.

REPLY

Kok pas di liat kok ada tulisan " Login to see this content " ??

REPLY

url fans page facebook-nya udah diganti belom mas?:)

REPLY

Sudah di ganti sama url fb saya tapi ada tulisan " Login to see this content " ?????

REPLY

Sudah pas masih login FB bisa liat , pas sudh log out ada tulisan " Login to see this content "

REPLY

punyaku saya ko ga da masalah, bisa minta url blognya?

REPLY

coba juga cek setting fb page Anda, cek show face, privacy
public visibilty, coba cek lg di http://developers.facebook.com/docs/reference/plugins/like-box/
permasalahanya ada di FB page anda di settingnya

REPLY

atau Anda masuk ke fb page, sunting halaman > kelola izin > atur Visibilitas Halaman dan Batasan negara (jangan di cek), Batasan Usia atur diatas 13 thn
atur kiriman kesemua orang
moga bisa bantu

REPLY

Terimakasih banyak atas trik nya,,,,, salam kenal

REPLY

kok punya ane gak bisa keluar gan? cuma berupa gambar!
www.cyber-fantastic.blogspot.com

REPLY

setelah saya cek diblognya, ga ada masalah ko mas widgetnya

REPLY

Thank gan !! sekarang ane udah bisa gunakan Fan page melayang,, liat aja http://iqbalgonzaga.blogspot.com/

REPLY

siip....udah liat mas
thanks udah mampir di blog ini:)

REPLY

udah saya terapkan di blog saya kang Hriza, mantabb..hehe. Trim's..:)

REPLY

tertarik banget,,, makasih udah bagi2 ilmunya

REPLY

hehe..thanks mas hajir:)
welcome

REPLY

Met siang kang hriza, mau tanya gimana cara posting logo fb 1,2,3 diatas spt postingan anda? saya agak kesulitan mempostingkannya. Mohon di share, maklum lagi tahap belajar. Terima kasih..

REPLY

Kunjungan Rutin Sobat,,,,...

Jangan Lupa Kunjungan Baliknya....

REPLY

itu saya upload dulu di Google Site kang:)
Google Site gratis disediakan untuk share file/data, bisa menyimpan foto,video,document dll. anggap disini anda punya situs pribadi untuk store data2 anda, so lebih mudah mengontrolnya dan cepat diaksesnya (user Google Apps bisa nyimpen sampai 10Gb)
knjungi ajag kang di sites.google.com

REPLY

siip sob:)
ke tkp segera>>>

REPLY

Punya Aku Kok Cuma Gambarnya Yang Keluar Gan

REPLY

Hallo gan, ane mw tanya...
ane dh cobain artikel agan, cuma kok gambar doang,...
jadi sekarang ane balikin pake FB Fans Page yg biasa dech...

diharapkan kunjungan baliknya 'n kritik beserta saran.. maklum baru...

join site nya jg

REPLY

@Adam Sasuke, @Nickal Rosadi :
kode telah diupdate, bisa dicoba lagi:)
thanks

REPLY

Kunjungan rutin kang hrzia. waah...tambah keren aja nih kang tampilan widget facebook fans page nya. Trim's infonya..

REPLY

ini baru keren gan..
terimakasih dah mw update..
sukses selalu

join back at my blog...

REPLY

punya ku gak mau juga gan, cuman ada gambar facebook nya doank gak bisa keluar faga fb nya

REPLY

nice tutorial!
mampir kesini gan >> http://ardyutomo25.blogspot.com/2012/12/kumpulan-cerita-nabi.html

REPLY

saya coba,.. terima kasih

REPLY

Mantapp.
Kunjungan Baliknya Sob

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|