As we know every one these days got facebook account so having facebook comment box for your website is more attractive to users rather than asking them to sign up first and leave feed back. Adding facebook comment system to a particular website is very simple task, most of the web masters know about that process. But the limitation of this normal process is that the same comment was appearing on all web pages. I hope normally all webmasters knows about the initial steps for creating a facebook app for particular Facebook social plugin.Its very easy step, instruction for creating an facebook app are in administration page on the top. So when your app is ready follow these simple steps..
1. Go to templates/base/_header.html At the head section of your website,(means in between <head> Here </head> ) add the code below:
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="fb:admins" content="{YOUR_PROFILE_ID}"/>
2. After that Paste the below code right after the opening <body> tag i did right after this line <bx_injection:injection_header />
<div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
3.Then Paste this below code Where ever you want to comment box to appear e.g in photo view. Add a new html block and paste the code there and comment box will appear.
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="3"></div> <script> $(".fb-comments").attr("data-href", window.location.href); </script>
******************
You must change these values with your own
1. YOUR_APP_ID
2. YOUR_PROFILE_ID
3. example.com -with your own website domain
you can change these also if you like..
data-width="your own value larger than 470" data-num-posts="your own value larger than 1"
That's all.. Enjoy :)
