A Popular Posts Gadget from Google Friend Connect.

Terus terang saya baru tahu, ternyata di Google Friend Connet terdapat beberapa gadget yang dapat dimanfaatkan dalam blog kita. Salah satunya adalah membuat gadget tentang daftar posting yang direkomendasikan oleh pembaca atau istilah asingnya adalah "Popular Posts"

Cara menginstal gadget "Popular Posts"

Sayangnya, Friend Connect gadget ini tidak (belum) dapat diinstal dalam satu klik. Ada dua elemen yang diperlukan untuk menyelesaikan instalasi, dan ini relatif mudah.

Pertama, login ke Friend Connect dengan account google anda yang berhubungan dengan blog yang akan anda pasang gadget ini.

Setelah Anda login, anda akan dihadapkan pada halaman "Persyaratan Layanan Pengembangan Jalinan Teman", klik saja tombol "Saya setuju........"
Kemudian Anda akan dibawa ke halaman berikutnya yang mana dalam halaman tersebut terdapat beberapa nama blog anda yang terdaftar dalam satu akun anda. Silahkan klik salah satu nama blog yang akan anda tambahkan gadget ini untuk membuka sub-menu dibawah judul blog Anda.

Klik tombol "Gadget Sosial" link di sub-menu tersebut, anda akan dibawa ke halaman Galeri Gadget. Gulir ke bawah ke "Rekomendasi" widget - dengan gadget ini kita akan menggunakan untuk menampilkan posting paling populer. Klik pada "dapatkan gadget ini"

Kita akan masuk pada halaman "Siapkan Gadget Saran"
Gadget Saran memungkinkan pengunjung dan anggota situs menemukan dan merekomendasikan konten paling menarik di situs Anda. Dengan menempatkan tombol saran pada artikel atau produk di situs, anggota situs dapat menyarankan konten khusus yang kemudian akan muncul dalam daftar saran untuk ditemukan pengunjung lain.

Silahkan modifikasi sesuai selera anda dengan mengikuti petunjuk yang ada pada tiap kotak pilihan pada "Konfigurasi daftar saran".

Anda akan dapat melihat dulu perubahan yang dibuat pada pengaturan gaya dan daftar rekomendasi Anda di sudut kanan atas halaman (Pratayang).

Selanjutnya kita akan Konfigurasi Tombol Voting. Langkah ini adalah untuk membuat tombol voting yang akan muncul di halaman posting blog Anda, dan pembaca Anda akan mengklik untuk merekomendasikan posting yang mereka nikmati.

Ada beberapa tombol yang perlu anda rubah. Pada langkah ini saya memilih gaya tombol "Modular", ikonnya Hati. Silahkan atur konfigurasi warna sesuai selera anda.

Setelah Anda mengkonfigurasi tampilan yang Anda inginkan untuk daftar rekomendasi dan pemungutan suara tombol, Anda dapat menghasilkan kode yang diperlukan untuk menambahkan ke template Anda dengan mengklik tombol di bagian 'Buat Kode"

Ada dua kode yang harus anda Copas dalam notepad.

Untuk kode :"Tambahkan ini ke laman di mana Anda ingin gadget agregasi muncul"

dibawah ini contoh kodenya :

<!-- 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-4232679380832020619" style="width:300px;border:1px solid
#cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#6666cc';
skin['ENDCAP_TEXT_COLOR'] = '#ffffff';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['HEADER_TEXT'] = 'Artikel Yang Disarankan';
skin['RECOMMENDATIONS_PER_PAGE'] = '10';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and

canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-4232679380832020619',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
site: '08384161731237516439',
'view-params':{"docId":"recommendedPages"}
},
skin);
</script>

Sisipkan kode diatas ke HTML / JavaScript widget di sidebar Blogger Anda.

Layout -- Page Elements -- HTML/Javascript -- paste kode dari clipboard ke bagian konten gadget Anda.

Untuk kode :"Tambahkan ini ke laman di mana Anda ingin memunculkan tombol"

Dibawah ini contoh kodenya :

<!-- 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-6463399633165467010" style="width:100%;border:1px solid #c0c0c0;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '73';
skin['BORDER_COLOR'] = '#c0c0c0';
skin['ENDCAP_BG_COLOR'] = '#6666cc';
skin['ENDCAP_TEXT_COLOR'] = '#66ffff';
skin['BUTTON_STYLE'] = 'modular';
skin['BUTTON_TEXT'] = 'kalau suka, klik ya...';
skin['BUTTON_ICON'] = 'heart';
skin['BUTTON_MODULE_PROMO_TEXT'] = 'Anda suka artikel ini?';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and

canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-6463399633165467010',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 73,
site: '08384161731237516439',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ?

document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>


Idealnya, kita harus menambahkan tombol pemungutan suara muncul hanya pada halaman konten. Hal ini memastikan tidak ada konflik ketika posting beberapa tombol pada halaman yang sama (misalnya, blog home page yang menampilkan lebih dari satu pos), Untuk menambahkan tombol pemungutan suara pada tiap halaman konten kita, kita perlu mengedit kode template Blogger kami.

Dibawah ini bentuk tombolnya :



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

Kemudian menggunakan browser fungsi pencarian, cari baris yang berisi
<data:post.body/>

Bagian ini kode dapat dibungkus dalam tag <p> <div> atau tergantung pada template yang Anda gunakan.

Sisipkan kode diatas pada bagian berikut:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
.........
........
<data:post.body/>
DISINI KODE DITAMBAHKAN

</b:if>

Atau anda bisa menyesuaikan kode READMORE yang anda gunakan pada template anda.

Setelah Anda menyisipkan script, melihat perubahan yang telah dilakukan untuk menjamin tombol tidak akan muncul pada halaman muka blog . Jika semuanya terlihat baik dan tidak ada kesalahan yang dilaporkan, silahkan simpan template Anda.

Ingat, gadget hanya dipasang pada blog yang dipilih. Pada awalnya gadget belum ada tampilan artikel kita, namun apabila ada pengunjung yang menekan tombol dibawah tiap posting maka artikel yang terpilih akan muncul.