Why is my Facebook Like button broken?

Question

I've seen a couple of problems similar to what I'm having, but none of the solutions I've seen work, including the Facebook lint tool. My Facebook-generated code, modulo an escape() of window.location, is presently commented out, and is in what is almost a bare JavaScript include:

document.write('<iframe src="http://www.facebook.com/plugins/like.php?app_id=142676242492854&amp;href=' + escape(url) + '&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:167px; height:40px;" allowTransparency="true"></iframe>');

or the other one based on the lint tool:

document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + escape(url) + " scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe>');

There are a couple of tuning things in that I just want a bare button, no annotations about friends who've clicked the button, but I'm not fiddling with that just yet; I have another problem.

If you click the button, it changes momentarily and says that you like it; but the button does not turn from light grey to blue for its background. Furthermore, it does not stick across a page reload.

Is there code I can/should replace the above JavaScript with to include a working Like button? The site is at http://JonathansCorner.com and the line of code is (commented out in) a sitewide JavaScript include.

Answer 1

document.write is evil, don't use it.

If it's a static page (which your site seems to be) then just add the iframe in the body of the HTML where you want it.

If you really want to add the button client side in JS, use the JS SDK ( https://developers.facebook.com/docs/reference/javascript ) and add the button like so:

var dynLike = document.createElement('fb:like');
dynLike.setAttribute('href', myEncodedURL);
dynLike.setAttribute('send', 'false');
dynLike.setAttribute('width', '450');
dynLike.setAttribute('show_faces', 'false');
document.body.appendChild(dynLike); // Or wherever you want it
FB.XFBML.parse();