Skip to main content

Diagnose FaceBook Gadget Problems

Adding a FaceBook developed gadget is - or should be - just like adding any HTML / JavaScript gadget.

Sometime, though, adding a FaceBook gadget just does not produce hoped for results. We see the problem reports in Blogger Help Forum: Get Help with an Issue.
The gadget is blank!
The gadget does not update anything!
The problems will typically involve gadget code - and the FaceBook Debugger wizard is unlikely to provide any help.

FaceBook supplied gadgets, when provided by FaceBook Developers from their website, are probably almost as reliable as Blogger supplied gadgets, installed using "Add a Gadget" - Basics.

Even so, adding a FaceBook Developers provided gadget is subject to known gadget problems - and some problems, unique to FaceBook gadgets.
  • Adding a third party gadget, not provided by FaceBook Developers.
  • Editing an HTML gadget, in "Rich Text" mode.
  • Using the "Add your own" code, instead of the "HTML / JavaScript" gadget.
  • Lacking the Facebook SDK for JavaScript.

Adding a third party gadget, not provided by FaceBook Developers.

Only add official FaceBook Developers gadgets, from the official FaceBook Developers website. Some known hackers have been distributing FaceBook branded gadgets, from their websites.

Using a FaceBook branded gadget, not provided by FaceBook Developers, will not be good for your blog, in the long run.

Editing an HTML gadget, in "Rich Text" mode.

If you add HTML / JavaScript code to a standard gadget, and you edit the gadget in "Rich Text" mode, the gadget will not work. Perversely, Blogger gadgets edited in "Rich Text" mode will display the caption "Edit Html".

If you edit an HTML / JavaScript gadget, with "Edit Html" displayed, you will be in "Rich Text" mode - and your HTML / JavaScript code will be interpreted as rich text. The gadget will not work.

When you edit HTML / JavaScript code, such as FaceBook gadget code, always do so with "Rich Text" displayed as a caption.

Using the "Add your own" code, instead of the "HTML / JavaScript" gadget.

When you add an "HTML / JavaScript" gadget, you must select "HTML / JavaScript" from the "Basics" menu, as found in the "Add a Gadget" wizard. The "Add your own" menu tab provides a shell for adding XML coded gadgets.

Almost everybody who reads these instructions will need to use the "HTML / JavaScript" gadget in "Basics". The few of you who do not will know when to use "Add your own", and when to use "Basics".

Lacking the Facebook SDK for JavaScript.

FaceBook gadgets need the FaceBook SDK for JavaScript. Blogger blogs with standard templates will have the SDK already - as most Blogger blogs routinely contain one or more FaceBook buttons.

The "Share Buttons" toolbar, for instance, contains a FaceBook Share button.

Some Blogger blogs - like some third party templates - may not routinely load the FaceBook SDK. If a genuine FaceBook Developers gadget, added using "Add a Gadget" - Basics, edited in HTML mode, does not work, it may need the SDK loaded. This is not difficult to do.

The SDK code can be added into an existing Blogger HTML gadget - or you may use a separate gadget. If you are adding a single FaceBook gadget - as in this exercise - simply add the SDK code in front of the FaceBook gadget code.

You might have:
<!-- Your like button code --> <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true"> </div>
Add the SDK code:
<!-- Load Facebook SDK for JavaScript --> <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); = id; js.src = "//"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Your like button code --> <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true"> </div>

And that will be that.

The bottom line is simple.

If you are adding a FaceBook gadget, simply add a standard "HTML / JavaScript" gadget, with the necessary FaceBook code. It is not necessary to use the Template Editor - nor will you need XML escape code, enveloping the HTML / JavaScript code.

Keep it simple, get it working - and get back to work, in your blog.


Popular posts from this blog

What's The URL Of My Blog?

We see the plea for help, periodicallyI need the URL of my blog, so I can give it to my friends. Help!Who's buried in Grant's Tomb, after all?No Chuck, be polite.OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Leave Comments Here

Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog. If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook.

As noted above, please note my commenting policy. If you post a comment to this post, I will probably treat it as a "Contact Me" post. If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post, not here. This post is for general comments, and for non posted contact to me.

If the form below does not work for you, check your third party cookies setting!

For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken, or Nitecruzr Dot Net - Blogging is, almos…

What Is "" vs. ""?

With Google Domains registered custom domains becoming more normal, we are seeing one odd attention to detail, expressed as confusion in Blogger Help Forum: Learn More About Blogger.My website uses "" - am I supposed to use "", instead?It's good to be attentive to detail, particularly with custom domain publishing. This is one detail that may not require immediate attention, however.