Cara Membuat & Memasang Popup Facebook Like Box 2016 - Hallo sahabat Dipayuman, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat & Memasang Popup Facebook Like Box 2016, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tips Internet, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat & Memasang Popup Facebook Like Box 2016
link : Cara Membuat & Memasang Popup Facebook Like Box 2016

Cara Membuat & Memasang Popup Facebook Like Box 2016

Cara Membuat & Memasang Popup Facebook Like Box

Ada banyak cara untuk meningkatkan jumlah Facebook like pada Facebook fans page, salah satunya yaitu dengan memasang widget like box yang muncul secara popup. Lalu bagaimana cara membuatnya? tidak sesusah yang kita bayangkan.
Popup Facebook Like Box ini hanya menggunakan jQuery jadi loadingnya pun akan lebih cepat jika dibandingkan dengan yang menggunakan versi Lightbox.
Langsung saja, paste kode berikut di widget HTML/JavaScript:

<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:420px;
  height:270px;
  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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7TAQu0X96zJB42ATgLFe8sZQtGlLTOipkUag54eCREso4cbXQAPtSaFGHDJyN3Gtg5ybLBaEdWgRAgWzr1lNMdrydTy7Hxybt_X8asgToE3GkXdnkba7vn-IkveqWA0MLW1ZObUxr716/s1600/fanclose.png) repeat;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}
.remove-borda {
  height:1px;
  width:366px;
  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_facebook_like') != 'yes'){
    $('#fanback').delay(5000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_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>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bersosial&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
  </div>
</div>

Catatan: jika template kalian sudah menyertakan jQuery maka tidak perlu menambahkan jQuery lagi.

Konfigurasi Popup Facebook Like Box

Pertama ganti https://www.facebook.com/bersosial dengan alamat Facebook fans page kalian.
Secara default widget muncul 5 detik setelah halaman selesai loading. Cari kode di bawah ini dan ubah angka 5000 ke angka yang lebih besar atau lebih kecil.

$('#fanback').delay(5000).fadeIn('medium');

Catatan: 1 detik = 1000. 10 detik = 10000. 60 detik = 60000.
Saat ini cookie akan expire selama 7 hari, jadi setelah 7 hari maka pengunjung yang sama akan melihat popup lagi. Ganti angka 7 sesuai dengan keinginan.

$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });

Dapatkan Facebook Like Box di Facebook Developer.
Jika kalian mengalami kesulitan dengan cara pemasangan widget popup ini, silahkan tinggalkan komentar.
Lihat demo dari Facebook Popup ini di Develio.
Untuk demonya saya menambahkan Twitter follow juga, berikut kode yang saya pakai:

<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:420px;
  height:300px;
  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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7TAQu0X96zJB42ATgLFe8sZQtGlLTOipkUag54eCREso4cbXQAPtSaFGHDJyN3Gtg5ybLBaEdWgRAgWzr1lNMdrydTy7Hxybt_X8asgToE3GkXdnkba7vn-IkveqWA0MLW1ZObUxr716/s1600/fanclose.png) repeat;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}
.remove-borda {
  height:1px;
  width:366px;
  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_facebook_like') != 'yes'){
    $('#fanback').delay(1000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_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>
    <div style="text-align:center;"><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bersosial&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
      <div style="text-align:center;"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/follow_button.1378768434.html#_=1378995860492&id=twitter-widget-17&lang=id&preview=true&screen_name=bersosial&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" style="width: 114px; height: 20px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe></div>
    </div>
  </div>
</div>

Saya menambah tinggi serta wrapper.

Tweet