I just discovered that the iframe version of the Facebook Like button doesn’t honor its query parameters when the iframe is created with JavaScript, rather than included directly in the document’s HTML.
Please have a look at this jsFiddle that I created:
I generated a Like button at the URL linked above and first included the HTML exactly as it was provided. Then, I broke it down into the JavaScript code needed to create and append an identical element to the DOM.
In the “Result” window, you’ll see the HTML version of the button on top, and the JavaScript-created version below. While the value of the src attribute is identical for both (as well as all other HTML attributes), the lower button doesn’t appear to honor any of the parameters that I’ve passed, such as colorscheme or font.
Does anyone know why this is happening, or have any suggestions for how I might avoid this behavior?
The use case here is that I’m creating HTML ads that will include the iframe version of the “Like” button; a requirement is that the ad can only load 50KB of data initially, then up to 1MB after window.onload has fired. Since the “Like” button weighs in over 50KB alone, I need to construct the iframe using JavaScript after window.onload rather than just including the <iframe> element in the ad’s HTML.
When you add url using HTML, html entities are automatically decoded. This doesn’t nappen in javascript. So you need to decode the url before passing it to javasript eg:
Hope this helps
Updated JSfidle:
http://jsfiddle.net/qQsCC/1/