Cara Membuat Pop Up Like Fanspage Facebook Responsive Di Blog - Cari Aja Disini

Cara Membuat Pop Up Like Fanspage Facebook Responsive Di Blog


Cara Membuat Pop Up Like Fanspage Facebook Responsive Di Blog

Fanspage facebook merupakan sebuah halaman khusus sebuah situs, komunitas atau produk marketing yang disediakan oleh facebook. Nah pada artikel ini akan dibahas bagaimana cara menampilkan fanspage facebook di dalam blog dalam bentuk pop up box melayang yang responsive. Dimana halaman fanspage facebook samgat cocok untuk mendukung SEO Of Page blog.

Manfaat Pop Up Fanspage Facebook Di Blog

Seperti yang sudah disinggung di atas, dengan adanya fanspage facebook sebuah blog, kita dapat memberikan informasi mengenai artikel terbaru blog kita, sehingga setiap orang yang mengikuti fanspage akan mendapatkan notifikasi. Seperti yang diketahui bahwa facebook merupakan jejaring social media yang terbesar di dunia, hal ini sangat membuka peluang untuk meningkatkan visitor blog melalui facebook.

Disamping itu dengan adanya fanspage facebook sebuah blog, akan mempermudah untuk berinteraksi lebih dekat dengan pengunjung, sehingga akan memperkuat branding blog di mata pengunjung dan meningkatkan kepercayaan pengunjung agar setia membuaka situs blog kita.

Cara Membuat Pop up Fanspage Facebook Responsive Di Blog

Bagi kamu yang belum tahu bagaimana caranya memasang pop up like fanspage facebook di blog, kalian berada di tempat yang tepat. Karena disini akan dijelaskan secara detail memasang pop up like fanspage facebook yang responsive.

Pop up like box ini merupakan sebuah box yang akan muncul saat blog pertama kali di buka, sehingga pengunjung akan melihat box melayang ini terlebih dahulu sebelum melanjutkan membaca artikel. Hal ini memiliki kemungkinan yang lebih besar pengunjung mengikuti fanspage facebook di banding hanya meletakan fanspage di sidebar blog.

Untuk mengetahui lebih lanjut cara memasang pop up like box fanspage facebook responsive silahkan simak tahapan-tahapan berikut ini

1. Pertama yang harus di perhatikan adalah kamu sudah memiliki fanspage facebook, jika belum punya silahkan buat terlebih dahulu.

2. Buat widget baru di blog, kemudian pilih HTML/Javasript

3. Kemudian pastekan kode berikut ini kedalam widget
<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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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>
   <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Kumpulan-Video-Lucu-2345273135706343/&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>

4. Cari kode berikut src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/cariajadisini/
 
5. Kemudian rubah cariajadisini dengan alamat URL fanspage kalian

Keterangan:

delay(5000), Ini merupakan jeda jendela pop up nya muncul, silahkan rubah jika ingin lebih cepat muncul, misalnya 1000

width: 402px; height: 230px; kalian juga dapat merubah ukuran pop up box nya, tinggal sesuaikan tinggi dan lebar sesuai keinginan

expires: 7 , karena pop up ini menyipan cookies di browser jadi pop up akan muncul kembali pada pengunjung yang sama setelah ia membuka 7 kali halaman blog. Jika kamu ingin membuat pop up ini muncul setiap kali blog di buka, maka rubah expires nya menjadi 0.

Kesimpulan

Pop up fanspage facebook sangat membantu untuk mendukung SEO Of Page untuk meningkatkan visitor blog, dan pengimplementasian di blog juga sangat mudah cukup dengan menambah sebuah widget baru.Sekian penjelasan cara membuat pop up fanspage facebook responsive di blog, jika kamu memiliki kesulitan atau ingin request artikel lainnya silahkan tulis di kolom komentar.

Jangan lupa bagikan artikel ini ya!

Berikan pendapatmu tentang artikel ini
Notification
Ini adalah popup notifikasi.
Done