আমরা পূর্বে এ ধরনর একটি Floating Twitter Box আপনাদের সাথে শেয়ার করেছিলাম। এখন ঠিক একই রকমের Facebook Widget শেয়ার করতে যাচ্ছি। Floating Facebook Like Box ব্লগ এবং ওয়েবসাইটের জন্য খুবই জনপ্রিয় একটি Widget. এটির সাহায্যে Facebook হতে আপনার ব্লগে ভিজিটর বাড়ীয়ে নিতে সাহায্য করবে। তাছাড়া এটি ব্যবহার করার ফলে আপনার ব্লগের সুন্দর্যও বৃদ্ধি পাবে। এই ধরনের উইজেট প্রফেশনাল ওয়েবসাইট থেকে শুরু করে বিভিন্ন পার্সোনাল ব্লগেও ব্যবহার করতে দেখা যায়।

ব্লগে যুক্ত করুন আকর্ষণীয় Floating Facebook Page Like Box

এ ধরনের Widget বিভিন্ন ব্লগে দেখতে পাবেন, তবে সেগুলি বেশ পুরনো হওয়াতে এখন আর কাজ করছে না। কারণ আপনারা হয়তো জানেন যে, Facebook এখন আগের Like Box এর স্টাইল পরিবর্তন করেছে। সে জন্য পুরনোগুলিতে এখনকার Facebook Like Box টি Adjust হচ্ছে না। এটি সম্পূর্ন আপডেট ভার্সনের সাথে ম্যাচিং করা। কাজেই এটিতে কোন প্রকার ঝামেলা পোহাতে হবে না।

এই উইজেটটি Blogger ও WordPress দুই ধরনের ব্লগেই ব্যবহার করতে পারবেন। এটি সাধারনত ব্লগের ডান পাশে হাইড করা অবস্থা থাকবে, কিন্তু যখন আপনার কম্পিউটার মাউস এটির উপরের ধরবেন, তখন সাথে সাথে স্লাইডিং করে বেরিয়ে আসবে। কাজেই এটি যে কোন ভিজিটরের মনোযোগ আকর্ষণ করতে সক্ষম হবে। লাইভ ডেমো দেখুন - Live Demo

কিভাবে ব্লগে যুক্ত করবেন?

প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html ক্লিক করুন।
এরপর </body> ট্যাগটি সার্চ করুন।
এখন নিচের কোডগুলি </body> ট্যাগের উপরে পেষ্ট করুন।

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

এরপর Save Template এ ক্লিক করে বেরিয়ে আসুন।
তারপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।

তারপর HTML/JavaScript এ ক্লিক করুন।
এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।

<style type="text/css">
img,a {border:0}
#facebook-floating {visibility:visible}
#pro-facebook-right {z-index:10004; background-color:#3a5795; border:2px solid #3a5795; position:fixed;right:-250px}
.pro-facebook {width:100%; height:100%; overflow:hidden; margin:1px 0 0 0px}
.pro-facebook-img {position:absolute; top:-2px; left:-35px; border:0}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function(){ jQuery("#pro-facebook-right").hover(function(){
jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){
jQuery("#pro-facebook-right").stop(true,false).animate({right: -304}, 500); });});
</script>

<div id="facebook-floating">
<div id="pro-facebook-right" style="top:20%; right:-304px;">
<div class="pro-facebook">
<img class="pro-facebook-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6QeL-tTgMYvU610eYqOyYj8RBhkSVrlioW8J8-WrL5OxDstanr7u4ZyypWZVDptbms7rf1OxY7RQ30hJv4pkQ6YAMUR7E9Aw5xhhkml9wow6L1r5Rt71G9WEEh1x6X8UmZN5oAYZfU01/s1600/facebook.png" />
<div class="fb-page" data-href="https://www.facebook.com/prozokti" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
</div>
</div>
</div>