Gadget Popular Post dari Google Friend Connect

Bagi pengguna blogger atau blogspot pasti sudah pada tahu apa itu google friend connect karena sudah tertanam langsung pada blognya. Google Friend Connect (Jalinan Teman Google) merupakan layanan komunitas sosial dari google yang didalamnya kita bisa saling berinteraksi seperti halnya pada Blogcatalog dan lainnya. Widget friend connect ini memang sangat membantu dalam meningkatkan traffic dan popularitas blog.

Apakah anda tahu bahwa Google Friend Connect juga menyediakan widget Recommended (Popular) Post yang bisa kita pasang di blog. Kelebihan widget ini dari widget popular post yang lain adalah lebih stabil dan juga cepat terupdate untuk menampilkan list posting. Contoh dari widget ini dapat anda lihat disidebar kanan, dan dibawah list yang ditampilkan terdapat tombol Vote yang berfungsi untuk mengukur tingkat kepopuleran sebuah halaman dan kemudian akan ditampilkan ke dalam list.

Untuk memasang Gadget Popular Post ini ke blog, silahkan anda simak tutorial lengkapnya :

Gadget Recommended (Popular) Post

Kunjungi :http://www.google.com/friendconnect/

Masuk / login dengan username dan password akun google atau blogger anda dan pilih salah satu blog kemudian pilih menu "Gadget".

Scroll kebawah dan pilih widget "Recommendation".

Mengatur tampilan untuk list Popular Post

Ini merupakan widget utama yang akan menampilkan list atau daftar postingan terpopuler, silahkan atur warna, background, width dan lainnya sesuai keinginan anda lalu lihat previewnya apa sudah sesuai atau belum.

Mengatur tampilan untuk tombol Vote

Tombol ini berfungsi untuk merekomendasikan sebuah halaman untuk ditampilkan ke dalam list / daftar popular post (tergantung jumlah rekomendasi). Pilih salah satu dari 2 tombol dan iconnya yang akan kita gunakan :

"Tombol Ringkas" tampilannya seperti ini:

"Modular" tampilanya seperti ini :

Silahkan pilih tombol yang anda sukai dan atur tampilannya.

Buat dan Dapatkan Kode HTML

Setelah mengatur tampilan maka langkah selanjutnya adalah mengambil kode widget yang nantinya akan dipasang di blog.

Klik tombol "Buat Kode" untuk menggenerate kodenya dan akan muncul 2 kode yang masing - masing kode untuk Recommended (popular) list dan yang satunya untuk Tombol Vote.

Cara Pasang Widget

Saya asumsikan langkah diatas sudah anda jalankan dengan benar dan telah memiliki kodenya.

Pasang Kode Recommended List Pada Sidebar

Sebagai contoh kita akan memasangnya di sidebar, untuk blogger/ blogspot tambahkan "widget HTML/Javasript" baru lalu isi dengan kode Recommended (popular) list sedangkan untuk wordpress caranya sama yaitu dengan menambahkan "widget text" baru pada sidebar kemudian isi dengan kode Recommended (popular) list.

Pasang Kode Tombol Vote pada tiap Postingan

Alangkah baiknya kita memasang tombol ini hanya pada halaman postingan saja agar tidak terjadi kesalahan jika menampilkan banyak tombol pada halaman yang sama (halaman Homepage yang menampilkan banyak posting) dan tekniknya adalah menggunakan Conditional Tag. Sebagai contoh kita akan memasang tombol ini diatas postingan.

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-7064793784943751094" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Sarankan!';
skin['BUTTON_ICON'] = 'default';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-7064793784943751094',
   url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
   height: 21,
   site: '11332923189683725073',
   'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
 },
  skin);
</script>

Untuk Blogger :

• Login ke account blogger
• Pilih tab Rancangan --> Edit HTML
• Sebelum melakukan perubahan pada template, biasakan untuk membackup terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
• Centang pada expand template widget
• Cari kode data:post.body
• Tepat diatasnya Copas skrip ini

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
<!-- Skrip tombol Vote letakan disini.. -->
</b:if>

Sehingga seluruhnya jadi seperti ini:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-7064793784943751094" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Sarankan!';
skin['BUTTON_ICON'] = 'default';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-7064793784943751094',
   url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
   height: 21,
   site: '11332923189683725073',
   'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
 },
  skin);
</script>
</b:if>

kode <b:if cond...</b:if> diatas adalah conditional tag agar tombol vote hanya tampil pada halaman postingan saja.

Untuk Wordpress :

• Masuk Ke Dashboard Blog Anda
• Pilih tab Appearance--> Editor (Themes Editor)
• Edit file single.php
• Cari kode <?php the_content(); ?> kemudian
• Letakan skrip Tombol Vote sebelum kode diatas.

<!-- Skrip tombol Vote letakan disini.. -->
<?php the_content(); ?>

Silahkan simpan template anda dan lihat hasilnya.

Pada awalnya widget Popular Post ini masih akan menampilkan list kosong, ini dikarenakan belum ada yang merekomendasikan postingan tertentu melalui tombol vote yang telah dipasang.

Untuk menampilkan postingan pada list, anda dapat melakukannya sendiri dengan mengklik tombol vote pada tiap posting dan selanjutnya biarkan pengunjung blog anda yang melakukanya.

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda