Memasang Widget Facebook di Blog Wordpress...

Mengamati beberapa blog teman blogger,  saya tertarik dengan adanya widget facebook yang tercantum di blog tersebut.  Sayapun mencoba mencari kode HTMLnya di akun facebook saya.  Ternyata kode HTMLnya bisa didapat dengan cara :

-          Klik tab Profil, lalu klik Buat Lencana Profil (kebetulan facebook saya menggunakan bahasa Indonesia)





-          Setelah itu muncul gambar profil kita, untuk memilih model gambar, klik Sunting Lencana Ini kemudian pilih gambar yang dipilih apakah tegak, mendatar atau 2 kolom.  Saya memilih yang 2 kolom.

-          Salin kode HTML dikotak yang ada dengan klik mouse kanan lalu pilih copy.

Kode HTML  kemudian saya letakkan di text widget blog saya.  Setelah text HTML disimpan kemudian saya lihat Home blog.  Ternyata tidak ada gambar seperti widget facebook seperti di blog lainnya.



Saya kemudian mencari info di google, sampai akhirnya ketemu info di blog mas Bambang.  Ternyata khusus blog wordpress sudah tidak bisa menampilkan gambar widget facebook.   Perlu ada kode HTML tambahan yang diselipkan secara manual untuk mengganti source dari gambar facebook kita.

Kode HTML awal dari lencana profil facebook kita diubah sebagai berikut :

-          Buat kode HTML lencana profil seperti yang saya jelaskan diatas.  Sebagai contoh kode HTML facebook saya .

<!-- Facebook Badge START --><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Lufki W. Satriono">Lufki W. Satriono</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Buat lencana Anda sendiri!">Buat Lencana Anda</a><br/><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" title="Lufki W. Satriono"><img src="http://badge.facebook.com/badge/1549645819.380.2003203872.png" width="360" height="138" style="border: 0px;" /></a><!-- Facebook Badge END -->

Tulisan yang saya garis bawahi dan tebal itu yang akan diganti dengan source gambar profil facebook anda.  Kode HTML didapat dengan cara klik kanan gambar profil facebook anda, kemudian klik View Image.  Alamat yang tertera di toolbar browser anda itulah kode HTML yang akan kita sisipkan.  Copy alamat tersebut dengan cara klik mouse kanan lalu klik copy.

Setelah itu ganti kode HTML yang saya tulis tebal dan bergaris bawah dengan alamat yang telah dicopy tadi.  Kode HTML nya menjadi seperti ini :

<!-- Facebook Badge START --><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Lufki W. Satriono">Lufki W. Satriono</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Buat lencana Anda sendiri!">Buat Lencana Anda</a><br/><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" title="Lufki W. Satriono"><img src=" http://www.facebook.com/badge.php?id=1549645819&bid=380&key=2003203872&format=png&z=631002939" width="360" height="138" style="border: 0px;" /></a><!-- Facebook Badge END -->

Copy kode HTML diatas dan masukkan ke dalam widget blog.  Penempatan widget blog terserah anda.  Apabila berhasil maka di blog anda akan muncul foto profil facebook anda.  Apabila ada pengunjung blog anda yang kebetulan membuka akun facebooknya, kemudian mengklik widget tersebut maka dia akan terhubung dengan akun facebook anda.

Setelah saya amati ternyata setelah diklik tidak langsung terhubung dengan profil facebook saya, maka saya  memodifikasi alamat url dari gambar tersebut.  Caranya sebagai berikut :

-          Ini kode HTML awal sebelum diedit lagi.

<!-- Facebook Badge START --><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Lufki W. Satriono">Lufki W. Satriono</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Buat lencana Anda sendiri!">Buat Lencana Anda</a><br/><a href="http://id-id.facebook.com/people/Lufki-W-Satriono/1549645819" target="_TOP" title="Lufki W. Satriono"><img src=" http://www.facebook.com/badge.php?id=1549645819&bid=380&key=2003203872&format=png&z=631002939" width="360" height="138" style="border: 0px;" /></a><!-- Facebook Badge END -->

-          Buka Profil facebook anda, kemudian copy alamat web yang ada di toolbar browser.

-          Ganti kode HTML yang saya tulis tebal dan bergaris bawah dengan alamat yang baru tersebut

-          Setelah diganti maka kode HTML akan menjadi begini :

<!-- Facebook Badge START --><a href="http://www.facebook.com/?ref=home#!/profile.php?id=1549645819" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Lufki W. Satriono">Lufki W. Satriono</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Buat lencana Anda sendiri!">Buat Lencana Anda</a><br/><a href=" http://www.facebook.com/?ref=home#!/profile.php?id=1549645819" target="_TOP" title="Lufki W. Satriono"><img src=" http://www.facebook.com/badge.php?id=1549645819&bid=380&key=2003203872&format=png&z=631002939" width="260" height="138" style="border: 0px;" /></a><!-- Facebook Badge END -->

-          Edit juga lebar dari gambar tersebut.  Saya menggunakan lebar 260 agar mencukupi di sidebar blog saya.

Apabila pengunjung blog yang juga membuka akun facebooknya kemudian mengklik foto profil facebook di blog anda, maka dia akan langsung terhubung ke Info Profil anda…..

SILAHKAN MEMBACA ARTIKEL LAINNYA...