Tech Tips on Computers, Internet, Blogging, Web Development, Social Media, Android and more

Full width home advertisement

Post Page Advertisement [Top]

If you are looking for a way to integrate Facebook Social Plugins - Facebook Like, Share, Comment, Page -on Blogger, check out my previous post "How to add Facebook comment box to blogger?". The post is about adding Facebook Comment in Blogger but the process is the same for other Social Plugins. In this post, we will see how to resolve the XML Parsing error that we get when we integrate Facebook Plugins in Blogger.

How to resolve the XML Parsing error when integrating Facebook Social Plugins in Blogger? 

The steps involved in integrating Facebook Social Plugins is also described in details in the previous post.

The process of integrating Facebook comment with Blogger blog involves the following steps:
1) Creation of Facebook app specifically for the Blogger blog site in Facebook Developers page.
2) Facebook Social Plugin code generation.
3) Integration of Facebook Social Plugin code with Blogger template.
Please refer to the previous post for details steps of all the above.

Assuming that you have completed the above two steps (refer previous post- How to add Facebook comment box to blogger?), we can now proceed with the third, that is to integrate the Facebook code generated for the social plugins in Blogger template. Facebook provides two code blocks that we need to integrate with Blogger - First one is to be added to the Blogger main template after the <body> tag and the second one can be added to a Blogger widget. When we add the first Facebook code in the Blogger template and try to save the template, we get the following XML parsing error -
Error parsing XML, line 663, column 64: The reference to entity "version" must end with the ';' delimiter.
Let's see the steps one by one. Before editing your Blogger template, please make sure that you backup your Blogger template first.
  • Login to Blogger and navigate to the Blog's Template.
  • After backing up the Blogger template, 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?
  • Find the <body> tag. The <body> tag would not be exactly <body> but would look like <body ....some code ....>
  • From the Facebook Developer page where we have generated the Facebook Social plugin code (refer previous post), copy the first code -  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".
  • Now 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.
  
Blogger template Error parsing XML

The cause of the XML Parsing error is the ampersand (&) before "version" and "appId" in the line starting with js.src is not getting parsed. 
  • Edit the code by changing "&"(ampersand) highlighted in red below with "&amp;" highlighted in green below
Before Edit: 
 <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 "&amp;"
 <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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;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. 
Now let's add the second Facebook Code:
  • Go back to the Facebook Developer page open, and copy the second code under "Place the code for your plugin wherever you want the plugin to appear on your page.", which looks like:
<div class="fb-page" data-href="https://www.facebook.com/pagename/" data-tabs="timeline" data-width="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/picturethattoopage/"><a href="https://www.facebook.com/pagename/">Page Name</a></blockquote></div></div>
  • In Blogger Blog dashboard, click on "Layout"
  • Click on "Add a new gadget" > Add HTML/JAVASCRIPT widget
  • Paste the second Facebook code in the Blogger HTML/JavaScript widget area and save it.
The above workaround is the same for any Facebook Social Plugin you want to add. Hope you found this post helpful. And if it does, share it! Share the knowledge!

If you have any queries on this and suggestions, please share your views in comments.

Related previous post:
How to add Facebook comment to blogger? (New Blogger Template)

6 comments:

  1. Nice you solve my problem in Parsing error code of FB application. Thanks so much bro

    ReplyDelete
    Replies
    1. Welcome Arnel. I am glad this post was helpful to you.

      Delete
  2. Works like a charm!
    I've implemented it on my site http://www.affordableresorts.net/

    ReplyDelete
  3. Thank you, Techubber. You solved my problem easily :)

    ReplyDelete

Bottom Ad [Post Page]