Ditulis oleh: Ditulis pada: 12/05/2015
Google Friend Connect atau widget Follower untuk Blogspot adalah salah satu cara untuk mendapatkan pembaca langganan blog sesama Blogger. Mungkin ini adalah salah satu cara mudah untuk blogwalking karena setiap ada update terbaru dari blog yang kita follow, maka akan ada pemberitahuan post baru di dashboard blog kita.Iseng-isng saya intip kode Google Friend Connect, ternyata sudah berbeda dari kode terdahulu. Namun bagi saya ini tetap saja memberatkan loading blog, apalagi menggunakan js Google+ yang tidak di-asynchronous.
Kemudian saya mencari cara untuk menyimpannya di halaman statis. Hanya tombol Follow Blog yang saya tampilkan dengan link mengarah ke halaman statis yang berisi Google Friend Connect.
Pertama saya meng-copy semua kode Google Friend Connect dari page source ke halaman statis dan ternyata Google Friend Connect bisa muncul juga. Namun ketika widget Google Friend Connect di sidebar dihapus, yang di simpan di halaman statis pun tidak muncul (error).
Akhirnya saya mencoba cara lain dan akhirnya berhasil hehehe...
Saya mengambil iframe dari Google Friend Connect dan menyimpannya di halaman statis. Meskipun widget Google Friend Connect di sidebar di hapus, iframe-nya masih tetap muncul di halaman statis.
Silahkan bisa Anda coba DI SINI.
Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
1. Tambahkan Dulu Widget Followers Di Sidebar
Silahkan tambahkan dulu widget Followers di sidebar. Di Tata Letak tambahkan gadget baru kemudian klik More Gadget, lalu scroll ke bawah dan tambahkan widget Followers.
Kemudian sesuaikan warna-warna tulisan dan link agar sesuai dengan tema blog kita. Sebagai panduan bisa lihat gambar di bawah ini.
2. Ambil Iframe Google Friend Connect
Setelah widget Followers muncul di sidebar, silahkan klik kanan pada widgetnya lalu inspect element. Lalu cari kode
<div id="followers-iframe-container"> dengan CTRL + F di kotak inspect element. Setelah ketemu, silahkan klik kode tersebut kemudian CTRL + C (copy).3. Buat Halaman Statis Untuk Widget Followes
Silahkan buat halaman statis untuk Followers kemudian paste atau CTRL + V kode yang tadi di-copy di langkah ke-2 di atas di halaman tersebut dalam mode HTML.
Selesai, kini Google Friend Connect sudah tampil di halaman statis. Selanjutnya tinggal hapus lagi widget Followers di sidebar.
Mudah bukan?
Agar pengunjung bisa menemukan halaman Followers tersebut, silahkan buat sebuah tombol Followers dengan link halaman Followers atau simpan link di menu blog.
Update:
Ternyata kini bulan Agustus 2016, kode widget Follower Blogger sudah berubah lagi, jadi silahkan gunakan kode di bawah ini untuk menampilkan Follower Blogger di halaman statis.
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://apis.google.com/js/plusone.js\"></scr" + "ipt>");
//]]>
</script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d2583045784323695327\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d108\x26origin\x3dhttp://www.kompiajaib.com/");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d2583045784323695327\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d108\x26origin\x3dhttp://www.kompiajaib.com/");
</script>
Ganti kode
2583045784323695327 dengan ID blog Anda, 108 adalah mengatur jumlah follower yang ditampilkan, http://www.kompiajaib.com/ ganti dengan URL blog Anda.Selamat mencoba.