Facebook 'Like' Box Not Loading in Hidden Element

On my home page I have a couple of social links - one to my Twitter account and one to my Facebook business page.  Both of these links display a kinds of CSS speach bubble, containing either my latest tweet, or my Facebook page 'like' button when they're hovered over.

This functionality is straightforward: the speach bubble is a hidden element, until a visitor hovers their mouse over the title, at which point the hidden element gets displayed.

Originally I set this up using (for example):

#facebox .speech{display:none;}
#facebox:hover .speech{display:block;}
//obvisouly this is missing out my bubble styling which is really just a div with rounded corners

This works fine for the Twitter bubble, but the Facebook button wouldn't display within the visible element.  I'm not entirely sure why this occurs - if you know, please leave a comment below and I'll update the post.

Anyway, to solve the problem, I changed my CSS to something more like this:

#facebox .speech{opacity:0;}
#facebox:hover .speech{opacity:100;}

Using opacity instead of display commands ensures that the like button is loaded into the page correctly, but still gives the desired hidden/displayed effect on :hover.

Simple!