Hi!
I’ve got the same problem. It took me many hours of debugging but (with the help of a friend) I found the cause within the style.css:
/* Make sure embeds and iframes fit their containers
----------------- */
embed,
iframe,
object {
max-width: 100%;
width: 100%;
}
So, the max. width of the iframe is limited to the width of the container (in this case, the FB button). I don’t know if there is a sane reason for doing this (most themes don’t) but if you remove the “max-width” line it should work correctly! At least it does for me…
In case you’re interested: I chose a less “invasive” solution and only disabled this “feature” for iframes:
embed,
object {
max-width: 100%;
width: 100%;
}
Just in case there’s a good reason to limit the width of embeds 😉
Thanks for your reply: I tried both the solutions, but none of them gave me back any result 🙁
I checked your site and it seems that the CSS code is not overwritten in your child-theme. If I make the changes within the original style.css (with Firebug) your like button works correctly!
I don’t know what’s the problem with your child theme (tell me if you find out). I made a copy of the original theme and maintain it myself. Partly because I modified PHP code but also because that child-theme thing never worked correctly for me either…
I overwrote it directly on the parent theme and now it works, but yet I don’t understand why it wasn’t working before.
Now I have another issue: since I’m using also the Contextual Related Posts plugin (http://ajaydsouza.com/wordpress/plugins/contextual-related-posts/) which places thumbnails of related articles at the bottom of my own, when I hit Like/Send button, Facebook plugin does not grab the right thumbnail for the link to be sent, but it chooses randomly between one of the five (the one of the main articles plus the four of the linked articles).
Any idea on how fixing this annoying issue as well?
The Facebook plugin will explicitly define your webpage preview image if a post thumbnail is present.
