1997: Tutorial : Pasang Popup Facebook Like Box Widget dalam Blog

Tutorial : Pasang Popup Facebook Like Box Widget dalam Blog

01 May 2015

Kebanyakan blogger akan ada satu Facebook Page untuk Blog dia sendiri untuk memudahkan communication antara mereka dengan readers. Readers can directly contact the blogger melalui facebook page ni so no need untuk bernegosiasi di Chatbox atau Comment section kan.

Terdapat banyak cara untuk paparkan Laman web facebook ni dalam blog kita. just attach dekat sidebar. Gantung dekat top of our blog. Or buat popup box untuk Facebook Like widget ni!


Macam dekat atas ni. Contoh popup Facebook Like Widget yang dipasang dalam blog aku. How cool is that haha!

Follow the steps to make one.

1) Buka Dashboard > Layout > Add Gadget > HTML/Javascript

2) Copy & paste code bawah ni dalam ruangan HTML/Javascript tu.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<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: 210px;
    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;
}
</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');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fizztazhr%2F1645913139019855&width=340&height=230&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 340px; height: 210px;'></iframe>
</div>
</div>
Settings:
- Tukar http%3A%2F%2Fwww.facebook.com%2Fpages%2Fizztazhr%2F1645913139019855 kepada korang punya facebook page Url.
- Widget ni akan appear dalam 5 saat after blog korang fully loaded. Kalau nak tukar just tukar nilai 5000 dekat "delay(5000)" kepada nilai korang.
- Widget ni akan muncul sekali je for each user or unique visitors. Kalau nak widget ni keluar everytime new tab dibuka, buang code $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });.

3) Click save. Then view blog korang to witnesses the coolness of this widget. Haha!

So now that you got your facebook popup likebox apa kata go hit my Facebook like button ngeh ngeh ngeh

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...