আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে 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>
<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}
#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 == "item"'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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.
এক কথায় দারুন http://mdlutfor.blogspot.com/ পক্ষ্য থেকে ধন্যবাদ
উত্তরমুছুনআপনার মূল্যবান মতামতের জন্য ধন্যবাদ।
মুছুনখুবই ভাল হয়েছে...।
উত্তরমুছুনধন্যবাদ ভাই, আমাদের সময় দেয়ার জন্য। আমরা সব সময়ই ভাল কিছু শেয়ার করার চেষ্টা করি।
মুছুন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;} -->
আপনি Css কোডগুলির আগে > চিহ্ন এবং শেষে --> চিহ্ন কেন ব্যবহার করছেন। আগে এবং পিছে থেকে ঐ লাইন দুটি ডিলিট করুন তাহলে হয়ে যাবে। তারপরও কোন সমস্যা হলে আমাদের জানাতে পারেন। ধন্যবাদ...
মুছুনআপনাকে অনেক ধন্যবাদ হারুন সাহেব, অনেক ঘাটাঘাটি করেও এই কমেন্ট ওয়েটগেট খুজে পাচ্ছিলাম না অবশেষে আপনার ব্লগে পেলাম। www.helperbus.com এ আমি এই কমেন্ট বক্স টি লাগাচ্ছি। এই দরকারি পোস্ট টা লেখার জন্য আবারো আপনাকে ধন্যবাদ।
উত্তরমুছুনআমি এই কোড আমার ব্লগে দিলে সব কিছুই ঠিক থাকছে কিন্তু ব্লগের একটি উইজেট কাজ করছে না । সেই উইজেটটি হল Popular, Comment, Archiver. সবগুলি প্রথমে চলে আসছে । আমার কথায় না বুঝতে পারলে দয়া করে লিংক http://www.freesolution.net টি ভিজিট করে দেখে আসুন ।
উত্তরমুছুনদুটির আইডি এক হয়েগেছে। আইডি এর ভিন্ন নাম দিতে হবে, তাহলে সমাধান হয়ে যাবে।
মুছুনকোন আইডি ? ফেসবুক আইডি ? আমি তো নতুন ফেসবুক আইডি তৈরী করেছি । যাই হোক আমি আবারো অন্য আইডি দিয়ে চেক করলাম সেম সমস্যা হচ্ছে ।
মুছুনআর যদি আপনি অন্য কোন আইডি এর কথা বলে থাকেন তাহলে সেই আইডি এর নাম কি এবং কোথায় পাব আর কিভাবে চেইঞ্জ করব ? একটু জানালে উপকার হবে ।
আমার মনেহয় আপনি ওয়েব ডিজাইন সম্পর্কে একদম অনভিজ্ঞ। এখানে আমি কোন ধরনের একাউন্ট এর আইডির কথা বলিনি। Multi comment box এবং Sidebar Multi tab গুলির Html ID ও Class এর কথা বলেছি। ঐ দুটির আইডি এবং সেকশনগুলি পরিবর্তন করলেই সমস্যাটি সমাধান হয়ে যাবে। ধন্যবাদ...
মুছুনআপনি ঠিক ধরেছেন । আমি ব্লগ সাইট ডিজাইনে একেবারেই নতুন । আপনারা শিখাচ্ছেন বলে বর্তমানে অনেকটা শিখে গেছি ।
মুছুন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 ?
মুছুনHTML, Css এবং JavaScript তিনটি জায়গাতেই পরিবর্তন করতে হবে।
মুছুন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.
Welcome and stay us for further posts
মুছুনThanks
উত্তরমুছুন