ভাসমান শেয়ার বক্স তৈরি করুন আপনার সাইটের জন্য (ফেসবুক লাইক, টুঁইটার ও গুগল+ ১)

আমাদের এই (TutorialFor.Me) সাইটে শেয়ার করার জন্য বাম দিকে আমারা কয়েকটা শেয়ার বাটন দেখতে পায় যা ব্যবহারযোগ্য ও সুবিধা জনক।  অনেকেই আমাকে প্রশ্ন করেছেন যে এই শেয়ার বাটন গুলো কিভাবে করেছেন বা কোন প্লাগিন আছে? ইত্যাদি ইত্যাদি। তাই আজকে আমি সেই সকল গ্রাহকদের জন্য এই টিউটোরিয়াল লেখা শুরু করলাম। যাতে করে সবাই নিজেদের ওয়ার্ডপ্রেস সাইটে (অন্যান্য সাইটেও) ব্যবহার করতে পারেন।

শেয়ার বক্স-এ কি কি বাটন যুক্ত করবো?

শেয়ার বাটন এ আমারা চাইলে অনেক বাটন যুক্ত করতে পারি কিন্তু সেক্ষেত্রে দেখা যাবে সাইটের শেয়ার বক্সটি অনেক বড় ও স্ক্রিপ্ট গুলো লোড হতে বেশ সময় নিবে, সেই কারনেই সাইটও দেরিতে খুলবে। তাই আমারা বেশ কয়েকটা জনপ্রিয় সামাজিক যোগাযোগ মাধ্যম এর শেয়ার বাটন গুলো তৈরি করবো। যেমনঃ ফেসবুক, গুগল+ ও টুঁইটার।

শেয়ারিং কোড গুলো সংগ্রহঃ

উপরের লিংক গুলো থেকে আপনাকে শেয়ার বাটন তৈরি করার জন্য সকল কোড গুলো সংগ্রহ করতে হবে। তবে আমি সমস্যা নাই আমি নিচে আপনাদের জন্য কোডিং করেই দিয়েছি তাই সংগ্রহ না করলেও হবে, যদি আপনি উন্নত শেয়ার বাটন তৈরি করার চেস্টা করেন তাহলে উপরের লিংক গুলো আপনার জন্য প্রয়োজনীয়।

ভাসমান শেয়ার কোড লিখুনঃ

আমি উপরেই বলছি আমারা ৩টা (ফেসবুক, গুগল+ ও টুঁইটার) সামাজিক যোগাযোগ ব্যবস্থার শেয়ার বাটন গুলো আমাদের সাইটে ভাসমান আকারে যুক্ত করবো। তাই আমি সেই ভাবে ভাসমান শেয়ার বক্স এর জন্য নিচের কোড গুলো লিখেছি।

হেডারে জাভাস্ক্রিপ্ট যুক্তঃ
আপনার সাইটের থিম ফোল্ডার এর মধ্যে header.php ফাইল ওপেন করুন এবং সেই ফাইলের মাঝে খুজুন

</head>

এবং এর উপরে (আগে) নিচের কোডগুলো বসিয়ে দিন।

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

ভাসমান শেয়ার বক্স এর কোডঃ
আপনার থিম ফোল্ডার এর মধ্যে single.php ওপেন করুন এবং সেখানে

 <?php the_content(); ?> 

এই কোডটি খুজে বের করুন এবং তার পরে নিচের কোড গুলো কপি করে বসিয়ে দিন অথবা বসিয়ে দিন।

<!-- Float Sharing Box Starts -->
<div class='float-share'>

   <div class='fbfloat-share float-widget'>
    <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&send=false&layout=box_count&width=46&show_faces=true&action=like&colorscheme=light&font=arial&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:46px; height:65px;" allowTransparency="true"></iframe>
   </div>

   <div class='gplfloat-share float-widget'>
	<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
   </div>

   <div class='twfloat-share float-widget'>
    <a href="http://twitter.com/share" class="twitter-share-button" data-text='<?php the_permalink(); ?>' data-via="TutorialFor.Me" data-count="vertical" data-related="TutorialFor.Me:Tutorial Site">Tweet</a>
   </div>

</div>
<!-- Float Sharing Box End -->

স্টাইল করতে সিএসএস এর ব্যবহার

উপরের কাজ গুলো ধাপ গুলো ঠিক ভাবে অনুসরণ করতে পারলে আপনি আপনার সাইটের যেকোনো একটি পোস্ট ওপেন করে দেখুন দেখবেন আপনার পোস্ট এর সকল লেখার নিচে শেয়ার বাটন গুলো প্রদর্শিত হচ্ছে তবে এলো-মেলো ভাবে। তাই সেগুলো ঠিক করার জন্য এবার আমরা একটু সিএসএস এর ব্যবহার করবো। আমি নিচে সিএসএস কোড গুলো দিয়ে দিলাম সেই কোড গুলো কপি করে আপনার থিমের style.css ফাইলে যুক্ত করে দিন। এবং আপনার সাইট পুনরায় লোড করুন।

/* Floating Share Widget */
.float-share {
width : 80px;
padding : 10px 0;
padding-bottom : 0;
background : #ffffff;
border : 1px solid #d2d2d2;
border-radius : 8px;
text-align : center;
position : fixed;
top : 229px;
left : auto;
z-index : 15;
margin: 0 0px 0 -135px;
}
.float-widget {
margin-bottom : 10px;
}

ব্যাস হয়ে গেলো আপনার সাইটেও একটি ভাসমান শেয়ার ব্যবস্থা। আশা করি এই টিউটোরিয়াল টি দেখে আপনারা সহজ ভাবে আপনাদের সাইটে ভাসমান শেয়ার ব্যবস্থা যুক্ত করতে পারবেন। যদি কোন সমস্যা হয় তাহলে মন্তব্যের ঘরে জানাবেন।

-ধন্যবাদ!