Google Friend Connect Valid HTML5

Google Friend Connect Valid HTML5, Semenjak widget google friend connect dihilangkan dari menu Add Gadget pada Tata Letak ternyata masih ada bahkan banyak yang bingung untuk memasang widget ini padahal widget ini bisa dibilang sangat menarik jika dibandingkan dengan Google+ Follower, buktinya jika kita lihat pada blog yang banyak bertebaran di internet banyak sekali dari pemilik blog yang masih memasang google friend connect ini termasuk saya juga.

Dari hasil survey yang saya lakukan terhadap widget ini dengan cara Googling dan ambil secara acak serta melihat beberapa blog hasilnya masih banyak yang menggunakan widget ini namun masih ada juga beberapa kawan yang sempat bertanya cara memasangnya padahal sudah saya berikan tutorial yang cukup jelas tapi widget tersebut masih juga belum muncul. Untuk itu disini saya tulis lagi cara memasang widget google friend connect dengan cara manual namun lebih rumit dibandingkan dengan yang pernah saya tulis sebelumnya, meskipun rumit tapi hasil yang didapat cukup memuaskan karena Google Friend Connect ini bisa Valid HTML5.
Langsung ke cara pemasangannya
1. Pasang dulu widget google friend connect dengan mengikuti cara yang pernah saya tulis disini
2. Jika sudah sekarang buka dan lihat Page Source blog Anda, caranya klik kanan pada area kosong pada blog Anda dan klik menu “View Page Source” atau bisa juga lewat menu “Tools >> Web Developer >> Page Source” pada browser Mozilla Firefox.
3. Cari tulisan renderMembersGadget seperti pada gambar dibawah ini

4. Tambahkan widget baru, caranya klik menu Tata Letak >> Add Gadget >> HTML/JavaScript selanjutnya copy dan paste script dibawah ini pada kota HTML/JavaScript yang muncul tadi

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4qmlh3xoedtu" style="width:225px;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = '260';
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-4qmlh3xoedtu',
   site: '15798607466213540774'},
  skin);
</script>

Ganti yang saya cetak merah dengan yang ada pada Page Source blog Anda pada (Langkah 2 dan 3 diatas)
5. Jika sudah selesai klik tombol Simpan
6. Langkah selanjutnya hapus widget Google Friend Connect yang pertama kali Anda buat tadi (Langkah 1 diatas)
7. Supaya widget Google Friend Connect Valid HTML5 silahkan hapus code seperti dibawah ini pada template blog Anda

<b:include name='quickedit'/>

Selesai sudah apa yang saya tulis ini, mudah-mudahan bermanfaat. Selamat mencoba dan semoga berhasil

Tweet