কিভাবে ব্লগারে Facebook কমান্ড বক্স যুক্ত করবেন?

একটি ফেসবুক অ্যাপ্লিকেশন নির্মাণ করেত হবে

1. প্রথেম এইলিংকে যান Facebook developers page ফেসবুক অ্যাপ্লিকেশন নির্মাণ করতে হবে।

2. আপনার ব্লগে একটি বিবরণ সঙ্গে নতুন অ্যাপ্লিকেশন হিসাবে নীচে দেখানো তৈরি করুন.

3. আপনার ফেসবুক অ্যাপ্লিকেশন আইডি যা ভালো উল্লেখ্য নিচে দেখানো হবে.

জাভাস্ক্রিপ্ট SDK এর জন্য ফেসবুক মন্তব্য নেই বাক্স

4. এবার প্রথেম blogger dashboard জান --> তার পর template যান --> Edit Html কিক্লক করুন (Tick expand widget template option টিক দিন).

5. খুজুন (Ctrl+F) <html এবং এটাকে নিচের কোড দিয়ে replace করুন.

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

6. আবার খুজুন এ কোডটি <body>এবং নিচের কোডটি এর পরে বসান.

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
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('script');
e.src = document.location.protocol + '//connect
.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').
appendChild(e);
}());
</script>

source: Facebook developers

Note:: Replace YOUR_APP_ID এর স্থানে APP ID বসান।

ফেসবুক ওপেন গ্রাফ ট্যাগ

7. আবার খুজুন </head>এটাকে এবং পরে নিচের কোডটি বসান.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Tricks' 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='http://www.worldit.tk' property='fb:admins'/>
<meta content='article' property='og:type'/>

Note::

Replace Blogger Tricks এর স্থানে আপনার ব্লগের টাইটেল বসান.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.

ফেসবুক মন্তব্য বাক্স উইজেট কোড

8. খুজুন নিচের কোডটি.

<data:post.body/>

এবং এর পরে নিচের কোড বসান।

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:20px 0px 5px 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='550'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'>Facebook Comments Plugin Bloggerized by <a href='http://www.Bloggertricks.Biz' target='_blank'><b>BloggerTricks.Biz</b></a></div></div>
</b:if>

Note:-

You can change the width of widget by replacing 550 with your desired width.
As you all know you can change the color scheme to light or dark.
Go to blogger dashboard --> Settings --> post and comments and set comment section as HIDE.
If you find 3 occurrence of <data:post.body/> then add the above script after the first occurrence of it.

9. Save your Template.

Facebook Comments Plugin Bloggerized by BloggerTricks.Biz