Thursday, November 05, 2009

Populer Post Widget Dari Google Friend Connect

9 comments
loading...
Populer Post Widget Dari Google Friend Connect
Populer Post Widget Dari Google Friend Connect, widget ini saya gunakan di blog bisnis online sejak beberapa hari yang lalu untuk menggantikan widget artikel terpopuler terdahulu.
Kenapa saya lebih memilih widget dari google friend connect?
Karena widget ini stabil, handal dan cepat update. Dan widget populer post atau artikel ini setelah di instal sangat mudah bagi pembaca blog kita untuk merekomendasikan artikel favorit mereka.

Tertarik?? Berminat memasang populer post widget dari google connect friend ini di blog kalian?
Simak terus yuk lanjutanyya :p

Oke, langsung saja, berikut ini langkah pemasangan populer post widget dari google connect friend :

Cara Menginstal Atau Memasang Populer Post Widget Dari Google Friend Connect
Ada dua elemen yang diperlukan untuk menyelesaikan proses instalasi, dan ini cukup mudah.

Pertama, login ke Google Friend Connect. Kalian akan menggunakan data yang sama (username dan password) seperti yang kalian lakukan saat login ke Blogger.

Setelah login, kalian akan melihat halaman yang mirip dengan yang satu ini:

Setiap blog yang kalian buat dengan account Google, akan muncul dalam daftar di sisi kiri halaman.

Klik di blog yang ingin kalian pasang widget populer post ini (jika belum dipilih). Setelah itu akan terbuka sub-menu di bawah judul blog kalian.

Klik tombol "Gadget Sosial" link di sub-menu ini:



Pada halaman berikutnya, scroll ke bawah ke "Rekomendasi widget" - widget ini akan kita gunakan untuk menampilkan posting palinng populer dari blog kita, yang dipilih oleh anggota blog:



Klik untuk menciptakan dan mengatur style Rekomendasi widget untuk blog kalian.

Mengatur Style/Tampilan Daftar Saran/Rekomendasi

Di halaman pertama ini, kalian dapat memilih bagaimana daftar saran/rekomendasi akan ditata ketika ditambahkan ke tata letak/layout Blogger kalian.



Jika kalian lebih memilih salah satu dari unsur-unsur warna (seperti background dan border) harus transparan, cukup hapus nilai hex.
Kalian dapat melihat terlebih dahulu perubahan yang dibuat pada pengaturan style dan daftar rekomendasi kalian di sudut kanan halaman atas.

Mengkonfigurasi Tombol Voting

Di halaman kedua ini kalian bisa mengkonfigurasi tampilan tombol/button voting.Tombol Ini akan muncul di halaman posting blog kalian, dan yang akan diklik oleh pembaca untuk merekomendasikan posting/artikel yang mereka nikmati.

Ada dua jenis tombol voting yang dapat kalian pilh:

Tampilan "compact" atau tombol ringkas button seperti ini :


Tampilan "modular" button seperti ini :


Untuk kedua gaya tombol, kalian dapat memilih antara heart atau tick icon (tanda ceklis). Ketika memilih "modular" button, warna teks, border dan background juga dapat diubah :


Membuat dan Meng-generate Kode Javascript Widget
Setelah mengkonfigurasi tampilan yang kalian inginkan untuk daftar rekomendasi dan tombol voting, selanjutnya kalian dapat mengambil dan mengcopy kode yang disediakan untuk ditambahkan ke template blog kalian dengan mengklik tombol di bagian ketiga :


disini akan menghasilkan dua set kode yang berbeda - satu untuk daftar rekomendasi, dan satu lagi untuk tombol voting.

Menambahkan Kode Daftar Rekomendasi ke Blog
Cara termudah untuk memasukkan Daftar Rekomendasi (daftar posting paling populer) di blog kalian adalah dengan menyisipkan kode ke HTML / JavaScript widget di sidebar Blogger kalian.

Cukup mengcopy semua kode pada bagian "agregation gadget" , dan copy ke clipboard. Lalu pergi ke Layout> Page Elements di dashboard Blogger kalian, pilih HTML / Javascript widget dan paste kode dari clipboard ke bagian konten widget.

Menambahkan Kode Tombol Voting ke Blog
Idealnya, kita harus menambahkan tombol voting muncul hanya pada halaman konten. Hal ini untuk memastikan tidak ada masalah ketika posting beberapa tombol pada halaman yang sama (misalnya, blog yang home page-nya menampilkan lebih dari satu post), kita juga harus membuat instalasi sederhana.

Untuk menambahkan tombol voting ke halaman blog kita, kita perlu mengedit kode template Blogger.

Pergi ke Layout> Edit HTML di dashboard Blogger kalian, dan pastikan kalian telah mencentang kotak "Expand widget template".

Kemudian gunakan browser fungsi pencarian (ctrl+f), dan cari baris yang berisi <data:post.body/>

Kode ini biasanya berada dalam tag <p> <div> atau tergantung pada template yang kalian gunakan.

Setelah baris diatas, sisipkan kode berikut:
<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
<!-- Disini letak untuk mempaste kode javascript untuk tombol -->
</b:if>

Selanjutnya, salin kode bagian kedua untuk Rekomendasi widget Friend Connect kalian :

Dan Paste kode diatas diantara tags <b:if cond = 'data:blog.pageType == &quot;item&quot;'> dan </b:if>.

Berikut ini hasil akhirnya :
<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-1020104213976883876" 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'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>

</b:if>

Setelah menyisipkan script, lihat perubahan yang telah dilakukan untuk menjamin tombol tidak akan muncul pada homepage blog kalian. Jika semuanya terlihat baik dan tidak ada kesalahan yang, save template dan selesaikan instalasi.

Menggunakan Rekomendasi Gadget
Awalnya, daftar rekomendasi kalian tidak akan menampilkan posting apapun. Hal ini karena belum ada posting yang terpilih melalui tombol voting.

Kalian bisa memilih beberapa posting sendiri dengan mengklik tombol voting pada halaman posting, atau kalian juga bisa menunggu sampai ada pembaca yang memilih sendiri.

Saat menggunakan link voting, halaman pop-up akan muncul dan mengajak pengguna untuk login ke Friend Connect (jika mereka belum log in) dan setelah itu baru mereka dapat merekomendasikan posting. Suara dihitung hampir saat itu juga, dan terdaftar di bawah setiap item dalam Rekomendasi List:



Apa pendapat kalian tentang Populer Post Widget Dari Google Friend Connect? Apakah proses pemasangan atau instalasi terlalu rumit, atau mungkin kalian sudah menggunakan widget ini di blog kalian untuk para pembaca agar merekomendasikan posting favorit mereka?

Monggo share pendapatnya dengan meninggalkan komentar :).
loading...

9 comments:

  1. bro kerenlah, aku suka cara penjelasannya yang mudah dicerna. dan thank informasi ini, mungkin bisa juga ku pasang nanti. well btw lama ngak muncul bro, sibuk apa kalau boleh tau?

    ReplyDelete
  2. Mantap sob! Ntar aku cobain dulu ah.. Thanks!

    ReplyDelete
  3. @ramlan : thanks.
    Malah tdnya tak pikir bahasanya agak 'njlimet' :)), maklum buru2.
    Hehe. . .iya nih, kebetulan lg dpt job dari temen buat bikin site sekaligus ngurusin SEO-nya, jd semua blog saya terpaksa ditelantarin dulu. Maklum, ngejar deadline =)). Makanya tak sempetin update skrng, supaya gak anjlok rankingnya :).

    @dunia komputer : thanks sob. Monggo dicoba, klo ada yg bingung tny aj, sebisa mungkin saya bntu nanti ;)

    ReplyDelete
  4. Seperti biasa kang, mantaplah..informatif,nanti kalo udah siap saya coba deh;;)

    ReplyDelete
  5. makasih infonya, coba cari space yg cocok untuk pasang widgetnya

    ReplyDelete
  6. Wow mantab triknya.. jd itu berdasarkan voting pengunjung ya? btw panjang juga nih caranya...

    ReplyDelete
  7. thx bro info nya..ane newbie..msih byk yg blum ngerti..numpang copas dah bwt dibca2 offline..

    ReplyDelete
  8. wah,mantap nih,buat nambahin ilmu.thanks 4shared ya..

    ReplyDelete