Skip to main content

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.

Comments

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

Thanks!

Popular posts from this blog

Add A Custom Redirect, If You Change A Post URL

When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.

Jump Break Is Visible Only In An Index Page

Some blog owners are unsure what a Jump Break looks like, when applied to their blogs. Occasionally, in Blogger Help Forum: Get Help with an Issue , we see the confusion. Where's the Jump Break? or I added a Jump Break to several posts, but it never shows up! When asked for a screen print of what they're seeing, they may provide a image of the post, in the Post Editor Preview window - or possibly, the published post, but in post page view.

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 - Bloggin...