I spent some time testing this morning…
The Facebook “Like” button works fine on all my websites, except for my vanilla ‘admin’ website that still uses the 2011/2012 themes. After setting the overflow property, the “Send” button worked well, but the “Like” button was still getting clipped. I tried a bunch of CSS tricks, but none worked. It’s only after changing themes that it started working. So, in my experience, I’ve only been able to reproduce the problem on the 2011/2012 themes.
I’ve updated the FAQ with a little info on this issue. Hopefully the guys at Facebook will fix this issue, or some WordPress user will track down why it’s only happening in the 2011/2012 themes (or I’m guessing themes that have used these as a starting point).
Let me know if you find a way around it.
Thanks,
js.
Adding the following style into my stylesheet helped fix this issue for me.
[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]
.fb-like span{
width:472px !important;
}
I’m also using a 2012-based theme.
Excellent! Thanks. I’ll post it in the FAQ.
I’ve been thinking of including a “default stylesheet” with NGFB, but I haven’t figured out the best way yet… Maybe a checkbox to include a stylesheet, or maybe a text area…
Anyway, thanks again.
js.
Spiraleye,
Small problem with your solution – by making the SPAN tag longer, it layers over anything else (like a Google+ and Twitter button) which may be on the right side.
This solution works better for me:
.ngfb-buttons iframe { max-width:none; }
js.
Thanks! Your solution is better 🙂
My buttons were underneath each other so I didn’t see that problem…
Super plugin! 🙂
OK I’m using a Genisis News Theme and I’m having trouble with the Facebook flyouts. http://scautostx.com/car-care-tip-windshield-water-repelent at bottom of article. Thanks for helping.
Your .entry-content DIV has it’s overflow set to hidden. The following CSS code should fix it:
.entry-content { overflow:visible !important; }
js.
wow! you are fast. I’ll give it a try. Thanks so much for your help. Have a wonderful day.
No prob. Don’t forget a small donation and good rating goes a long way. 😉
js.
I too managed to fix my CSSs. Thank you.
For the Woothemes Canvas theme, this CSS-fix worked for me on the right sidebar:
#sidebar, .two-col-right #main-sidebar-container #sidebar {
overflow: visible;
}
http://destinationkohkood.com
