Add a Facebook Fan Widget Using Valid Code

The code that Facebook provide for adding their Fan Page widget to external sites is not valid for the XHTML 1.0 Strict doctype. Darcy found this out as she attempted to make all of the code on her site valid, and only the widget code remained invalid for the doctype that her Thesis theme uses.

I played around with some code, and came up with something that works in all browsers tested so far, and also passes validation.

It has been tested with the following browsers:

• Firefox 3.5.7, 3.6
• IE 6, 7, 8
• Opera 9.64 (and assumed to work on later versions)
• Chrome 4.0.249.78
• Safari 4.0.4

If you find it works in another browser / browser version, please leave a comment and I’ll add it in.

The Code

<!--[if !IE]&gt;&lt;!-->

        <p class="facebook_fans_link"><a href="http://www.facebook.com/graphicallydesigning">Graphically Designing</a> on Facebook</p>

&lt;!--
<!--[if IE]&gt;-->

To make this show your fan page instead of Darcy’s, you’ll need to do a couple of things:

1. Change the numerical id value to the one for your own page. This needs changing in two places in the code.
2. Amend the fallback text (in the code above it’s a paragraph with a link) to whatever you want (see below).

The Breakdown

In short, by using conditional comments, that says to give non-IE (Internet Explorer) browsers an object and IE browsers an iframe. As the W3C Validator falls into the first category, then it doesn’t see the iframe that’s invalid for the Strict doctype, and so the code passes validation. Lets look at each main section:

<!--[if !IE]&gt;&lt;!-->
    &hellip;
&lt;!--

In this snippet, the middle section has been removed and replaced with …. The conditional comments are only understood by IE, and in this case, simply tell IE to ignore the whole section. For embedding stuff like videos, usually a classid attribute would be added to the object, but as this is plain text/html we’re bringing in, then the easiest solution is tell IE to skip straight over it completely. That leaves all other browsers with strict valid code.

<p class="facebook_fans_link"><a href="http://www.facebook.com/graphicallydesigning">Graphically Designing</a> on Facebook</p>

We add in some fallback content so that if a browser can’t display the object for any reason, then the fallback content would display instead. Here’s it’s a normal paragraph with a link. If you want to pass automated accessibility tests, then providing fallback content is required.

<!--[if IE]&gt;-->

Again we use conditional comments, but this time we’re only focussing in on IE. We use an iframe in a similar method to the object in the first section. Although the iframe is not valid in XHTML 1.0 Strict, it doesn’t matter; all user-agents, including the W3C Validator still think we’re in one giant HTML comment, so it’s all ignored – only IE is paying any attention, so the page validates.

The Styles

My demo uses the following styles:

.facebook_fans {
  border: none;
  width: 220px;
  height: 720px;
  background: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.facebook_fans_link {
  font-size:0.8em;
  margin: 0;
  padding: 0;
  padding-left:10px;
}

The first section styles the object, making it a certain width or height (you’ll probably want to change these) and removing any inherent margin and padding your site may give to the object. The second section is for the fallback text, and can probably be ignored for the most part.

Live Demo

Graphically Designing on Facebook

<!–

Bonus Tips

If you add the code above to something like a WordPress Post or Page (rather than to a template it may use), and find yourself with extra spaces, then try removing the line-breaks in the code – in testing this demo I found WordPress was automatically adding in paragraph elements as it usually does.

The number after the connections= bit in the code (twice) allows you to choose how many of your fans to show in the bottom section. Changing the number after the stream= from 1 to 0 allows you to turn the Wall Posts top section off. Changing either of these may mean you’ll want to change the height value in the CSS.

Have you found this useful? Did it work? Any problems? Let me know!