Feel free to check out my blog here.
When attempting to click the "LIKE" button, the pop-up appears at the correct height, but the width is limited to the size of the button.
Below is the CSS code I am using:
.blog_social_media {
float: right;
border-left: 1px dotted #666;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
overflow: visible;
}
.blog_social_media div {
position:relative;
display:block;
float:left;
}
iframe.fb_ltr {
width: 300px !important;
}
.blog_twitter_button {
width: 55px;
height: 62px;
margin: 0px 0px 10px 10px;
}
.blog_facebook_button {
width: 50px;
height: 63px;
overflow: visible !important;
margin: 0px 0px 10px 10px;
}
.blog_googleplus_button {
width: 50px;
height: 64px;
margin: 0px 0px 10px 10px;
}
And here is the HTML code snippet:
<div class="blog_social_media" style="width:65px; height:auto;">
<div class="blog_twitter_button">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="brixwork" data-related="sonikastudios">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="blog_facebook_button">
<div class="fb-like" data-href="http://www.brixwork.com/realtors/blog/seo/three-reasons-to-claim-your-place-on-google-places/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="lucida grande">
</div>
</div>
<div class="blog_googleplus_button">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
I have set overflow:visible; for all elements enclosing the Facebook balloon, which works fine for Google+ popup but not for Facebook. Any suggestions on how to fix this issue would be greatly appreciated.
Thank you in advance for your help!