Step by Step Instruction to Install Facebook Comment Plugin into Blogspot Templates

Step by Step Installation. For custom CSS see this earlier post with instructions.

1. Open Blog Template

Facebook Comment Plugin Install Instruction for Blogspots



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).

Facebook Comment Plugin Install Instruction for Blogspots



3. Paste Template into HTML Validator.

Facebook Comment Plugin Install Instruction for Blogspots



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

Facebook Comment Plugin Install Instruction for Blogspots

Route 2

Facebook Comment Plugin Install Instruction for Blogspots



5. Choose WWW.

Facebook Comment Plugin Install Instruction for Blogspots



6. Choose a name for your website “App” and click on “Create A New App ID”

Facebook Comment Plugin Install Instruction for Blogspots



7. Fill in information.

  • name for website 'app'
  • your email address
  • category
  • click to create new 'app'
Facebook Comment Plugin Install Instruction for Blogspots



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 == &quot;item&quot;'>
<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 != &quot;&quot;'>
<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='&quot;loading&quot; + 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&amp;version=v2.6&amp;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=&quot;text/javascript&quot;>
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener(&#39;load&#39;,
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>




8. developers.facebook.com will now create your App ID and Script.

Facebook Comment Plugin Install Instruction for Blogspots

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='&quot;loading&quot; + 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.

Facebook Comment Plugin Install Instruction for Blogspots

In other words, it should look something like this

</head>

<body expr:class='&quot;loading&quot; + 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.

Facebook Comment Plugin Install Instruction for Blogspots

It should look something like this

</head>

<body expr:class='&quot;loading&quot; + 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='&quot;loading&quot; + 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&amp;version=v2.6&amp;appId=YOUR APP ID NUMBER GOES HERE";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Facebook Comment Plugin Install Instruction for Blogspots

In other words, it should look something like this

</head>

<body expr:class='&quot;loading&quot; + 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&amp;version=v2.6&amp;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.

Facebook Comment Plugin Install Instruction for Blogspots

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 Plugin Install Instruction for Blogspots

 

<!-- 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 == &quot;item&quot;'>
<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 != &quot;&quot;'>
<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 == &quot;item&quot;'>
<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 != &quot;&quot;'>
<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='&quot;loading&quot; + 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.

Facebook Comment Plugin Install Instruction for Blogspots



17. Now that the template is copied on your computer clipboard, return to blogger template, and right click on “SELECT ALL” and “PASTE”.

Facebook Comment Plugin Install Instruction for Blogspots



18. Click on “SAVE TEMPLATE”

Facebook Comment Plugin Install Instruction for Blogspots



19. Now, your template is updated. Return to Facebook-Develop site and fill in the Web Site field. Click “NEXT”

Facebook Comment Plugin Install Instruction for Blogspots



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.

Facebook Comment Plugin Install Instruction for Blogspots



21. If you scroll down to bottom of screen, however, “FINISHED” appears. We have already installed the necessary codes to get up and running.

Facebook Comment Plugin Install Instruction for Blogspots



22. On the same page, the third option listed, “Social Plugins” is listed. Click on “Social Plugins”

Facebook Comment Plugin Install Instruction for Blogspots



23. The page will forward to: developers.facebook.com/docs/plugins/

Scroll down to “Comments Plugin” and click on “Web”

Facebook Comment Plugin Install Instruction for Blogspots



24. The page will forward to: developers.facebook.com/docs/plugins/comments/

Facebook Comment Plugin Install Instruction for Blogspots



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”

Facebook Comment Plugin Install Instruction for Blogspots



26. Pay attention to the YELLOW LINE.

Facebook Comment Plugin Install Instruction for Blogspots



27. Click on the “Public Mode can be enabled in the App Dashboard.”

Facebook Comment Plugin Install Instruction for Blogspots



28. developers.facebook.com/apps/YOUR APP ID # HERE/review-status/ will open. Click on “YES” to enable public access, and “CONFIRM”

Facebook Comment Plugin Install Instruction for Blogspots



29. Now, your Facebook Commenting Plugin is “Live” to the Public.

Facebook Comment Plugin Install Instruction for Blogspots



Facebook Sharing Debugger Process

30. To verify that your code is correct and installed properly, go to https://developers.facebook.com/tools/debug/sharing

Facebook Comment Plugin Install Instruction for Blogspots



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.

Facebook Comment Plugin Install Instruction for Blogspots



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.

Facebook Comment Plugin Install Instruction for Blogspots



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.

Facebook Comment Plugin Install Instruction for Blogspots



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!

5 comments:

  1. This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you.
    Titanium Bracelets

    ReplyDelete
  2. This article was written by a real thinking writer. I agree many of the with the solid points made by the writer. I’ll be back.
    Titanium Bracelets UK

    ReplyDelete

  3. interesting blog. It would be great if you can provide more details about it. Thanks you

    123 HP OJ7610 Setup

    ReplyDelete
  4. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog.


    <a href="https://www.hpprintersetup.biz/123-hp-com-envy7100/
    hp envy 7100 driver</a>

    ReplyDelete
  5. Thanks a lot for sharing this such a informative blog It really help a lot to improve my knowledge and I hope you continue to have high quality articles like this to share with everyone!
    Home Tutors in Lucknow | Home Tuition Service

    ReplyDelete