কিভাবে ব্লগে 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'>
function commentToggle(selectTab) {
  $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
  $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
  $(&quot;.comments-page&quot;).hide();
  $(selectTab + &quot;-page&quot;).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:0px 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/AVvXsEh50a0Ye9JZ2t-lMiUctcDmMGk2EdmoJukqqfFflpqvkuP5UtMiPn5FXJJonFokRXnVPqKZQ56aLaTJ0rZIRcx5OGIlsazcym8GjBj-ebC0srJPfI_e6SVf0ONdJm3Z2C4d1Xx38Jb6W8V8/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='600'/>
  </div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>

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

কাষ্টমাইজেশনঃ ফেইসবুক কমেন্ট বক্সের Width পরিবর্তন করতে চাইলে উপরের 600 এর জায়গায় আপনার পছন্দ মত মাপ দিতে পারেন।

Share :

Tweet

✚

আরও কিছু পোষ্টঃ