Riau Spirit: Seni dan Budaya Indonesia: Cara Menambahkan Pop Up Like Box Facebook

.Cara Menambahkan Pop Up Like Box Facebook

Untuk meningkatkan jumlah Facebook like pada Facebook fans page (Halaman Facebook) dapat dilakukan dengan berbagai cara, salah satunya yaitu dengan memasang widget like box yang muncul secara popup pada Blog. Lalu bagaimana cara membuatnya? Sesuatu yang kelihatan istimewa dan dilakukan dengan kerumitan tekhnologi? Ternyata tidak sesusah itu....

Ada beberapa cara diantaranya yaitu:

1. Popup Facebook Like Box menggunakan versi Lightbox.

2. Popup Facebook Like Box menggunakan jQuery , keistimewaannya loadingnya pun akan lebih cepat jika dibandingkan dengan yang menggunakan versi Lightbox.

Kali ini kita langsung saja membahas Popub Facebook Like dengan menggunakan jquery:

Untuk praktek anda langsung saja , paste kode berikut di widget HTML/JavaScript:

<!—Widget Share Button Melayang http://riauspirit.blogspot.co.id Start-->

<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:// https://lh4.googleusercontent.com/-snYls7Xm9Ms/Vlu2PEGQbtI/AAAAAAAANx0/eQN9aahEUkQ/s56-no/riauspirit%2Bfanclose.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>

//<![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>

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 });

});

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="https://www.facebook.com/SketsaWajahPekanbaru/?sk=allactivity" data-width="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" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div>

<!—Widget Share Button Melayang http://riauspirit.blogspot.co.id End-->

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

Hasil dari langkah diatas seperti gambar dibawah ini:
Silahkan Klick untuk Demo

Konfigurasi Popup Facebook Like Box

Pertama ganti https://www.facebook.com/bersosial dengan alamat Facebook fans page Anda.

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5";

fjs.parentNode.insertBefore(js, fjs);

Dapatkan Facebook Like Box di atas anda silahkan mengunjungi https://developers.facebook.com/docs/plugins/like-box-for-pages (Untuk masuk keLink ini cukup Klick Link diatas atau pastekan Link keBrowser anda)

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 });

Jika anda mengalami kesulitan dengan cara pemasangan widget popup ini, silahkan hubungi saya di Contact.

RELATED POST

d

ddddd

Cara Menambahkan Pop Up Like Box Facebook - II

Konfigurasi Popup Facebook Like Box

Cek Juga :

Cek Juga :

Lukisan Dinding 3 Dimensi