Membuat G+ (G plus) Popup Follow Box dengan Cookie Expire

Membuat G+ (G plus) Popup Follow Box dengan Cookie Expire
Salah satu cara untuk menambahkan follower pada halaman fanpage G+ (G plus) kita adalah dengan menambahkan widget G+ fanpage kita dengan tampilan popup pada web/blog yang kita miliki. Akan tetapi ada kendala lain saat kita menggunakan tampilan popup box ini, terkadang kita lupa menambahkan timer dan cookie expire pada widget popup kita, sehingga efek sampingnya yaitu hampir di setiap kali pengunjung berpindah halaman pada web/blog kita maka popup  yang kita buat tadi akan selalu muncul di hampir seluruh halaman web/blog kita.

Untuk mengatasi hal ini, pada postingan kali ini saya akan sedikit menambahkan timer  dan cookie expire pada widget popup g+ yang kita buat agar tidak selalu muncul terus menerus sehingga tidak mengganggu pengunjung yang datang ke web/blog kita.

Berikut ini adalah kode HTML/JavaScript widget G+ (G plus) Popup Follow Box yang bisa langsung kalian copy dan paste pada blog Anda:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#fanback {
  display:none;
  background:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}
#fan-exit {
  width:100%;
  height:100%;
}
#fanbox {
  background:white;
  width:300px;
  height:400px;
  position:absolute;
  top:58%;
  left:63%;
  margin:-220px 0 0 -375px;
  -webkit-box-shadow: inset 0 0 50px 0 #939393;
  -moz-box-shadow: inset 0 0 50px 0 #939393;
  box-shadow: inset 0 0 50px 0 #939393;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: -220px 0 0 -375px;
}
#fanclose {
  float:right;
  cursor:pointer;
  background:url(https://lh5.googleusercontent.com/-HS2BETwaNmY/VLKUmzXAi0I/AAAAAAAATL0/H8pfcykR4YI/s56-no/fanclose.png) repeat;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}
.remove-borda {
  height:1px;
  width:250px;
  margin:0 auto;
  background:#F3F3F3;
  margin-top:16px;
  position:relative;
  margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
  color:#80808B;
  font-size:10px;
  margin: 0 auto 5px auto;
  float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
  // key and at least value given, set cookie...
  if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
      options.expires = -1;
    }
    if (typeof options.expires === 'number') {
      var days = options.expires, t = options.expires = new Date();
      t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
      encodeURIComponent(key), '=',
      options.raw ? value : encodeURIComponent(value),
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
    ].join(''));
  }
  // key and possibly options given, get cookie...
  options = value || {};
  var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
  if($.cookie('popup_gplus_like') != 'yes'){
    $('#fanback').delay(5000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_gplus_like', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
  <div id='fan-exit'></div>
  <div id='fanbox'>
    <div id='fanclose'></div>
    <div class='remove-borda'></div>
    <!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/u/0/113750800916808910377" data-rel="publisher"></div>

<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  </div>
</div>

Berikut ini penjelasan dan konfigurasi/setting mengenai code HTML/JavaScript yang barusan kalian paste diatas:

Perhatikan line pertama pada kode diatas. Jika pada theme yang Anda gunakan, sudah memiliki jquery: ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js maka tidak perlu ditambahkan lagi.

Selanjutnya, silahkan perhatikan line ke-93 pada code diatas yaitu $('#fanback').delay(5000).fadeIn('medium'); Ini adalah timer popup saat halaman selesai loading. Pada code tersebut, value untuk perintah delay-nya adalah 5000 yang memiliki arti bahwa popup g+ ini akan muncul 5 detik setelah loading halaman web/blog kita telah selesai. Perlu diketahui bahwa nilai value untuk timer ini adalah 1000 = 1detik, sehingga jika kita ingin merubah timer delay-nya menjadi 7detik, maka value yang kita tuliskan adalah 7000.

Kemudian perhatikan line ke-98 yaitu $.cookie('popup_gplus_like', 'yes', { path: '/', expires: 7 }); Ini adalah fungsi cookie expired dimana popup g+ widget yang kita buat hanya muncul sekali dan tidak akan muncul kembali hingga 7 hari berikutnya. Fungsi cookie expired inilah yang berfungsi untuk mengontrol agar popup g+ yang kita buat tidak akan muncul secara terus menerus jika pengunjung berpindah halaman pada web/blog kita. Untuk merubahnya, silahkan ganti angka 7 tersebut sesuai keinginan Anda, misalnya akan kita ganti expired setelah 20 hari maka silahkan diganti dengan value 20 sehinga jika ada pengunjung web/blog yang membuka halaman web kita maka popup g+ hanya muncul sekali dan tidak akan muncul hingga 20 hari berikutnya.

Kemudian langkah terakhir yang paling penting untuk konfigurasi widget popup g+ ini yaitu mengganti link //plus.google.com/u/0/113750800916808910377 pada line ke-107 dengan link profile g+ anda. Sedangkan jika Anda ingin memodifikasi widget g+ follow dengan tampilan yang lainnya, silakan kunjungi Developer Google untuk melakukan setting sesuai keinginan Anda, kemudian copy code yang kalian dapat dari developer google dan silahkan ganti line 106-116 menggunakan code yang baru saja kalian buat di developer google. Selamat mencoba.

Post a Comment

 
Top