Cara Memasang Wigdet Facebook Like Box Berbentuk Popup

Pelbagai cara digunakan untuk meningkatkan jumlah facebook like di fan page masing-masing. Antara yang paling popular ialah dengan memasang widget facebook like box dan ianya berbentuk popup. Mungkin dikalangan pemilik ingin menggunakan cara yang saya maksudkan ini tetapi tidak mengetahui bagaimana caranya. Sebenarnya tidak susah, anda perlu copy sahaja script di bawah ini.

Popup Like box menggunakan jQuery jadi loadingnya lebih cepat daripada kita menggunakan versi yang disediakan oleh facebook iaitu Lightbox.

Paste kan script di bawah ini ke dalam widget HTML/javascript. Jika template anda telah mempunyai jquery, jadi tidak perlu menambahkan script jQuery lagi.

<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(5000).fadeIn('medium');

    $('#fanclose, #fan-exit').click(function(){

      $('#fanback').stop().fadeOut('medium');

    });

  }

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

});

</script>

</code><br />

<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/Pagerossaimi&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;header=false" style="border: none; height: 230px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div>

</div>

Perkara seterusnya yang perlu anda lakukan ialah:

  1. Gantikan https://www.facebook.com/Pagerossaimi kepada alamat facebook fanpage anda
  2. Secara default widget ini akan muncul selepas 5 saat  proses loading tamat. Anda boleh ubah ke angka yang lebih besar. Cari angka 5000 pada script di bawah ini dan ubah ke angka yang lebih besar.
  3. $('#fanback').delay(5000).fadeIn('medium');
  4. Cookie expire untuk set default ini disetkan kepada 7 hari. Ini bermakna pengunjung yang sama mengunjungi blog tidak akan melihat popup ini dalam masa tujuh hari. Selepas 7 hari, barulah popu like box ini akan kelihatan lagi. Anda boleh mengubah angka tersebut mengikut keinginan anda.
  5. $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });

Sekian terima kasih. Sekiranya ada pertanyaan sila ajukan di ruangan komen.

5 Comments

  1. Sentiasa Panas Mac 9, 2015
    • Blogger Pontian Mac 11, 2015
  2. Mohd Selim Zainal Mac 12, 2015
  3. Apotek Herbal ACE MAXS Mac 31, 2015

Leave a Reply