May 2, 2015

Cara Membuat Popup Facebook Fanspage Like Box di Blog

By Romeltea | Published: May 2, 2015

Popup Facebook Fanspage Like Box
SALAH satu cara meningkatkan "likers" Fans Page Facebook adalah dengan membuat, memasang, atau menampilkan Popup Facebok Fanspage Like Box di situs web atau blog.

Popup ini akan sedikit mengganggu kenyamanan pengunjung, apalagi jika muncul terus tiap halaman. Biar tidak terlalu mengganggu, munculkan Popup Fanspage ini hanya sekali, atau di satu halaman yang dibuka, jangan tiap halaman.

Nah, kode berikut ini hanya memunculkan popup like box itu sekali saja, saat pertama kali pengunjung membuka halaman blog Anda. So, gak terlalu mengganggu 'kan?

Cara Membuat Popup Facebook Fanspage Like Box di Blog
1. Buat dulu Fans Page di Facebook2. Dapatkan URL atau username
3. Layout > Add a Gadget > HTML/Javascript
4. COPY & PASTE kode berikut ini di kolom "Content"
 
<style>#fbox-background {display: none;background: rgba(0,0,0,0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}
#fbox-close {width: 100%;height: 100%;}
#fbox-display {background: #eaeaea;border: 5px solid #828282;width: 340px;height: 230px;position: absolute;top: 32%;left: 37%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
#fbox-button {float: right;cursor: pointer;position: absolute;right: 0px;top: 0px;}
#fbox-button:before {content: "CLOSE";padding: 5px 8px;background: #828282;color: #eaeaea;font-weight: bold;font-size: 10px;font-family: Tahoma;}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {color: #aaaaaa;font-size: 9px;text-decoration: none;text-align: center;padding: 5px;}
</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_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
});</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<div class="fb-like-box" data-href="https://www.facebook.com/romelteamedia" data-width="300" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>
</div>
</div>

5. Widgetnya 'gak usah dikasih judul apa-apa. Judul biarkan kosong!
6. Ganti url Fanspage-nya dengan link page Facebook Anda.

7. Pastikan di template Anda ada kode seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, tambahkan kode itu di atas kode </head>

8. Save!
Kini, jika lancar gak ada kendala, misalnya dibekukan Kemenpora kaya PSSI, maka Popup Facebook Fanspage Like Box sudah muncul di halaman blog Anda.

Untuk blog CMS Wordpress, Anda bisa install WP Plugin Facebook Page. (http://www.romelteamedia.com).*

Sumber

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

16 comments on Cara Membuat Popup Facebook Fanspage Like Box di Blog

  1. Replies
    1. clear browsing data, atau buka dengan browser lain,
      kalo sudah pernah kebuka sekali, takkan muncul lagi

      Delete
  2. skali berapa kali munculnya om admin

    ReplyDelete
    Replies
    1. sekali saja, saat pertama kali blog dibuka, jadi tidak mengganggu user

      Delete
  3. Gan kalo muncul setiap loading page gimana gan,, ada yang di ubah??

    ReplyDelete
    Replies
    1. muncul setiap kali loading sangat mengganggu pembaca, gunakan kode di atas biar user nyaman membuka blog tanpa gangguan pop up like box

      Delete
  4. Wah gagal di blog ane om XD

    ReplyDelete
  5. cuma artikel ini yang berhasil,yang lain pada gagal :V

    ReplyDelete
  6. Bang scricpt kagak muncul :'v

    ReplyDelete
    Replies
    1. lihat poin 7, kemungkinan itu penyebabnya, soale yang lain berhasil sukses

      Delete
  7. kodenya ga bisa dicopy om...

    ReplyDelete
    Replies
    1. sudah bisa, ada kode yang lupa dihapus, silakan

      Delete
  8. kalau waktunya bisa diatur gak mas bro,,, misalnya muncul setelah 30 detik? gimana caranya mas

    ReplyDelete
  9. Oke. AKu coba praktikan scriptnya. Makasih gan....

    ReplyDelete

Contact Form

Name

Email *

Message *