Create a Facebook App Before Facebook new design, it was easier to create an app. But after their new design, it was a difficult work to...
Create a Facebook App
Before Facebook new design, it was easier to create an app. But after their new design, it was a difficult work to create a new Facebook app for some people. Follow below instructions respectively to create your app.
Go to Facebook developer apps official web page and click on “Create New App” button.
Alternatively, you can click on “Apps” menu link and select on “Create a New App” button.
Now you would see a pop out box to create the Facebook app. Type the name or your website name on the “Display Name” field. Also, you can add a namespace (Link to your app), but it’s optional. After you entered unique names, you can go to the next step by clicking on “Create” button. Don’t worry about below screenshot. I have installed the Hootsuite chrome extension to manage all my social accounts! (Yes, including Facebook)
After you created your new Facebook App, you can change its settings to see everyone. After Facebook’s latest update they have changed their user settings too. For some instances, you can’t see the App secret ID directly (you have to enter your Facebook password to see it) and they have a clear button to promote your App through Facebook advertising. You only want the APP ID, which you can see from the app’s dashboard page.
Now you should do one thing in order to connect new Facebook app with your website or blog (here we’re going to add your BlogSpot blog).
Go to “Basic Settings” page and find “App Domains” field. It’s used to connect your blog platform (you know your blog platform is BlogSpot). So type your blog URL (ex: bestlodge.blogspot.com or problogtricks.com) in the “App Domains” field. Then you should render your exact blog address (ex:www.bestlodge.blogspot.com, www.problogtricks.com, blog.problogtricks or example.com/blog/).
Click on “+Add Platform” button and then select “Website”. Type your blog address correctly starting withhttp:// or https://( if you use SSL encryption) and ending with / (slash) for the Site URL field as shown in below screenshot. Type the same URL for mobile Site URL, if you’re using a responsive template for your BlogSpot blog. The last steps of configuring the Facebook App are making it live and available to all users. Type your email address in the “Contact Email” field. Then click on “Save Changes” button.
Now navigate to “Status & Review” section and select the “Yes” for “Do you want to make this app and all its live features available to the general public?” A popup box will be shown, confirm your change.
Go to your Dashboard and save the app id and app secret on your computer. We need them later.
Add Facebook comment box to Blogger
Now you created a new Facebook app for your Blog. Then you need to install the Facebook comment box on your blog. So follow below few steps respectively.
Step 1: Sign in to your Blogger account and go to Template.
Step 2: Now you have to make some changes to your blog template. So before we put into it, first of all make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and in front of this code, paste below code.
Step 2: Now you have to make some changes to your blog template. So before we put into it, first of all make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and in front of this code, paste below code.
xmlns:fb=’http://www.facebook.com/2008/fbml’
Make sure to add a space before and after the above code. See the example below.
<html xmlns:fb=’http://www.facebook.com/2008/fbml’ b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ …….. xmlns:expr=’http://www.google.com/2005/gml/expr’>
Step 4: Use CTRL + F Blogger keyboard shortcuts and find where below HTML element is located.
</head>
Now replace below block of code just above of </head> code.
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’Pro Blog Tricks‘ 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/problogtricks‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
Customization
- Replace your blog title or blog name instead of Pro Blog Tricks
- Copy and paste the logo image URL instead Image-Link-Of-Blog-Logo.The logo will appear next to your post titles on Facebook profiles of commentators.
- Replace YOUR_APP_ID with the App ID which you saved on your computer earlier.
- http://www.facebook.com/problogtricks is the link of Facebook fan page.Just replace with your profile page or like page URL.
Step 5: Find below HTML code using above keyboard shortcut.
<body>
If you could not be able to find above code in your existing blogger template, then try to find below code. It should be located in your template.
<body expr:class=’"loading" + data:blog.mobileClass’>
After one of above codes, paste below piece of code.
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘MY APPLICATION ID HERE‘,
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>
Make sure that you changed the MY APPLICATION ID HERE with your real application ID.
Step 6: Now you’re half done. You just need to display Facebook comment box on your blog. You can put the Facebook comment box in your post and static pages manually. But it’s not an easy work to add a Facebook comment box to whole pages manually (think if you have 1000+ posts on your blog, do you use this method to add comment box?). So we use an automatic technique to add the Facebook comment box. It’s done from template editor. So you have to do nothing from post editor. Find below blogger data tag in your template.
<data:post.body/>
or
<p><data:post.body/></p>
If you’re using a magazine blogger template, you will encounter two or three similar codes. As using a wrong <data:post.body/> code, Facebook comment box might not work on your blog. So try all code paces and choose the correct one. In case if you’re not sure which code to add or didn’t work that method, then find below HTML code in your template.
<div class=’post-footer-line post-footer-line-1′>
or
<p class=’post-footer-line post-footer-line-1′>
Step 7: Now paste one of pieces of HTML codes of Facebook comment boxes just below of the above codes.
Facebook comment box style #1 for white color background templates
HTML code for comment box :
<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://demo.problogtricks.com/2014/03/facebook-comment-box-blogger-example-01.html’ target=’blank’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>
Facebook comment box style #2 for dark color background templates
HTML code for comment box :
<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == "item"’>
<div align=’center’>
<div style=”background: #414141;”>
<div style=”color: #F0F0F0; font-family:Cambria,’Palatino Linotype’,’Book Antiqua’,’URW Palladio L’,serif; font-size: 32px; text-align: center;”>
<strong>Share your thoughts using below comment form!</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://demo.problogtricks.com/2014/03/facebook-comment-box-blogger-example-02.html’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>
Customization
- Generally the Facebook comment box would appear on post and stationary pages. Stationary or static pages are stand alone pages which won’t add to archives. Usually Static pages are best to add contact form to Blogger, create About page etc. So if you don’t want to display Facebook comment box on static pages, please remove above first and last two conditional code lines.
- If your Blogger template is not a magazine template or designed for showing whole content in home page, so you can display Facebook comment box on your blog home page or archive pages too. Just remove above highlighted codes.
- You can change the background and font colors by changing their color values.
- I have set up the width of comment box to 450 pixels. If you want to change the width to 500 pixels, so update the value to 500 instead 450. Also you can remove the width=’450‘ CSS code and then Facebook comment box will adapt to the device’s screen resolution. Remember by adding an over-riding value for the width of the Facebook comment box, it can mess up your blog template.
- Additionally, you can add your own call to action instead of “Spread out Your Opinions” and “Share your thoughts using below comment form!”.
Step 8: Most important part of this tutorial, Save your Blogger template!
Enable notifications for comments
Now you are already done almost every hardest work! You can overlook these steps if you don’t want to receive notifications for comments & replies and make some useful changes such as enabling grammar filter, member wishlisting etc. But this tutorial is for receiving notifications for comments. (That’s why we created a Facebook App!). In the last part of this tutorial, let’s see how to enable notifications for comments.
Visit this web page: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
Replace YOUR_APP_ID with the your Facebook application ID.
Click on “Settings” link.
Click on “Settings” link.
Now a pop out box would be shown and you can change some settings. Make yourself as a moderator (important to receive comment notifications). Allow other options to login and comment on your blog. Set grammar filter to maintain the comment quality. Use comment composer to reduce the page loading time. See below screenshot. After making these changes, click on “Save” button.
Comment settings |
That’s all. Whenever someone comments on your blog, you will receive notifications for the comments to your Facebook account. Tell a friend to comment on your blog to see the results! Here is the notification message for my test comment which is put on our demo website.