Creating An App For Your Website
- Go to Facebook Developers Page to create a App for your Website/Blog.
- Give a name to your App in the "APP NAME" Filed.
- Click Continue
- Enter the given code and click Continue
- If you are creating Your first app, Then Register as Developer. Just Follow The Instructions
- A Page with your Apps created is displayed, Click on the app you just created and click on EDIT APP
- In the App Domain filed enter your website URL without any http. If your blog url ends with "blogspot.com" then enter just "blogspot.com"
- Now click on Website with Facebook Login and enter the full address of your blog.
- Click on Save Changes.
- Disable The Sandbox Mode.
- Note Down The App ID.
Integrating The Comment Box Into Your Website
- Go to Blogger -> Design -> Edit HTML
- Search For <body> Tag and paste the below code right after <body> tag.
<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=450435125038501";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Replace 450435125038501 With Your App ID Noted In Step 11
- Now copy the below code and paste it wherever you want to appear your comment box, In case you dont know where to paste in blogger, then paste it right after the first occurence of <div class='comments' id='comments'>
<a expr:href='data:post.url + "#fbcomments"'><fb:comments-count expr:href='data:post.url'/> Comments</a>
<b:if cond='data:blog.pageType == "item"'>
<div class="fb-comments" id='fbcomments' expr:data-href="data:post.url" expr:data-title='data:post.title' data-num-posts="2" data-width="500" data-colorscheme="light"></div>
</b:if>
Number 2 Indicated The Number Of Comments To Show
Change 500 To Increase Or Decrease The Width
Change light To Dark To Change The Color Scheme Of Comment Plugin
You Can Moderate Your Comments In Facebook Developers Page.
Change 500 To Increase Or Decrease The Width
Change light To Dark To Change The Color Scheme Of Comment Plugin
You Can Moderate Your Comments In Facebook Developers Page.
- Save the Template and your done.
Displaying Only Facebook Comment Box
- Go To Blogger -> Settings -> Posts And Comments
- In the comments section choose "HIDE" From the option, If you want to display only Facebook comments.
- If you want to display both blogger and Facebook comments then choose "EMBEDDED"
If You Any Doubts Or Suggestion Then You Are Welcomed To Comment And Let Me Know.
No comments:
Post a Comment