১২ এপ্রিল, ২০১৫

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

ব্লগে Facebook এবং Blogger Multi Tab কমেন্ট সিস্টেম যুক্ত করুন
4/ 5 stars - "ব্লগে Facebook এবং Blogger Multi Tab কমেন্ট সিস্টেম যুক্ত করুন" আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে Facebook Comment Box যুক্ত করবেন। আজ আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগে Multi Ta...
-
আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে Facebook Comment Box যুক্ত করবেন। আজ আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগে Multi Tab সিস্টেমের মাধ্যমে এক সাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহার করবেন। এর ফলে আপনার ভিজিটররা তাদের পছন্দ অনুযায়ি যে কোন কমেন্ট বক্স ব্যবহার করে তাদের মতামত ব্যক্ত করতে পারবেন। নরমালি যদিও দুটি কমেন্ট বক্স একসাথে ব্যবহার করা যায়, তারপরও সেখানে কিছু সমস্যা থেকে যায়। কারণ নরমালি দুটি কমেন্ট বক্স যুক্ত করলে একসাথে দুটি কমেন্ট বক্সই শো করবে। আর এই মাল্টি ট্যাব সিস্টেম ব্যবহার করার ফলে একটি ট্যাব সব সময় উজ্জ থাকবে। যেমন-Facebook কমেন্ট বক্স ব্যবহার করার সময় Blogger কমেন্ট বক্সটি উজ্জ থাকবে, আর Blogger কমেন্ট বক্স ব্যবহার করার সময় Facebook কমেন্ট বক্সটি উজ্জ থাকবে। তাছাড়াও উভয় ট্যাবেই কমেন্ট কাউন্ট করার সিস্টেম যুক্ত করে দেওয়া আছে। ফলে যে কেউ সহজে বুঝতে পারবে আপনার পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে।
Blogger Multi Comment System
কি ভাবে যুক্ত করতে হয়ঃ
  • প্রথমে ফেইসবুক একাউন্টে লগইন করে একটি 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='http://1.bp.blogspot.com/-iVjviy2-71E/VSepyTP7WsI/AAAAAAAAD_w/3GTM7GGmQKQ/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 দুটি কমেন্ট সিস্টেম ব্যবহার করার সবচাইতে সহজ পদ্ধতীটি আপনাদের সাশে শেয়ার করেছি। কারো যদি কোন অংশ বুঝতে অসুবিধা কিংবা সমস্যা হলে আমাদের-কে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যার সমাধান দেয়ার জন্য যথাসাধ্য চেষ্টার করব।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

16 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. এক কথায় দারুন http://mdlutfor.blogspot.com/ পক্ষ্য থেকে ধন্যবাদ

    উত্তরমুছুন
    উত্তরগুলি
    1. আপনার মূল্যবান মতামতের জন্য ধন্যবাদ।

      মুছুন
  2. উত্তরগুলি
    1. ধন্যবাদ ভাই, আমাদের সময় দেয়ার জন্য। আমরা সব সময়ই ভাল কিছু শেয়ার করার চেষ্টা করি।

      মুছুন
  3. Vaia nicher code ta blog amar blog examtunes.blogspot.com er upore show korse. shob hizivizi hoye gese plz help
    shob thikthak vabe customize koresi tao emn keno hosse
    Amake fb te ekto time fiben fb.com/4s1fkh4n

    > .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;} -->

    উত্তরমুছুন
    উত্তরগুলি
    1. আপনি Css কোডগুলির আগে > চিহ্ন এবং শেষে --> চিহ্ন কেন ব্যবহার করছেন। আগে এবং পিছে থেকে ঐ লাইন দুটি ডিলিট করুন তাহলে হয়ে যাবে। তারপরও কোন সমস্যা হলে আমাদের জানাতে পারেন। ধন্যবাদ...

      মুছুন
  4. আপনাকে অনেক ধন্যবাদ হারুন সাহেব, অনেক ঘাটাঘাটি করেও এই কমেন্ট ওয়েটগেট খুজে পাচ্ছিলাম না অবশেষে আপনার ব্লগে পেলাম। www.helperbus.com এ আমি এই কমেন্ট বক্স টি লাগাচ্ছি। এই দরকারি পোস্ট টা লেখার জন্য আবারো আপনাকে ধন্যবাদ।

    উত্তরমুছুন
  5. আমি এই কোড আমার ব্লগে দিলে সব কিছুই ঠিক থাকছে কিন্তু ব্লগের একটি উইজেট কাজ করছে না । সেই উইজেটটি হল Popular, Comment, Archiver. সবগুলি প্রথমে চলে আসছে । আমার কথায় না বুঝতে পারলে দয়া করে লিংক http://www.freesolution.net টি ভিজিট করে দেখে আসুন ।

    উত্তরমুছুন
    উত্তরগুলি
    1. দুটির আইডি এক হয়েগেছে। আইডি এর ভিন্ন নাম দিতে হবে, তাহলে সমাধান হয়ে যাবে।

      মুছুন
    2. কোন আইডি ? ফেসবুক আইডি ? আমি তো নতুন ফেসবুক আইডি তৈরী করেছি । যাই হোক আমি আবারো অন্য আইডি দিয়ে চেক করলাম সেম সমস্যা হচ্ছে ।
      আর যদি আপনি অন্য কোন আইডি এর কথা বলে থাকেন তাহলে সেই আইডি এর নাম কি এবং কোথায় পাব আর কিভাবে চেইঞ্জ করব ? একটু জানালে উপকার হবে ।

      মুছুন
    3. আমার মনেহয় আপনি ওয়েব ডিজাইন সম্পর্কে একদম অনভিজ্ঞ। এখানে আমি কোন ধরনের একাউন্ট এর আইডির কথা বলিনি। Multi comment box এবং Sidebar Multi tab গুলির Html ID ও Class এর কথা বলেছি। ঐ দুটির আইডি এবং সেকশনগুলি পরিবর্তন করলেই সমস্যাটি সমাধান হয়ে যাবে। ধন্যবাদ...

      মুছুন
    4. আপনি ঠিক ধরেছেন । আমি ব্লগ সাইট ডিজাইনে একেবারেই নতুন । আপনারা শিখাচ্ছেন বলে বর্তমানে অনেকটা শিখে গেছি ।

      মুছুন
    5. ai " .comments-page >> div class='comments-page' id='fb-comments-page'>" Class guli Change Korle hobe ? Jemon:- Ami Jodi ".comments-page K .comments-page10 dara poriborton kore dei. R er pore jodi ekhaneo jodi "<div class='comments-page10' " change kore dei tahole ki hobe ? naki onno id change korte hobe ?

      মুছুন
    6. HTML, Css এবং JavaScript তিনটি জায়গাতেই পরিবর্তন করতে হবে।

      মুছুন
  6. Thanks For sharing. Its look there are new & very Important Artical Here.
    This blog help me very Much. Thanks again.
    Go Ahead, we are always with You. and Share More & More Updates Like This.

    উত্তরমুছুন

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: