Thursday 28 March 2013

ဘေလာ့ဂါမွာ Facebook Comment Box ေလးထည့္နည္း


              အခု ဘေလာ့ဂါဆိုဒ္ေတြအကုန္လံုးမွာ Facebook Account ေလးနဲ႕ ကြန္မန္႕ေပးလို႕ ရေနပါျပီ။မိမိတို႕ ဘေလာ့ဂါဆိုဒ္ေလးမွာည္း အဲ့လိုကြန္မန္႕ေပးလို႕ရေအာင္ Facebook Comment Box ေလးထားခ်င္ၾကမွာပါ။နည္းနည္းေလးေတာ့ ရႈပ္တယ္ဆိုေပမယ့္ သူ႕အဆင့္နဲ႕သူ တစ္ဆင့္ျခင္းသြားတာပါ။ကဲ ... ကြၽန္ေတာ္တို႕ စမ္းလုပ္ၾကည့္ရေအာင္ ..... ။

အရင္ဆံုး Facebook Developers Page ကို သြားလိုက္ပါ။




Creat New App ဆိုတဲ့ Box ေလးတစ္ခုက်လာပါလိမ့္မယ္။က်လာတဲ့ ေဘာက္စ္ေလးထဲက App Name နဲ႕ App Namespace တို႕မွာ မိမိတို႕ရဲ့ ဘေလာ့နာမည္ေလးေတြထည့္ျပီး Continue ကိုႏွိပ္လိုက္ပါ။
Valid နဲ႕ Avalable ျဖစ္ဖို႕လိုအပ္ပါတယ္။


Security Check Required မွာ သူေပးထားတဲ့စာလံုးေလးေတြကို မွန္ေအာင္ ေရးထည့္ေပးပါ။


အဲ့ဒါဆိုရင္ အခုလိုမ်ဳိး Facebook App ID ရသြားပါျပီ။မပိတ္နဲ႕ဦးေနာ္။ပီးရင္ Edit Settings ကိုသြားပါ။App Domains နဲ႕ Site URL ဆိုတဲ့ေနရာႏွစ္ခုမွာ မိမိတို႕ဘေလာ့ဆိုဒ္ရဲ့လိပ္စာေလးထည့္ေပးျပီး Save လုပ္လိုက္ပါ။အခုဆိုရင္ ကြၽန္ေတာ္တို႕ Facebook ဘက္က အပိုင္းေလးျပီးသြားပါျပီ။ဒါေပမယ့္ မပိတ္နဲ႕ဦးေနာ္။ကြၽန္ေတာ္တို႕ App ID ေလးကို လိုရင္လိုသလို သြားသြားကူးယူရဦးမွာမို႕ပါ။

Facebook ဘက္က အလုပ္ေတြျပီးသြားျပီဆိုေတာ့ ကြၽန္ေတာ္တို႕ ဘေလာ့ဂါဘက္က လုပ္စရာရွိတာေတြဆက္လုပ္ပါမယ္။အဲ့ဒီအတြက္ မိမိတို႕ ဘေလာ့ဂါကိုဝင္ဖြင့္လိုက္ပါ။
Templates ကိုဝင္ Edit Html ကိုသြားျပီး Expand Widget Templates မွာ အမွန္ေလးျခစ္ေပးပါ။ျပီးရင္ Ctrl + F အကူအညီျဖင့္ <html ဆိုတာကိုရွာလိုက္ပါ။
ေတြ႕ျပီဆိုရင္ ကြၽန္ေတာ္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးနဲ႕ အစားထုိးေပးလိုက္ပါ။

<html xmlns:fb='http://www.facebook.com/2008/fbml'

ျပီးရင္ <body> ကိုရွာပါ။သူ႕ကိုမေတြ႕ရင္ ေအာက္ကကုဒ္ေလးကို ရွာၾကည့္လိုက္ပါ။

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>



ေတြ႕ျပီဆိုရင္ ေအာက္မွာ က်ေနာ္ေပးထားတဲ့ ကုဒ္ေတြကို သူ႕ရဲ့ ေအာက္မွာ ထည့္ေပးလိုက္ပါ။
အဲ့ဒီမွာ ျပင္စရာရွိပါတယ္။ကြၽန္ေတာ္ အဝါေရာင္ေလးနဲ႕ျပထားတဲ့ေနရာေလး။အဲ့ဒီေနရာေလးမွာ မိမိတို႕ App ID ေလးထည့္ေပးလိုက္ပါ။


<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;YOUR_APP_ID&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to
access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect
.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).
appendChild(e);
}());
</script>                                                                              

ျပီးရင္ </head> ဆိုတာေလးကို ထပ္ရွာလိုက္ပါဦး။ေတြ႕ျပီဆိုရင္ ကြၽန္ေတာ္ေအာက္မွာေပးထားတဲ့ကုဒ္ေလးေတြကို သူ႕ေအာက္မွာ ထည့္ေပးလိုက္ပါ။


<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='Maubintharlay' property='og:site_name'/> 
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/> 
<meta content='YOUR_APP_ID' property='fb:app_id'/> 
<meta content='https://www.facebook.com/pages/မအူပင္သားေလး/436632173079819' property='fb:admins'/> 
<meta content='article' property='og:type'/>

အဲ့မွာလည္း ျပင္ရမယ့္ေနရာေလးေတြပါ ပါတယ္။ကြၽန္ေတာ္ အဝါေရာင္ေလးေတြနဲ႕ ျပထားတဲ့ေနရာမွာ မိမိတို႕ ဘေလာ့ေလးနဲ႕ သက္ဆိုင္တာေလးေတြကို ထည့္ေပးလိုက္ပါ။ျပီးသြားရင္ ေနာက္ဆံုးအဆင့္အေနနဲ႕ ကြၽန္ေတာ္ ေအာက္မွေပးထားတဲ့ ကုဒ္ေလးကို ထပ္ရွာလိုက္ပါ။

<b:includable id='comment-form' var='post'>



ေတြ႕ျပီဆိုရင္ သူ႕ေအာက္မွာ က်ေနာ္ ေပးထားတဲ့ကုဒ္ေလးေတြထည့္ေပးလိုက္ပါ။
အဝါေရာင္ေလးျပထားတဲ့ေနရာေတြက မိမိတို႕စိတ္ၾကိဳက္ျပင္လို႕ရပါတယ္။
ဆိုဒ္ကို မိမိတို႕ဘေလာ့နဲ႕သင့္ေတာ္မယ့္ ဆိုဒ္ကိုျပင္ယူပါ။

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div></div> </b:if>



အဲ့ဒါျပီးရင္ေတာ့ ျပီးသြားပါျပီ။Preview နဲ႕ျပန္ၾကည့္ျပီး အဆင္ေျပတယ္ဆိုရင္ Save ႏွိပ္ျပီးထြက္လိုက္ပါ။နည္းပညာေလးေတြေလ့လာရင္ ေပ်ာ္ရႊင္ၾကပါေစလို႕ မအူပင္သားေလးမွာ ဆုေတာင္းေပးလိုက္ပါတယ္။ :)


အဆင္ေျပလို႕ ႏွစ္သက္ရင္ FB Like ေလးနဲ႕ အားေပးေစခ်င္ပါတယ္


Related Posts Plugin for WordPress, Blogger...
မအူပင္သားေလးဆီသို႕အီးေမးလ္ပို႕လိုလွ်င္
foxyform