How To Add Facebook JavaScript SDK To Blogger Themes Without XML Error

The Facebook JavaScript SDK is an handle set of client-side functionality for adding, implementing or embedding Social Plugins, Facebook Login and Graph API calls to desktop or mobile web. If you own a blog, the facebook javascript SDK will also enable you to add and use the Facebook like button, send button, page embed, and other Facebook social plugins on your blog.


An example is the default Facebook JavaScript SDK code, with the appid of my blog in it :

<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.10&appId=145954655992605";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Facebook requires that users to add the javascript sdk code right after the opening <body> tag in our blog's html to enable Facebook social plugins display and ork on your blog effectively.

Unfortunately, adding the Facebook JavaScript SDK code to your Blogger blog is not possible as it will display an error while saving. Therefore, in this post, I want to share with you, how to add and embed the Facebook JavaScript SDK to Blogger themes/templates without getting xml error while saving the code.

Add Facebook JavaScript SDK To Blogger Themes


Sign in to your Blogger dashboard, click on "Theme"

Click on "Edit HTML"

Use "CTRL F" to find the opening <body> tag

Right below the opening body tag, paste this code ;

div id='fb-root'/>
&lt;script&gt;(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.8&amp;appId=150436614997987&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;


Change the highlighted coloured appid to the application id of your blog.

Click "Save Theme".

Your Facebook Javascript SDK Code should be saved by now.

If you don't know your facebook application id, use the below javascript code.

<div id='fb-root'/>
&lt;script&gt;(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.8&amp;appId=&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt; 




Alternatively ways? 


Once you have generated your Facebook Javascript SDK Code, Add the line <div id='fb-root'/> below the opening <body> tag at first.

Then, copy the remaining script part of the default code and parse it using our parsing tool

After parsing it, paste it directly below the <div id='fb-root'/>

Click "Save Theme"

I hope this helps. Cheers. Don't forget to share with pals. 

Comments