ব্লগ পোষ্টের নিচে যুক্ত করুন Social Media Sharing Buttons

গত পোষ্টে আমি আপনাদের সাথে শেয়ার করেছিলাম কিভাবে ব্লগারে Floating Social Media Sharing Buttons যুক্ত করবেন। অবশ্য এর আগেও আমরা ঠিক একই রকম একটি পোষ্ট শেয়ার করেছিলাম। আসলে সোসিয়াল মিডিয়া শেয়ার এর মাধ্যমে খুবই সহজে অনেক ভিজিটর পাওয়া যায়, এই জন্য সোসিয়াল মিডিয়া নিয়ে বার বার পোষ্ট করতে আমার খুবাই ভাল লাগে। আজকে যেটি আপনার সাথে শেয়ার করবো এটি খুবই সুন্দর এবং সর্বশেষ আপডেট কোড দিয়ে সাজানো। আমার মনে হয় এরকম কাষ্টমাইজ করার মত সোসিয়াল মিডিয়ার শেয়ার বাটন আর কোথায় পাবেন না। আর যদিও পেয়ে থাকেন সেটি হবে বেশ পুরনো। আমি যেটি শেয়ার করছি, সেটি সোসিয়াল মিডিয়াগুলির সর্বশেষ আপডেট ভার্সন থেকে নেওয়া।

উপরের চিত্রে এই সোসিয়াল মিডিয়া বাটনগুলির ডেমো দেখতে পাচ্ছেন। আপনি যদি এর লাইভ ডেমো দেখতে চান তাহলে আমার ব্লগের পোষ্টের নিচের দিকে গেলে দেখতে পাবেন।
উপরের ছবিতে দেখতে পাচ্ছেন যে, এখানে একসাথে Facebook Send Button, Like Button, Share Button, Twitter Share Button, Google+ Share Button এবং Add This এর আরও প্রায় ৩০০ টি শেয়ারিং বাটন রয়েছে। আপনি ইচ্ছে করলে এখানে আরও অনেক বাটন যুক্ত করতে পারবেন, আর আপনার যদি কোন বাটন পছন্দ না হয়, তাহলে এখান থেকে Remove করতেও পারবেন। এটি আপনার ব্লগ পোষ্টে নিচে যুক্ত করার ফলে ভিজিটর আপনার পোষ্টটি পড়ে যদি ভাল মনে করেন, তাহলে খুব সহজে বিভিন্ন সোসিয়াল মিডিয়া সাইটে শেয়ার করতে পারবেন।

• আরও পড়ুনঃ ব্লগারে যুক্ত করুন আকর্ষণীয় Floating Social Media Sharing Buttons
• আরও পড়ুনঃ কিভাবে ব্লগে Facebook Page Plugin Widget যুক্ত করতে হয়

কিভাবে ব্লগে যুক্ত করতে হয়ঃ

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
• নিচের JavaScript কোডগুলি কপি করে </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>

নোটঃ উপরের JavaScript কোডটি ফেইসবুক এর সর্বশেষ আপডেট করা কোড। আপনি যদি আগে কখনো আপনার Blogger Template-এ এটি যুক্ত করে থাকেন, তাহলে JavaScript টি আর যুক্ত করা লাগবে না। আর যদি না করে থাকেন তাহলে অবশ্যই এটি যুক্ত করে নিবেন। কারণ এই JavaScript দিয়ে আপনি ফেইসবুক এর যাবতীয় Social Plugin আপনার ব্লগে ব্যবহার করতে পারবেন। কাজেই আমার দৃষ্টিতে এটি ব্লগার/ওয়েবসাইটের জন্য অত্যান্ত গুরুত্বপূর্ণ একটি প্লাগিন।

• এখন data:post.body কোডটি সার্চ করুন। এই কোডটি হয়তো আপনার ব্লগার টেমপ্লেটের একাধিক জায়গায় দেখতে পাবেন। আপনি সর্বশেষে যেটি পাবেন সেটিতে Try করে দেখতে পারেন। সর্বশেষটিতে না হলে ২য় টিতে Try করলে অবশ্যই হয়ে যাবে।
• উপরের অংশটির ঠিক নিচে এই কোডগুলি কপি করে পেষ্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="pro-share" style="margin-top: 10px; font-weight: bold;">
<div style='margin-right:10px;margin-top:4px; float: left; font-weight:bold;'>Share this Post</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-send" expr:href="data:post.url"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-like" expr:href="data:post.url" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-share-button" expr:href="data:post.url" data-layout="button_count"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div style='margin-right:5px;margin-top: 0px; float: left;'>
<div class="g-plusone" expr:href="data:post.url" data-size="medium"></div>
</div>

<div style='margin-left:-30px;margin-top: 0px; float: left;'> 
<a class="addthis_counter addthis_pill_style"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script></div>
</div>
</b:if>

• সবশেষে Save Template এ ক্লিক করুন। That's All.

কাষ্টমাইজেশনঃ

• উপরের লাল চিহ্নিত Share this Post হতে হেডিং পরিবর্তন করতে পারেন।
• প্রত্যেকটি বাটন এর কোড এবং স্টাইল আলাদা আলাদাভাবে ভাগ করে দেয়া আছে। ইচ্ছে করলে এখান থেকে বাটন রিমুভ করতে পারেন কিংবা স্টাইল পরিবর্তন করতে পারেন।