Blog မွာ Facebook Comment Box ထည့္သြင္းနည္း

Wednesday, December 11, 2013

11:38 AM ဘေလာ့ႏွင့္ပါတ္သက္တာေလးမ်ား No comments

Blog မွာ Facebook Comment Box ထည့္သြင္းနည္း

အရင္ဆံုး ဘာမွမလုပ္ခင္ Template ကို Download Full Template ကတဆင့္ Backup လုပ္ထားပါ.. ဒါမွ တခုခု မွားသြားရင္ အရင္ Template ကို ဟန္မပ်က္ ျပန္တင္ေပးလို႔ရမွာပါ..။ပထမဆံုး ဒီေနရာကို သြားျပီး (မိမိ Facebook ကို Singin ဝင္ထားပါ)

Create New App ကို ႏွိပ္ပါ ..

နာမည္ေလးေတြ ေပးျပီး Continue ကိုႏွိပ္ပါ...

သူေပးထားတဲ႔ Security Code ေလးေတြ မွန္ေအာင္ ေရးထည့္ေပးျပီး Submit ကိုႏွိပ္ပါ..

ဒီ Page ေလးအတုိင္း ေပၚလာျပီဆိုရင္ App ID Key ေလးေတြကို Copy ကူးယူျပီး တေနရာရာမွာ မွတ္ထားလိုက္ပါ..။ အဓိက က အဲ့ဒီ ကိုယ္ပိုင္ ID Key ေလးေတြရဖို႔ပါ..။

ျပီးရင္ Edit Sittings ကိုႏွိပ္ပါ..။

နံပါတ္ (1) App Domins မွာ ကိုမိမိဆိုက္ဒ္က custom domain မဟုတ္ရင္ blogspot.com ကိုေရြးေပးပါ custom domain ဆိုရင္ေတာ့ တျခား သက္ဆိုင္ရာကိုေရြးေပးလိုက္ပါ.. က်ေနာ္ကေတာ့ Blogspot.com နဲ႔မို႔ blogspot.com ကိုေရြးေပးလိုက္ပါတယ္.. နံပါတ္ (2) မွာ မိမိ ဆိုက္ဒ္ ရဲ႕ လိပ္စာကို ထည့္ေပးပါ.. (3) Save Changes ကို ႏွိပ္ျပီး Save လိုက္ပါ...။

အဲ့ဒါကေတာ့ Facebook မွာ လုပ္ေပးရမဲ့ အပိုင္းျပီးသြားပါျပီ..။

ခု Blog မွာ Facebook Comment Box ေလးထည့္ဖို႔ Blog အပိုင္းကို ဆက္သြားရပါဦးမယ္...။

Blogger တိုင္း ဒီအဆင့္ေလးေတြကို လုပ္တတ္ၾကမွာပါ...

Blogger Dashboard >Design > Edit HTML ကေန Expand Widget Templates ကိုအမွန္ျခစ္ေပးျပီး Ctrl + F နဲ႔ ဒီ ကုဒ္ကို ရွာပါ

<head>

ေတြ႕ရင္ ဒီေအာက္က ကုဒ္ေလးေတြကို <head> ရဲ႕ ေအာက္ကေန ကပ္ထည့္ေပးလိုက္ပါ..

<meta content=' ေစာေစာက မွတ္ထားတဲ႔ Facebook ID ေလးကိုထည့္ေပးပါ ' property='fb:app_id'/>

Save template ကိုႏွိပ္ျပီး Save ေပးလိုက္ပါ..။

Comment Box ထည့္ဖို႔ .. Edit Template > Design > Edit HTML ကေန “Expand Widget Templates” အမွန္ျခစ္ေလးတပ္ေပးပါ..

Ctrl + F နဲ႔ ဒီေအာက္က ကုဒ္ေတြ ရွာပါ..

<p class='post-footer-line post-footer-line-3'>

(or)

 <div class='post-footer-line post-footer-line-3'>

(or)
<data:post.body/>

အဲ့ဒီ သံုးခုထဲက တခုခုကို ရွာပါ ေတြ႕ရင္ ဒီေအာက္က အျပာေရာင္နဲ႔ ကုဒ္ေတြကို ေအာက္နားကေန ကပ္ထည့္ေပးလိုက္ပါ..။ က်ေနာ္လုပ္ထားတဲ႔ အတိုင္းဆိုရင္ေတာ့ ဒီကုဒ္ရဲ႕ေအာက္မွာ ကပ္ထည့္ေပးလိုက္ပါတယ္ <div class='post-footer-line post-footer-line-3'> နမူနာကို ဒီေနရာမွာ ၾကည့္ႏိုင္ပါတယ္..။

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title'

 expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

အနီေရာင္နဲ႔ ျပထားတဲ႔ 450 နဲ႔ light ေနရာမွာ မိမိ Blog နဲ႔ ကိုက္ညီမဲ့ အက်ယ္ အဝန္း, အေရာင္ ေတြကို ျပင္ေပးႏိုင္ပါတယ္..။ light ကို dark အျဖစ္ျပင္ေပးႏိုင္ပါတယ္..။ နမူနာ အျဖစ္ ဒီေနရာမွာ ၾကည့္လိုက္ပါ...။

ျပီးရင္ Ctrl + F နဲ႔ ဒီကုဒ္ကို ရွာပါ <html ေတြ႕ရင္ ဖ်က္ပစ္ျပီး ေအာက္က ကုဒ္ေလးေတြနဲ႔ အစားထုိးေပးလိုက္ပါ...


<html xmlns:fb="https://www.facebook.com/2008/fbml"

Save template လုပ္လို႔ရပါျပီ... မေသခ်ာေသးရင္ Preview ေလးနဲ႔ ကိုယ့္ Blog ကို ျပန္ၾကည့္လိုက္ပါဦး ေသခ်ာျပီ စိတ္တိုင္းက်ျပီ ဆိုမွ Save template ကို ႏွိပ္ျပီး Save ေပးလိုက္ပါ..။

Blog မွာပါတဲ႔ Comment Box ကို ေဖ်ာက္ထားခ်င္ရင္...

Blogger > Settings > Posts and comments > Comment ကို Hide ကိုေရြးေပးျပီး Save ေပးလိုက္ပါ....။

အားလံုး အဆင္ေျပၾကပါေစ..

ဝင္းကမာၻေက်ာ္ (နည္းပညာမွတ္တမ္း)မွ ကူးယူေဖာ္ျပထားသည္...။

Wednesday, December 11, 2013