How To Add Facebook Comment Tab In Blogger Comment Box

ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comment Box အေပၚမွာ Facebook comment Box & Blogger Comment box ဆုိၿပီး ၂ခုတြဲ ထည့္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွာေတာ့ သုံးတဲ့သူ မရွိသေလာက္ပါပဲ လုိ႔ေျပာရင္ မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလားေတာ့ မသိဘူး။ အရမ္းလည္းေကာင္းပါတယ္၊ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed
Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ

၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

</head>

၆။ ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content='သင့္ Facebook အမည္/Your Facebook  Fanpage UserName Here' property='fb:admins'/>

<script type='text/javascript'>

function commentToggle(selectTab) {

$(".comments-tab").addClass("inactive-select-tab");

$(selectTab).removeClass("inactive-select-tab");

$(".comments-page").hide();

$(selectTab + "-page").show();

}

</script>

မွတ္ခ်က္။   ။ သင့္ Facebook အမည္/Your Facebook  Fanpage UserName Here ေနရာမွာ (ဥပမာ- http://www.facebook.com/tmblogtechnology ဆုိရင္ ေနာက္က tmblogtechnolog ကုိပဲ ထည့္ေပးပါ။  http://www.facebook.com/ ဆုိၿပီးထည့္ေပးစရာ မလုိပါ။

၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

<div class='comments' id='comments'>

၈။ မွတ္ခ်က္။   ။Edit HTMl မွာ အေပၚက Cond ၂ခု ပါရွိပါတယ္၊ ဒုတိယ ေျမာက္ Cond မွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။

<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://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.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><div class='clear'/>

</div>

<div class='comments-page' id='fb-comments-page'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='fb-root'/>

<fb:comments expr:href='data:post.url' num_posts='5' width='450'/>

</b:if>

</div>

<div class='comments comments-page' id='blogger-comments-page'>

မွတ္ခ်က္။   ။num_posts='5' width='450'/> ေနရာမွာ သင့္ ႀကဳိက္သလုိ ေျပာင္းနုိင္ပါတယ္။

၉။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

/* Comments

၁၀။ ေတြ႕ၿပီးဆုိရင္  ေအာက္မွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။

.comments-page { background-color: #f2f2f2;}

#blogger-comments-page { padding: 0px 5px; display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}

မွတ္ခ်က္။  ။ ေအာက္က ပုံအတုိင္ ထည့္ေပးပါ။

၁၁။ အားလုံး ထည့္ၿပီးရင္ Save Template ကုိ နိုပ္ေပးလုိက္ပါ။