Step by Step Installation. For custom CSS see this earlier post with instructions.
1. Open Blog Template
2. Copy Template to an HTML Editor by clicking on “Edit HTML” and right click with mouse, and “Select All.” Right click on mouse, and “Copy”. You can paste by right-clicking mouse, “Paste” into HTML Editor, or, [CONTROL] Key + [V] to paste into HTML Validator/Editor. Paste to your HTML Editor. To those who do not have an editor, I highly recommend the CSE HTML Validator Lite (which is free).
3. Paste Template into HTML Validator.
4. Go to https://developers.facebook.com/apps/ and click on “Add A New App”
There are two routes on that page to “Add A New App”
Route 1
Route 2
5. Choose WWW.
6. Choose a name for your website “App” and click on “Create A New App ID”
7. Fill in information.
- name for website 'app'
- your email address
- category
- click to create new 'app'
OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN
SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE IN THE LOCATION OF THE </head> and <body TAGS WHEN COMPLETED AFTER FOLLOWING THE STEPS BELOW
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='YOUR BLOG TITLE' property='og:title'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.an-image-url.com/200x200pixel-default-image.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='FACEBOOK App ID Number' property='fb:app_id'/>
<meta content='THE ID OR NAME I USE ON FACEBOOK' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='DESCRIPTION OF BLOG.' property='og:description'/>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-APP-ID-HERE',
xfbml : true,
version : 'v2.6'
});
};
(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>
<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.6&appId=YOUR-FACEBOOK-APP-ID-NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar' visible='true'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
8. developers.facebook.com will now create your App ID and Script.
You can copy and edit this text from your clipboard by highlighting text, then right-clicking on mouse to “Copy”, or highlighting text and holding down both [CONTROL] and [C] keys (Control + Copy).
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID NUMBER GOES HERE',
xfbml : true,
version : 'v2.6'
});
};
(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>
9. It states, “You should insert it directly after the opening <body> tag on each page you want to load it:”
In the HTML Editor/Validator, locate this line :
<body expr:class='"loading" + data:blog.mobileClass'>
With the cursor placed at the end of this line of code, press [ENTER] and move the code which follows it, further down the page.
In other words, it should look something like this
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
And you will insert the following App Identification code behind the <body tag.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR FACEBOOK APP ID#',
xfbml : true,
version : 'v2.6'
});
};
(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>
<div id="navbar-iframe-container"></div>
10. Now paste the Facebook Javascript App ID code into the Template.
It should look something like this
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR FACEBOOK APP ID#',
xfbml : true,
version : 'v2.6'
});
};
(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>
11. Since you have your “APP ID Number,” now, I want to begin inserting necessary codes throughout the blog.
FIRST, make certain your opening <html> tag is correct and includes the Open Graphic code.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
You can use search tool on HTML Validator/Editor, to perform a Search for <html tag. Check template code and update as necessary.
Now that your html tag is updated, return again to body tag, by searching the HTML editor for <body expr:class='"loading" + data:blog.mobileClass'> and move on to next step of adding code.
12. Go ahead and paste in the Facebook Commenting Plugin code. Paste this code right below the APP ID Script provided by Facebook (from above).
You can use the scroll bar from left to right, and note the “YOUR APP ID NUMBER GOES HERE” in red. Be certain to update this section with your APP ID that Facebook has given you for your blog. Every App ID is unique and specific.
<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.6&appId=YOUR APP ID NUMBER GOES HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In other words, it should look something like this
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR FACEBOOK APP ID#',
xfbml : true,
version : 'v2.6'
});
};
(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>
<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.6&appId=YOUR-FACEBOOK-APP-ID-NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
13. Now, you have the Facebook Javascript “App ID Javascript” code, followed by the Facebook Commenting Plugin Code in the template.
Use your HTML Editor/Validator to perform a Search for this line of code:
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
Place your cursor at the end of these lines and press the [ENTER] key and push the following code further down page to make room for the Placement of the Facebook Commenting Plugin within the template.
In other words, your template should look something like this
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>
</b:includable>
OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN
SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE WHEN COMPLETED
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<!-- Facebook comment box -->
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div></div>
</b:if>
<!-- Facebook comment box -->
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>
</b:includable>
14. Insert the following piece of code in the space that was created using the HTML Editor/Validator. You will have the choice between dark color scheme or light color scheme.
<!-- Facebook comment box -->
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540'/></div></div>
</b:if>
<!-- Facebook comment box -->
In other words your code should look something like this
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<!-- Facebook comment box -->
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='540px'/></div></div>
</b:if>
<!-- Facebook comment box -->
Note the width of 540 pixels. This is the length the commenting plugin will display across your blog in its position. Note the colorscheme is set to 'dark'. Facebook offers dark and light color schemes. Your selection should be based on your blog color and your personal preference.
15. Next prepare Metatags that are correctly configured for Facebook to scan your site for errors, such as “Multiple OG URL's” or “Parsing Errors”. These metatags have correctly worked when performing the Facebook Debugger Scan.
When you have completed edits, copy and paste the following facebook-specific meta tags directly above the closing </head> tag. You can find the <head> and </head> tags, by performing a search of the template with the HTML Editor/Validator.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='Title of your Blog' property='og:title'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL of 200x200px default blog image' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='YOUR APP ID NUMBER GOES HERE' property='fb:app_id'/>
<meta content='YOUR FACEBOOK USER NAME ID or NUMBER' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='GOOD, BRIEF DESCRIPTION OF YOUR BLOG' property='og:description'/>
16. The preceding graphics and demonstrations provide the correct position for metatags. (When filling out the meta tags with personal identifiers and information DO NOT include any text with characters such as "" or “ ' ” --these types syntax will create parsing errors when pasted into the blogger template and attempt to save.)
In other words, your template should look something like this
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='YOUR BLOG TITLE' property='og:title'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.an-image-url.com/200x200pixel-default-image.png' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='FACEBOOK App ID Number' property='fb:app_id'/>
<meta content='THE ID OR NAME I USE ON FACEBOOK' property='fb:admins'/>
<meta content='Author' property='og:type'/>
<meta content='DESCRIPTION OF BLOG.' property='og:description'/>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
*Note again: DO NOT USE " or ' ' or other syntax that will create parsing errors in the metatags. Use only plain alphabet characters.
Now, right click using mouse, and “SELECT ALL” and then right click on “COPY”.
This will copy the entire Blog Template to your computer clipboard.
17. Now that the template is copied on your computer clipboard, return to blogger template, and right click on “SELECT ALL” and “PASTE”.
18. Click on “SAVE TEMPLATE”
19. Now, your template is updated. Return to Facebook-Develop site and fill in the Web Site field. Click “NEXT”
20. A screen appears to “Test Your App” by adding a Like button to your blog. This is optional if you wish to do so.
21. If you scroll down to bottom of screen, however, “FINISHED” appears. We have already installed the necessary codes to get up and running.
22. On the same page, the third option listed, “Social Plugins” is listed. Click on “Social Plugins”
23. The page will forward to: developers.facebook.com/docs/plugins/
Scroll down to “Comments Plugin” and click on “Web”
24. The page will forward to: developers.facebook.com/docs/plugins/comments/
25. Scroll down to the “Comments Plugin Code Generator”
Fill in your blog URL, set the width of comment plugin and then Click “Get Code”
26. Pay attention to the YELLOW LINE.
27. Click on the “Public Mode can be enabled in the App Dashboard.”
28. developers.facebook.com/apps/YOUR APP ID # HERE/review-status/ will open. Click on “YES” to enable public access, and “CONFIRM”
29. Now, your Facebook Commenting Plugin is “Live” to the Public.
Facebook Sharing Debugger Process
30. To verify that your code is correct and installed properly, go to https://developers.facebook.com/tools/debug/sharing
31. Type your blog URL and then click on “DEBUG” on the right-hand side of the screen.
Be prepared for the crawler to list some error it previously found at an earlier date, in the database. See the date it has listed of the last crawl.
32. When the screen refreshed, it probably included errors. If this is the first time your blog contains metatags specific to Facebook you should now be able to correct those errors: Click on “SCRAPE AGAIN”.
Try both URL's.
http://your-blog-site.blogspot.com/ and
http://your-blot-site.blogspot.com/2016/03/testing-any-page.html on the sharing debugger.
Both of my URL's came up error free for this demonstration.
33. Open your blog, and refresh one of your posts. Perform a test post. No errors such as “More than one OG URL's specified” should display.
Your blog should include a “Moderation Tool” since your username and APP ID is defined in the facebook meta tags.
As of 5/16/2016: I just performed an install of the Commenting App on this blog. The code on this page apparently works. I encountered no major problems when using the debugger app. There are usually minimal debugger issues, i.e., during the first scrape, there may be outdated database information that notes parser or multiple OG URL's or perhaps even warning that the fetch for thumbnail exceeds 8 mb on a 200x200 thumbnail... simply click “scrape” again... 2 or 3 times if necessary, to correct the information in the system.
Otherwise, the Commenting Plugin App should work without incident, and does or should, include the moderation tool if you are logged into your Facebook account.
If during the Facebook Sharing Debugging process you receive an error regarding “Attempted Frozen Title Change” you can read about that here. It is a common occurrence for blogs that have newly added facebook-specific crawler metatags. In my case, the warning came up saying that I was attempting to change a title, to the title they already, previously had in the database. So this “error” is something that can not be prevented or fixed. Now that correct metatags are in the blog, going forward, the correct title and specified URL should be available to Facebook's crawler.
If your code worked and you would like to add custom styles around the Facebook Comment Plugin, there's helpful CSS tags at this page too, with instructions and it also includes a full list of all the web pages, blogs, and other resources which I visited when researching how to get the Facebook Commenting Plugin installed properly to pass the Facebook Sharing Debugger test. There are many helpful resources listed with links.
If this page has been helpful please leave a comment and let everyone know. If you run on other problems, you can leave a comment, and if I can help, I will. Or perhaps, another visitor can offer helpful advice. Thanks again for visiting!
