How To Add The Latest Facebook Comment Box To Blogger
No doubt, Facebook is the biggest Social Network Media world wide. It boasts of over one billion active users currently.
Facebook developers have developed one plugin that helps webmasters and sites manager to improve and increase their user-engagement strategy.This plugin is Facebook Comment box.
With Facebook comment box, you would not be afraid of spam comments again, thereby establishing quality of comments you receive on your blogs or websites.
More wonderfully, Facebook allows these commentators to share their comments on their timeline.
That means a well installed, functional Facebook commment box in your website is an easy modern way of bring great traffic to your blog or website effortlessly.
Whereas those using other CMS and Blogging platforms (eg WorldPress) find it relatively easy to install the comment box in their sites, it is really cumbersome doing it in Blogger (blogspot.com).
So in this Tutorial Article, I am going to teach you, step-by-step:
- 1.HOW to generate your Facebook App ID. with this, you can create Facebook like box, share box and Comment box.
- How to add the Facebook Comment box to your blogger
- How to associate your Comment box with Notification,so that you become the moderator of the box and gets nofification via emails whenever one makes a comment their.
I will show you all these, with a very good quality, most current facebook Developers site interface.
Now, let's start:
1.Go to Facebook Developers Website - https://developers.facebook.com/
2. Hover Over “My Apps” Tab and click on “Add new App”.
3. Click on the website
4. Choose an existing App or type the name of your new app
5. Write down Your new App ID and then click “Create New Facebook ID”.
6. Choose No for “Is this a test version of another app?”.
7. On the “Choose a category” tab click the dropdown to choose the category your blog fits into.
8. Click Create App ID
As you saw, the generated snippet of code will give you the basic version of SDK, where the options are set to their most common defaults. You should insert it directly after the opening <body> tag on each page you want to load , this is what Facebook will tell you at this point.
Don't be frightened by that word, you are not going to be putting it in every page or post you create, I will show how to do once and for all.
You can now proceed to configure the SDK with advanced
setting,by clicking on the Advanced setting below the SDK snippet or Continue with the Basic SDK.See screenshot below.
This is where you should insert it in your Blogger template. That is just after the opening <body> tag.
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'>
So paste this code below any of the two tags above:
<script> window.fbAsyncInit = function() { FB.init({ appId : '1093923757287661', xfbml : true, version : 'v2.3' }); }; (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/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
Replace the App ID (1093923757287661) with your own.
See the screen shot below.
.
Now that you've got the SDK setup, you can use it to perform a few common tasks. Social Plugins such as the Like Buttons and Comments Plugin can be inserted into HTML pages using the JavaScript SDK.
Let's try adding a Like button, just copy and paste the line of code below anywhere inside the <body> of your page:
<div class="fb-like" data-share="true" data-width="450" data-show-faces="true"> </div>
Reload your page, and you should see a Like button on it.
9. To continue with the Basic SDK Configuration, click on the App Configuration and fill in your "Site URL" and "Mobile Site URL", then click Next. See the screenshot.
10. Go to the dashboard. On the left pane, just below dashboard, click on “Settings” See screenshot and fill the required items. Click save change
11. 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. See screenshot below.
12. An alert will show up “Are you sure you want to make your app public? It will become available to everyone.” Click Confirm.
Now, you have created a new Facebook app for your blog. With this you can now create Facebook comment box, Facebook like box, Share, Follow etc.
Let us now start to create Facebook Comment Box.
STEPS
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.
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='World Of Success Tips' 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='article' property='og:type'/>
Customization
- Replace your blog title or blog name instead of World Of Success Tips
- 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.
.
Step 5: 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 don't have to bother doing this often and on in your 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 6: Now paste Facebook Comment box HTML Code just below any of the above codes.
My own Blogger template is a Magazine template and so it has three "<data:post.body/>".
I put the comment box code immediately under the 3rd "<data:post.body/>". Really it did not work with the first or second "<data:post.body/>". However, it worked with the 3rd one.
I don't have "<div class='post-footer-line post-footer-line-1'>" or "<p class='post-footer-line post-footer-line-1'>" in my template, because it's a third party Template (Very Costly...LOL). So, if your template have those two codes above, use them as landmarks.
Facebook Comment box HTML Code
<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://success-naija.blogspot.com/2015/05/how-to-add-facebook-comment-box-to.html' target='blank' 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. Use our online hex color code generators to find out the name, RGB, HSL or hexadecimal number of any desired color.
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 7: Most important part of this tutorial, Save your Blogger template!
Enable notifications for comments
Great! You have done the hardest part of the 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.
However, if you want to be receiving notifications for comments go ahead and configure it.
Now, let's see how to configure the Notification 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.
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.
YOU MAY LIKE TRAFFIC POWERLINE. Click below.
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!
SPREAD OUT YOUR OPINIONS
God bless you.
15 Comments
Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work! https://strongarticle.com/
ReplyDeleteWow what a Great Information about World Day its very nice informative post. thanks for the post.
ReplyDeletefacebook ads fuer autohaus
It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. https://www.ivoignatov.com/3-te-taini-osnovi-na-uspeha
ReplyDeleteFacebook has partnered with Google, and using their AdWords engine has created a pay-per click advertising model that, when used properly can help a direct sales consultant reach out to a targeted group of new customers, eager for their product or service. facebook ads consultant
ReplyDeleteThanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. CTFO
ReplyDeleteThat is really nice to hear. thank you for the update and good luck. CTFO CBD
ReplyDeleteGot your journals and articles index by Google Scholar, Scopus, Web of Science etc. visit http://sch.com.pk for more details.
ReplyDeleteWe send something through this post, we liked your post very much, we have got a chance to earn money from this post, we have got to hear and see something from this post
ReplyDeleteRed light on my Spectrum Wi-Fi router
Seeking the ideal humanities report sample to use as a template for your own work? Stop searching because we have the ideal thing right here for you! Our humanities report sample! serves as a thorough and thoroughly researched how-to manual for writing an effective report. You'll undoubtedly be motivated to compose your own literary masterpiece by its clear structure and bright content.
ReplyDeleteAre you searching online for a biology case study assignment sample!? Our high-caliber information will provide you the precise direction you require. Our staff of writers can assist you in easily comprehending biological topics because they have years of experience. Our projects adhere to the strictest requirements for academic writing, which makes it simple for you to receive top marks.
ReplyDeleteNeed a reliable model for a engineering essay assignment sample! to use as a model for your own work? The ideal response is to use our example essay. It provides a useful tool to assist you in creating your own well-written and intelligent engineering essay that will highlight your expertise and understanding in this challenging subject. Between its pages, you'll discover all the resources you need to succeed.
ReplyDeleteAre you sick of looking for the ideal economics case study sample in vain? Take a look at our top-notch economics case study sample! For students and professionals who want to better comprehend intricate fiscal concepts, our example is the perfect resource. Our case study has all the information you require to be successful, from thorough analysis to clear diagrams and charts.
ReplyDeleteManagement assignments can be difficult, and [The Assignment Help] is aware of this. Because of this, we developed the Best management assignment sample, a go-to tool for any professional or student looking to develop their management skills. This sample will help you differentiate yourself from the competition and succeed in your industry because it is filled with real-world examples, useful guidance, and professional ideas.
ReplyDeleteThank you for our IT assignment sample for the students' page! Do you need assistance with your IT homework because you're having trouble? Look nowhere else! Our thorough sample gives you a thorough overview of IT assignments, covering everything from topic understanding to research and assignment writing. Improve your grades right away by following our detailed instructions!
ReplyDeleteSwimming with dolphins in El Gouna
ReplyDeleteSwimming with dolphins in
Swimming with dolphins in El Gouna 2023