Thinking of adding a Facebook comment box plugin on your Blogger but don't know how to?
Check this helpful tips I found from techubber.blogspot.com
Loading...
STEP 1: Create a Facebook App for your blog site
First of all, you need to create a Facebook App.
- Go to this link and to create Facebook app: https://developers.facebook.com
- Hover on the "My Apps" drop-down button near the Facebook Account name (top right corner)
- Click on "Add a new app"
- The platform selection window will open. Since we are going to add comment box on a Blogger blog site, click on "Website"
- In the next page, enter the name of the Facebook App. Preferably keep a name related to your blog site so you can identify easily later on.
- Choose a category for the app.
- Click "Create App ID"
- In the next page, scroll down and under "Tell us about your website", enter the URL of the Blogger blog site. Click Next to proceed.
- In the next page, scroll down to the bottom, and under "Next Steps", click on "Social Plugin"
- Facebook Social Plugins page opens. Click on Comments.
- In the "Comments Plugin" section, click on "Web"
- We'll get a Comment Configurator and a code will be generate for the comment box.
Facebook Comments Plugin Code Generator
The Facebook Comment Plugin Code Generator page looks like this:
1. Choose URL or Page
Enter the URL of the website/blog where you want the comments box to appear.
2. Code Configurator
- In the Code Configurator, enter the URL of the website/blog where you want the comments box to appear.
- Adjust settings like the width of your comments plugin or how many posts you want to show by default.
- Click the Get Code button to generate your comments plugin code. As we finish entering the URL of the site and/or the size, the Facebook comment will show a live preview of how it will look.
3. Get Code
Click on the "Get Code" button. The plugin code and instructions to add it on the website are displayed.
Note: Keep the page open, we will refer to it again.
STEP TWO: Integrating Facebook Comment Plugin to Blogger Blog
1. Login to Blogger and click on your blog for which you just created the Facebook App
2. Click on "Template"
3. Before proceeding, backup your current Blogger blog template by clicking on the "Backup/Restore" button on the top-right. Select to download a full template. Save it on your computer.
Before editing the Blogger template, it is a safe practice to always backup so that we can restore if something goes wrong. It is easier and time saving to revert to the previous configuration instead of troubleshooting and finding the line where the mistake was made.
4. With backup taken, click on "EDIT HTML". A page opens which contains the Blogger Template's XML code. Be careful when making any changes else it may break. But we have a copy backed up, don't we?
5. Refer the Facebook Developer page open:
- Facebook is telling us to "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."
- Find the <body> tag: click any where inside the code once and press "CTRL+F" to show the search bar.
- Enter only "<body" without the ending ">" in the search bar and hit enter. The <body> tag may look like this.
<body expr:class='"loading" + data:blog.mobileClass'>
The reason why we did not search with <body> is because there are some code in between <>, and the search will fail otherwise.
- Go back to the Facebook Developer page which we kept open, and copy the JavaScript SDK code displayed right under "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag." The code looks like this:
<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/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
- Go to the Blogger EDIT HTML page and paste the code right after the end of the <body> tag.
- Click on "Save Template".
ATTRACTIONS TO SEE IN MANILA
Klook.comNow you should be getting an XML parse error which says:
Error parsing XML, line 663, column 64: The reference to entity "version" must end with the ';' delimiter.
- Edit the code by changing "&"(ampersand) highlighted in red below with "&;" highlighted in green
Before Edit: the culprit is the ampersand (&) before "version" and "appId" in the line starting with js.src
<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/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
After Edit: replaced & with it's entity name "&"
<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/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
- After editing, Save the Template and the parsing error should not appear again.
Don't close this page just yet. We have a second code to deal with.
ACTIVITIES AND TOURS IN MANILA
Facebook Comment Box Placement in the Blogger Template
Now we come to the most important part of this process - placement of the Facebook Comment Box in the Blogger Template. Care should be taken where you place the Facebook Comment Box code in the Blogger Template, because if you place it anywhere else, the Facebook Comment Box may not appear at all. In some cases, it may appear on desktops but it may not appear on mobile devices as Blogger has different CSS code for desktop and mobile templates.
Go back to the Facebook Developer page open. The second code displayed under "Place the code for your plugin wherever you want the plugin to appear on your page.", looks like.
<div class="fb-comments" data-href="http://techubber.blogspot.com" data-numposts="5"></div>
But don't use that code. Because the HREF is the link of the blog and not the link to individual post. So the same Facebook comments will appear on all the posts. (Explained further below).
Use the following code instead: to display the Facebook Comment Box
<!-- facebook comment box --><b:if cond='data:blog.pageType == "item"'><h2>Comment with Facebook</h2><div class='fb-comments' data-numposts='5' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'/></b:if><!--facebook comment box -->
In the code above:
<!-- facebook comment box --> is just a comment line for identification<b:if cond='data:blog.pageType == "item"'> checks if the current page type is a blog post item.<h2>Comment with Facebook</h2> a description line provided. Delete this line if not required.
Should you use the above code in Blogger widget/gadget?
You can paste the above code in Blogger's HTML/JAVASCRIPT widget, drag and drop the widget just below the main posts widget. The comment box will show below the posts. But the problem is that it will show the Facebook Comment Box way below, below the "previous" and "next" link. So it will look ugly. We'd like the Facebook Comment Box somewhere right below the end of the post, not all the way down. So don't place it in widgets.
The ideal area to place the Facebook Comment Box in Blogger Template:
Please note that Blogger has separate codes for desktop and mobile devices. So we need to place the Facebook Comment Box Code in two different places.
1) Facebook Comment Box For Desktop Browsers:
- Go to the Blogger > Template > EDIT HTML page
- Click any where inside the code page and press "CTRL+F" to show the search bar.
- Enter "post-footer-line post-footer-line-3" and hit enter to search.
- Anything inside "post-footer-line post-footer-line-3' is displayed on desktop browsers and not on mobile devices.
It looks like:
<div class='post-footer-line post-footer-line-3'>
Paste the Facebook Comment Box code below right after "<div class='post-footer-line post-footer-line-3'>"
<!-- facebook comment box --><b:if cond='data:blog.pageType == "item"'><h2>Comment with Facebook</h2><div class='fb-comments' data-numposts='5' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'/></b:if><!--facebook comment box -->
The "<!-- facebook comment box -->" is a comment line added just for identification.
Note:Under <div class='post-footer-line post-footer-line-3'>, you may see items such as "post-location" and "About Me". If you don't display sections like "About Me" you may ignore or for future usage, you may follow. If you display these items, you may want to display the Facebook Comment Box below these items. Because Facebook Comment Box is going to expand if there are more comments and it won't look good if these sections are displayed after the Facebook Comments.Look for sections like <span class='post-location'> and <b:if cond='data:post.authorAboutMe'>
In that case, you should look for the ending </div> tag of <div class='post-footer-line post-footer-line-3'> and place the Facebook Comment Box code right before </div>
- Save the Template
- View the blog to test.
- Test it on desktop browser and also on mobile browser. You should be able to confirm that the Facebook Comment Box appears on desktop browser but not on mobile browser.
The Facebook Comment box should now appear below the post. Viewers who are logged in to Facebook will see his/her profile picture near the comment box. Those who are not logged in with see a default blank profile photo. When he/she clicks on the comment box, the user will see a "Log in to Facebook" button.
2) Facebook Comment Box For Mobile Device Browsers:
Now that the Facebook Comment Box is added and display confirmed on desktop browser, let's add the same for mobile device browsers. Surprised? Well, the Facebook Comment Box we just added will not show on mobile device browsers as the place where the code is added is not displayed on mobile browsers. So we need to add specifically for mobile browsers too.
- Go to the Blogger > Template > EDIT HTML page (if you are not already there)
- Click any where inside the code page and press "CTRL+F" to show the search bar.
- This time enter "post-footer-line post-footer-line-1" and hit enter to search.
There are more than one instances of "post-footer-line post-footer-line-1". We want the first one. Check the line numbers on the left, and note the one that comes first (lowest line number).
- Within "post-footer-line post-footer-line-1", you will also find that there are other sections - such as:
<span class='post-author vcard'>some code in between......</span><span class='post-timestamp'>some code in between......</span><span class='post-comment-link'>some code in between.....</span>
- Place the following Facebook Comment Box code right above <span class='post-comment-link'>. So it should look like this:
</span><!-- facebook comment box --><b:if cond='data:blog.pageType == "item"'><h2>Comment with Facebook</h2><div class='fb-comments' data-numposts='5' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'/></b:if><!--facebook comment box --><span class='post-comment-link'>
- Save the Template
- View a blog post on mobile device and see if the Facebook comment appears.
Now that you have added Facebook Comment Box for both desktop and mobile, Facebook comment should appear on both desktop browsers as well as mobile device browsers. Just check that two Facebook Comment boxes are not appearing on any device. If that is the case, the Facebook Comment code might have been some error in placing the Facebook Comment Box code. Check this post again for the right placement.
What to Read Next
- 8 Ways to Monetize Your Blog
- Use my hosted AdSense account to show ads on my own site
- How To Fix Not Showing AdSense After Moving My Blogger (Blogspot) To My Own Domain
- Blogger Ads Inline AdSense Widget
- What are the benefits of Robots.txt and how to add it on Blogger
- Is it possible to have two or more publishers' ad code on the same URL?
- How To Earn More Using Mobile Ads Via AdSense
- How To Create Facebook Instant Articles For Blogger (The Easiest Way)
No comments
Let us know your thoughts!