ব্লগে Facebook এবং Blogger Multi Tab কমেন্ট সিস্টেম যুক্ত করুন

আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে Facebook Comment Boxযুক্ত করবেন। আজ আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগে Multi Tab সিস্টেমের মাধ্যমে এক সাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহার করবেন। এর ফলে আপনার ভিজিটররা তাদের পছন্দ অনুযায়ি যে কোন কমেন্ট বক্স ব্যবহার করে তাদের মতামত ব্যক্ত করতে পারবেন। নরমালি যদিও দুটি কমেন্ট বক্স একসাথে ব্যবহার করা যায়, তারপরও সেখানে কিছু সমস্যা থেকে যায়। কারণ নরমালি দুটি কমেন্ট বক্স যুক্ত করলে একসাথে দুটি কমেন্ট বক্সই শো করবে। আর এই মাল্টি ট্যাব সিস্টেম ব্যবহার করার ফলে একটি ট্যাব সব সময় উজ্জ থাকবে। যেমন-Facebook কমেন্ট বক্স ব্যবহার করার সময় Blogger কমেন্ট বক্সটি উজ্জ থাকবে, আর Blogger কমেন্ট বক্স ব্যবহার করার সময় Facebook কমেন্ট বক্সটি উজ্জ থাকবে। তাছাড়াও উভয় ট্যাবেই কমেন্ট কাউন্ট করার সিস্টেম যুক্ত করে দেওয়া আছে। ফলে যে কেউ সহজে বুঝতে পারবে আপনার পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে।

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

• প্রথমে ফেইসবুক একাউন্টে লগইন করে একটি Facebook App ID তৈরী করে নিতে হবে। আপনার যদি Facebook App ID না থাকে তাহলে এখান থেকে Facebook App ID তৈরী করে নিতে পারেন।
• তারপর আপনার ব্লগার একাউন্টে লগইন করুন।
• এরপর Template > Edit Html এ ক্লিক করুন।
• তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন নিচের কোডগুলি </head> ট্যাগের উপরে পেষ্ট করুন।

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Your_Facebook_App_ID' property='fb:app_id'/>
<script type='text/javascript'>
//<![CDATA[
function commentToggle(selectTab) {
 $(".comments-tab").addClass("inactive-select-tab");
 $(selectTab).removeClass("inactive-select-tab");
 $(".comments-page").hide();
 $(selectTab + "-page").show();
}
//]]>
</script>

• উপরের লাল চিহ্নিত অংশে আপনার Facebook এর App ID বসিয়ে দিন।
• এখন পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি ]]></b:skin> ট্যাগের উপরের পেষ্ট করুন।
  

.comments-page{background-color:#FFF;border:1px dotted #93DAF8;border-radius:10px;margin-top:5px}
#blogger-comments-page{padding:0 5px;display:none}
.comments-tab{float:left;padding:5px;margin-right:3px;cursor:pointer;background-color:#b5e5fa;border-radius:2px}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#eeeeee}
.inactive-select-tab{background-color:#d1d1d1}

• এখন আবার কিবোর্ড হতে Ctrl+F চেপে <b:include data='post' name='post'/> ট্যাগটি সার্চ করুন এবং নিচের কোডগুলি এই ট্যাগটির নিচে পেষ্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
   <img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAB_j08UK4F_f5k8eRf74pH5fmTV8BkhDip945bNVwaXNZq4P4o8ARVztJFCY_eDrAFRUR17LPDQe6shta3uxoNbWrzKr9j5wJN1Zkgr6rwIkFfwPAJTmMzy0MmPSmGkbFDFaK7Itg7vQ/s1600/FB.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
  </div>
 <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
  <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
 </div></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='comments-page' id='fb-comments-page'>
   <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='100%'/>
  </div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>

• এরপর Save Template এ ক্লিক করলেই কাজ OK. 

সাহায্য জিজ্ঞাসাঃ ব্লগে একসাথে Facebook এবং Blogger দুটি কমেন্ট সিস্টেম ব্যবহার করার সবচাইতে সহজ পদ্ধতীটি আপনাদের সাশে শেয়ার করেছি। কারো যদি কোন অংশ বুঝতে অসুবিধা কিংবা সমস্যা হলে আমাদের-কে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যার সমাধান দেয়ার জন্য যথাসাধ্য চেষ্টার করব।