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


The Facebook JavaScript SDK is a rich set of client-side functionality for adding Social Plugins, Facebook Login and Graph API calls to desktop or mobile web. If you are a blogger, it will also enable you to use the Facebook like button and other Facebook social plugins on your blog.

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


Facebook requires that you add the code right after the opening <body> tag in your blog's html to enable Facebook social plugins work on your blog.

Unfortunately, adding the code to your Blogger blog might throw some xml error. So, in this post, I want to share with you, how to add the Facebook JavaScript SDK to Blogger themes without throwing xml error.

Steps


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

edit html in blogger themes

Click on "Edit HTML"

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

Right below it, 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 appid to the application id of your blog.
Click "Save Theme".

If saved successfully, it will look like this:

opening body tag in blogger theme


Recommended : How To Generate Facebook appid For Your Blog

If you don't know your blog app id, use the code below:

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

Add <div id='fb-root'/> below the opening <body tag

Copy the script part of the default code and parse it.

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

Click "Save Theme"

I hope this helps.






Comments

  1. nice one mr jide check me at
    http://www.nobleshub.com

    ReplyDelete
  2. Very informative... Kudos👍 yomitech.com

    ReplyDelete
  3. nice write up. it really help my my blog. you can check it [url=www.eaglegist.com] HERE [/url]

    ReplyDelete

Post a Comment

We Love To Hear From You But Don't Spam Us With Links!

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post or you're trying to ask question about an old post, please drop it at our discussion platform here.

THANKS.