Floating Facebook Like Box Widget

Floating Facebook Like Box Widget

ဒါက​တော့မိမိကိုယ်ပိုင် Facebook Page ရှိတဲ့သူ​တွေဆိုရင်​တော့ပိုအဆင်​​ပြေတာ​ပေါ့​နော်။ဘာဖြစ်လို့လဲဆို​တော့ Blog Site မှာမိမိရဲ့ Facebook Page Like Box ကိုထည့်သွင်းထားတဲ့ site ရှိသလိုမထည့်သွင်းထားတဲ့ site လဲရှိပါတယ်။Facebook Like Box ထည့်သွင်းထားတဲ့  site ရှိရင်အဲဒီထည့်သွင်းထားတဲ့ Facebook Like Box အတွက်သီးသန့်ကြီးနေရာ​ပေးထားရမှာပါ။အခုဒီ Floating Facebook  Like Box ဟာ​နေရာသီးသန့်ကြီး​ပေးစရာမလိုပဲ​ဘေး​ဘောင်​လေးမှာကပ်လျက်​နေ​ပေးမှာပါ။ဘယ်ညာနှစ်ဘက်စလုံးမှာမိမိကြိုက်နှစ်သက်တဲ့ဘယ်အခြမ်းမှာမဆိုထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။မိမိရဲ့ Facebook Page ID (or) Facebook Page Name ထည့်သွင်းလိုက်တာနဲ့အသုံးပြုလို့ရသွားမှာဖြစ်ပါတယ်။အောက်မှာဘယ်ညာနှစ်ဘက်စလုံးရဲ့ code (2) ခုချပြထားပါတယ်။ မိမိနှစ်သက်တဲ့ဘက်အခြမ်းက code တွေကူးထည့်ပေးပါ

NO(1)။မိမိ Blog Site ကို account အရင်ဝင်ပါ

NO(2)။ dashboard ထဲက Layout ကိုနှိပ်

NO(3)။ Add  a  Gadget ကိုနှိပ်

NO(4)။ HTML / JavaScript ကိုနှိပ်

NO(5)။ပေါ်လာတဲ့အကွက်ထဲမှာအောက်ကပေးထားတဲ့ပုံစံ (2)ခုကမှမိမိထားချင်တဲ့ဘက်အခြမ်းကိုရွှေးချယ်ကူးယူထည့်သွင်းပေးပါ

No(6)ဂဏန်း (15) လုံးနေရာတွင်

---------->    108140433933376   <----------

မိမိ Fcebook Page ID (or) Facebook Page Name ပြောင်းပေးပါ။

No(7)။ save ကိုနှိပ်ပြီးပါပြီ။

Right ( ညာဘက်)

  <style type="text/css">
#fb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #fb{position:relative;}

.fbtab{
height:160px;
width:40px;
float:left;
cursor:pointer;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuVncMsj-kuu5edJ1Fb7dL9sR1teoPHcNbwLGdDDmm4wMwadz-GYyqRp25iK5967yqWgig9Ysp_-SZlCHWm3BblveqbvITf4T-9iOC8xiv6jwsvZSyConB486A5BtVCZYeTDoWFWiAnKms/s1600/fb-right.png") no-repeat;
}
.fbcontent{

float:left;
border:4px solid #3b5998;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideFB(){
var fb = document.getElementById("fb");
var w = fb.offsetWidth;
fb.opened ? moveFB(0, 30-w) : moveFB(20-w, 0);
fb.opened = !fb.opened;
}
function moveFB(x0, xf){
var fb = document.getElementById("fb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveFB("+x+", "+xf+")", 10);}

}
</script>
<div id="fb">
<div class="fbtab" onclick="showHideFB()">   </div>
<div class="fbcontent">


<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F108140433933376%2F&tabs=timeline&width=250&height=300&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="250" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div style="text-align:right">
<a href="javascript:showHideFB()">

</a>
</div>
</div>
</div>
<script type="text/javascript">
var fb = document.getElementById("fb");
fb.style.right = (30-fb.offsetWidth).toString() + "px";
</script>

Left ( ဘယ်ဘက် )

 
 <style type="text/css">
#fb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #fb{position:relative;}

.fbtab{
height:160px;
width:40px;
float:right;
cursor:pointer;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsuj9Ye9Q8xfuCEWRlt3Tf_0aLpWQho4S-g11Ex-XzoDpzFwUiXAWYGG38LRvnO07_v9OBl1L4l8AUznOiuj-WmbR-L6QGvhxharMVuKpvzO3tRygRBnPCBKCO11g-vaf0Fc2wA8HAmmN6/s1600/fb-left.png") no-repeat;
}
.fbcontent{

float:right;
border:4px solid #3b5998;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideFB(){
var fb = document.getElementById("fb");
var w = fb.offsetWidth;
fb.opened ? moveFB(0, 30-w) : moveFB(20-w, 0);
fb.opened = !fb.opened;
}
function moveFB(x0, xf){
var fb = document.getElementById("fb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fb.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveFB("+x+", "+xf+")", 10);}

}
</script>
<div id="fb">
<div class="fbtab" onclick="showHideFB()">   </div>
<div class="fbcontent">


<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F108140433933376%2F&tabs=timeline&width=250&height=300&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="250" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div style="text-align:left">
<a href="javascript:showHideFB()">

</a>
</div>
</div>
</div>
<script type="text/javascript">
var fb = document.getElementById("fb");
fb.style.left = (30-fb.offsetWidth).toString() + "px";
</script>