Cara Membuat Google Friend Connect Di Halaman Statis

Postingan ini berawal dari coba-coba memasang widget Google Friend Connect di Blog, Widget ini saya pasang di Sidebar namun setelah saya cek ke pagespeed ternyata ada beberapa yang harus di perbaiki untuk mempercepat loading blog, salah satu penghambat loading blog adalah kode Js dari Google Friend Connect yang membuat loading lambat terutama untuk tampilan di Mobile.

Setelah saya coba cari dan tanya kemudian uji coba dan akhirnya menemukan cara yang menurut saya lebih efektif dan mempercepat loading blog yaitu dengan Cara Membuat Google Friend Connect Di Halaman Statis, akhirnya saya coba dan ternyata berhasil yaitu dengan mengambil kode Iframe dari Widget Google Friend Connect Di Sidebar.

Bagi sobat yang ingin mencobanya simak caranya berikut ini

Langkah pertama 

Silahkan sobat pertama buat terlebih dahulu widget Google Friend Connect di sidebar, pilih Tata letak lalu klik More Gadget lalu pilih Widget Followers, disini silahkan setting ukuran dan background sesuai dengan lebar yang sobat inginkan.

Langkah Ke Dua

Silahkan ambil kode dari Widget Google Friend Connect di Sidebar dengan cara klik kanan pilih Inspect Element Cari kode <div id="followers-iframe-container"> silahkan cari dengan cara cepat CTRL+F di kotak inspect element, setelah ketemu klik kode tersebut dan salin.

Langkah Ke Tiga

Sekarang silahkan sobat buat halaman statis beri Judul Google Friend Connect untuk menempatkan Google Friend Connect di halaman statis tersebut dan silahkan tempelkan kode CTRL+V yang tadi di Salin pada langkah ke-2 diatas didalam halaman statis tersebut pada mode HTML.

Setelah itu coba pratinjau terlebih dahulu jika dirasa sudah pas silahkan disimpan halaman statis tersebut, untuk mempermudah pengunjung blog mengikuti blog kita sobat bisa tambahkan tombol link di laman Menu Blog agar mempermudah pengunjung dan sebagai menu Navigasi tambahan juga.  Selesai...mudah kan sobat, Setelah terpasang di halaman statis silahkan hapus Google Friend Connect yang di Side Bar.

Tambahan Updated, sejak bulan Agustus 2016 Google melakukan perubahan semua Algoritma pada Produknya tidak terkecuali Google Follower Friend Connect ini kodenya pun mengalami perubahan jadi silahkan sobat cukup gunakan kode dibawah ini untuk menampilkan Google Friend Connect di halaman Statis-nya.

<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\x3d9206728842819135413\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d100\x26origin\x3dhttp://www.dibalikseo.com/");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              },
              'blogger-ping': function() {
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers.g?blogID\x3d9206728842819135413\x26colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaBjY2NjY2NiIGMjI4OGJiKgZmZmZmZmYyBjAwMDAwMDoGNjY2NjY2QgYyMjg4YmJKBjk5OTk5OVIGMjI4OGJiWgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d100\x26origin\x3dhttp://www.dibalikseo.com/");
  </script>

Perhatikan kode yang ditandai 9206728842819135413 silahkan ganti dengan Blog ID sobat dan 100 itu untuk mengatur jumlah Follower yang nantinya akan ditampilkan dalam halaman statis dan http://www.dibalikseo.com silahkan rubah dengan alamat url sobat.

Selamat Mencoba ...