অনেক সাইটে দেখবেন একটি শেয়ারিং বার থাকে। যেটা Floating অবস্থায় থাকে। অর্থাৎ আপনি স্ক্রল করলেও এটা একই যায়গায় থাকবে। আপনারা অনেকেই হয়ত এটা ব্যবহার করেছেন। কিন্তু সব সময় মন মত কোড পাওয়া যায় না। এক এক সাইটে এক এক ধরণের কোড থাকে। কোনটায় হয়ত ফেসবুক আছে কিন্তু ডিগ নেই। আবার ডিগ আছে জি+ নেই।

আজ আপনাদের সাথে যে কোডটি শেয়ার করব তাতে ৭ টি বাটন এক সাথে পাবেন। Facebook, G+, Digg, Stumbleupon, Tweet ইত্যাদি।

যাদের HTML এর ব্যাপারে মোটামুটি কাজ চালানোর মত জ্ঞান আছে তারা এই কোডটি মন মত মডিফাই করে নিতে পারবেন। চাইলে ২/১ টা বাটন বাড়াতে বা কমাতেও পারবেন। আবার চাইলে বাম দিক থেকে ডান দিকে নিয়ে যেতে পারবেন। অবস্থান পরিবর্তন করে নিতে পারবেন।

এখান থেকে Demo দেখে নিতে পারেন

আগেই বলে নেই কিভাবে ইন্সটল করবে। নিচের কোডটা Just আপনার সাইটের যায়গামত বসিয়ে দিবেন। যেভাবে অন্যান্য HTML/JavaScript ব্যবহার করেন। ব্লগাররা  Dashboard/ Design > Layout > Add a Gadget > HTML/ Java > Copy Paste  > Save এই পদ্ধতিতে কাজ করবেন। আর WordPress/Others সাইটের মালিকরা নিজেরাই জানার কথা কিভাবে কি করবেন। আমি জানি না!  🙂

এবারে কোডটি দেখুন-

<!--SideBar Floating Share Buttons Code Start-->

<style>#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px0;z-index:10;}#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}.fb_share_count_top {width:48px !important;}.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style><div id='pageshare' title="Share This With Your Friends">

<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a></a></div>

<div class='sbutton' id='rt'><a href="http://twitter.com/share" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='floatbutton' id='linkedin'><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="top"></script></div>

<div id="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script><!-- AddThis Button BEGIN --><div><a></a></div>

<!--SideBar Floating Share Buttons Code End--></div></div>

বুঝার সুবিধার্থে কোডগুলো আলাদা আলাদা করে দেওয়া হয়েছে। এতে করে আপনি সহজেই বুঝতে পারবেন কোনটা কোন কোড। আর বাদ দেয়া বা যোগ করাও সহজ হবে।

এর আগে লিখেছিলাম এখানে-

Floating Share Buttons: 7 Buttons!