Do you have a blog and you are not getting any comment on your blog posts? Don't worry, you can show your Facebook comments to your blog. Whenever you share your blog posts to your Facebook page and you get some comments on you post on Facebook page, you can show that comments in your blog post. In this way, you will not get frustrated when you are not getting any comment on your blog.
As Facebook is the largest social media website where you love to share your blog posts and redirect some traffic to your blog. Now you can also show your Facebook comments on your blog. You just have to follow some easy steps to show Facebook comments to your blog posts. In this way, your blog will look professional. You will also get notifications when someone will comment on your blog post.
How to Add Facebook Comments Box To Blogger With Notifications?
You have to follow some steps to add Facebook comments box to blogger. In the first step, we have to create an app for your blog to add Facebook comments box. Then we will add Facebook comments box to blogger blog. After that, we will enable notifications to get notifications directly to Facebook account. Below we have discussed all the steps to add Facebook comments box to blogger.
How To Create Facebook App For Your Blog To Show Facebook Comments To Blogger Blog?
• First of all got to Facebook's official Developer Apps page.
• Now go to "My Apps" and click on "Add a New App". Now choose option "Website".
• Now fill required details, choose category "Communication" as shown in the screenshot below and click on "Create App ID".
• Now you will get your App ID and you have to copy this App ID which we will use later.
• You have to make some changes in order to work properly your Facebook App. Go to Settings > Basic Settings Tab, and fill your website's address in the box "App Domains" and fill your contact email address in the box "Contact Email".
• Now click on "Add Platform" , choose "Website" and fill your website's URL and click on "Save Changes".
• Now go to "Status & Review" tab and enable the to "Yes" as shown in the screen-shot below.
You have successfully created you Facebook App for your blog. Now we have to add Facebook comments box to blogger blog.
How to Add Facebook Comments Box To Blogger Blog?
• Go to your Blogger Dashboard and go to "Template" tab.
• For your blog's safety, make a full backup of your blog's template and then click on "Edit HTML".
• Now click anywhere in the HTML box and click CTRL+F. Type "<html" in the top right box and press enter. You will find the tag "<html" as shown in the screenshot.
• Now place the code " xmlns:fb='http://www.facebook.com/2008/fbml' " just after the tag "<html"
• Now again find the tag </body> as we find </html tag in the above step and paste the below code just above the </body> tag. Replace "Your App ID" with your Facebook App ID that you have created for your blog.
<div id=”fb-root”></div>
<script>window.fbAsyncInit = function() {FB.init({appId : ‘Your App ID‘,status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : 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>
• Now again you have to search for </head> tag and place the below code just above the </head> tag. You can replace "New Technology Hub" with blog's title, replace "Image-link-of-blog-logo" your blog's logo image URL, replace "Your-App-ID" with your Facebook App ID, and replace your Facebook's page URL.
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/><meta expr:content=’data:blog.url’ property=’og:url’/><meta content=’New Technology Hub‘ property=’og:site_name’/><meta content=’Image-Link-Of-Blog-Logo‘ property=’og:image’/><meta content=’Your-App-ID ‘ property=’fb:app_id’/><meta content=’http://www.facebook.com/newtechnologyhub‘ property=’fb:admins’/><meta content=’article’ property=’og:type’/>
• Now find the tag <data:post.body/> or <p><data:post.body/></p> and paste below code just below one of the tag mentioned above.
<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == "item"’><div align=’center’><div style=”background: #F8F8F8;“><div style=”color: #444444; font-family:Constantia,Georgia,’Nimbus Roman No9 L’,serif; font-size: 32px; text-align: center;”><strong>Spread out Your Opinions</strong></div><br/><script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/><div><fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ width=’450‘/></div><div align=’right’><a href=’http://www.newtechnologyhub.com/2015/08/add-facebook-comments-box-to-blogger-blog.html’ target=’blank’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div></div></div></b:if></b:if>
If you are using magazine template on your blog or if you can't find the tags <data:post.body/> or <p><data:post.body/></p> , then try to find the tags <div class=’post-footer-line post-footer-line-1′> or <p class=’post-footer-line post-footer-line-1′> and paste the above code.
• You can make color changes, widh changes and even you can remove Facebook comments box from static pages. Just remove the code " <b:if cond=’data:blog.pageType == “static_page”‘> " and the last code </b:if> from the above code.
• Now Save your template and you will see Facebook comments box in your blog. Now if you want to get notifications that who has commented on your blog, you can foll the below steps to enable notifications.
How to Enable Notifications For Comments?
• You have almost done your work and if you want to enable notifications to your Facebook profile then go
" https://developers.facebook.com/tools/comments/?id=Facebook-App-ID ". ( Replace Facebook-App-ID with your App ID and go that link. )
• Click on "Settings"
• Now a pop-up window will open and make the below changes as shown in the image.
• Now click on "Save".
Now you will start getting notifications when someone will comments on your blog in the Facebook comment box. You have done all your work and your Facebook comment box will work on your blog. :)
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon