An Important Update

Dear Followers Of This Blog ...

If you did not use a Blogger / Google account when you Followed this blog, years ago, you are probably not Following now . During the past...

Wednesday, March 16, 2016

Add A FaceBook Gadget With FaceBook SDK Code

Some blog owners can't get their new FaceBook gadgets to work, on their blogs.

We see the occasional report, in Blogger Help Forum: Get Help with an Issue.

The blog won't accept the code that Facebook Developer generated for me.

Adding HTML gadgets - and HTML gadgets using FaceBook code - can be frustrating. But, it's possible.

Adding a FaceBook gadget, to your blog, is not difficult - but success is found, in the details.

  • Add the gadget as a new HTML gadget.
  • Add the FaceBook SDK code, to the first FaceBook gadget.

Add the gadget as a new HTML gadget.

Blog maintenance is far easier, with a FaceBook gadget - or any other HTML / JavaScript based accessory - added as content, in a new HTML gadget - far smarter than using Template Editor.

Add the FaceBook SDK code, to the first FaceBook gadget.

FaceBook instructs us to add SDK code to each page which will display a FaceBook gadget - but advises that we should only add the SDK code once / page.

Gadget code, as provided by FaceBook Developers:

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>

Gadget code, as added to a new HTML gadget:

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

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>


A new FaceBook gadget, being added.



Just pay attention to the details, for best results.



Some #Blogger blog owners try to add accessories provided by FaceBook Developers, without success. They don't realise the importance of the details involved.

Dude, hit me with a comment!

Lisa Michele said...

And, how did you get to that editor? Where is it?

Thanks!

Chuck Croll said...

Hi Lisa,

Thanks for the question!

That is the editor that you get, when creating a new HTML / Text gadget.

http://blogging.nitecruzr.net/2013/11/updating-text-gadget-on-your-blog-be.html