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

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>

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

</head>

<body expr:class='"loading" + data:blog.mobileClass'>

(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 :

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.

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'>

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.

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&amp;version=v2.6&amp;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'>

<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:

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

<b:include data='post' name='postQuickEdit'/>
</span> </div>

<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

<b:include data='post' name='postQuickEdit'/>
</span> </div>

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

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

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 == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta content='YOUR BLOG TITLE' property='og:title'/>
</b:if>

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

</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!

5 comments:

Bushra shaikhSeptember 12, 2017 at 12:27 AM
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
AnonymousSeptember 25, 2017 at 5:57 AM
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
arvindswamyDecember 4, 2017 at 9:33 PM

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

123 HP OJ7610 Setup
YoselinFebruary 2, 2019 at 8:16 AM
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>
Surbhi SinghMarch 5, 2019 at 4:10 AM
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

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

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

In other words, it should look something like this

It should look something like this

In other words, it should look something like this

In other words, your template should look something like this

OVERVIEW OF BLOGGER TEMPLATE AFTER INSTALLING FACEBOOK COMMENTING PLUG IN

SAMPLE OF WHAT YOUR BLOG TEMPLATE SHOULD LOOK LIKE WHEN COMPLETED

In other words your code should look something like this

In other words, your template should look something like this

Facebook Sharing Debugger Process

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.

5 comments: