Facebook Popup Like Box For Blogger
ဒါကတော့မိမိရဲ့ Blog Site ကိုဝင်ရောက်ကြည့်ရှုသူတွေရောက်လာတာနဲ့အရင်ဆုံးပေါ်လာမှာကမိမိရဲ့ Facebook Like Box ပါ။အဲလိုပေါ်လာတဲ့မိမိရဲ့ Facebook Like Box ကို Like (or) close လုပ်လိုက်မှသာမိမိရဲ့ Blog Site ကိုအားလုံးမြင်ရမဲ့ပုံစံဒီဇိုင်းလေးပါ။အရမ်းကိုလှပသေသပ်လွန်းပြီးဒီဇိုင်းကနဲနဲဆန်းတယ်လို့ပြောလို့ရတယ်။Facebook Like Box ရှိပြီးသားသူရောမရှိသေးတဲသူရောမိမိရဲ့ Facebook Page ID (or) Facebook Page name ပြောင်းထည့်ပေးရုံနဲ့အသုံးပြုလို့ရသွားမှာပါ။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲမခက်ပါဘူး။ထုံးစံအတိုင်း HTML/JavaScript နဲ့ပဲပြုလုပ်ရမှာပါ။
NO(1)။ မိမိ Blog Site ကို account အရင်ဝင်ပါ
NO(2)။ dashboard ထဲက Layout ကိုနှိပ်
NO(3)။ Add a Gadget ကိုနှိပ်
NO(4)။ HTML / JavaScript ကိုနှိပ်
NO(5)။ပေါ်လာတဲ့ Box အကွက်ကြီးထဲမှာအောက်ကပေးထားတဲ့ Facebook Popup Like Box Code တွေထည့်ပေးပါ။
NO(6)။အဲဒီဂဏန်း(15) လုံးရဲ့နေရာမှာ
-----> 108140433933376 <-----
မိမိရဲ့ Facebook Page ID (or) Facebook Page name ပြောင်းထည့်ပေးပါ။
NO(7)။ save ကိုနှိပ်ပြီးပါပြီ။
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbcontainer-bg {
background: #444444;
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#close-button {
width: 100%;
height: 100%;
}
#widget-display {
background: #FFFFFF;
padding-top:7px;
padding-left:8px;
border:5px dotted #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
width: 340px;
height: 228px;
position: absolute;
top: 30%;
left: 35%;
}
#button-position {
float:right;
cursor: pointer;
position: absolute;
right: 2px;
top: 5px;
}
#button-position:before {
content: "Close";
padding: 4px 6px;
background: #000000;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Trebuchet MS;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: # BAB9B9;
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 to 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_ box') != 'yes'){
$('#fbcontainer-bg').delay(3000).fadeIn('medium');
$('#button-position, #close-button').click(function(){
$('#fbcontainer-bg').stop().fadeOut('medium');
});
}
$.cookie('popup_ box', 'yes', { path: '/', expires: 6 });
});
</script>
<div id='fbcontainer-bg'>
<div id='close-button'>
</div>
<div id='widget-display'>
<div id='button-position'>
</div>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F108140433933376%2F&tabs=timeline&width=300&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://khinmaungwin-mm.blogspot.com" rel="nofollow">KhinMaungWin</a></div>
</div>
</div>