Gadget Popular Post dari Google Friend Connect

Minggu, 16 Januari 2011

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".

Friend Connect Popular Post

Scroll kebawah dan pilih widget "Recommendation".

Friend Connect Popular Post

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.

Friend Connect Popular Post

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:

Friend Connect Popular Post

"Modular" tampilanya seperti ini :

Friend Connect Popular Post

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

12 komentar:

Rizky2009 mengatakan...

kayanya menarik nih sob, ok deh aq coba test dulu


17 Januari 2011 21.05
Rizky2009 mengatakan...

ok sob aq coba terst dulu yah


17 Januari 2011 21.07
Reinz mengatakan...

@Rizky2009: Silahkan dicoba sob.

tomi mengatakan...

saya menggunakan pengaya / plugin yg ada di dashboard blog aja mas hehehe


18 Januari 2011 19.07
Beben mengatakan...

hehehe...rajin oprek2 Friendconnectnya google nih...mangtab \m/


22 Januari 2011 02.15
Reinz mengatakan...

@tomi, @beben: terima kasih atas kunjunganya.. :D

Informasi Unik Rahasia Umum mengatakan...

wah dengan begitu pengunjung dapat mengetahui informasi yang populer, nice info !


3 Februari 2011 09.48
kaos mengatakan...

Ok mas thanks infonya... bener bikin canggih ya blog


3 April 2011 16.37
Zam mengatakan...

thank you for information !


19 Agustus 2011 19.55
putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.01
bwin agenjudi mengatakan...

============================

Keep sharing gan, kunjungi balik yaa..

Bwin368 Agen Judi Terpercaya
Bwin368 Agen Judi Online

Bwin368 Agen Bola Terpercaya
Bwin368 Agen Judi Terbesar

Dewa Bola Online
Dewa Bola

============================


11 Mei 2014 19.07
Mobile App Developers mengatakan...

I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.


20 Mei 2015 13.40

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info