Support » Fixing WordPress » Facebook Like Button Flyout Getting Cut-Off

  • Eckstein

    (@eckstein)


    Link: http://theseattlevineproject.com/growing-up-drawing-making-cookies/

    There is a like box at the top of the website as well as one above each post on my blog. One is inserted using the iframe code from Facebook, the other is being inserted via the Shareaholic plugin automatically.

    Both of them, when you click “like”, cut the width of the flyout that pops up to whatever the width of the text seems to be. I have spent hours trying to figure out what CSS I can change to get this to stop happening. I’ve played with overflow on dozens of different elements and can’t find what I need to change.

    If you take a look at the link above and click “like” on either button, you’ll see the behavior (I promise I’m not just trying to score free likes here!)

    Any help would be appreciated.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Pioneer Web Design

    (@swansonphotos)

    I promise I’m not just trying to score free likes here

    Trust me, that does not happen….

    As for your issue, use one method (not two) to load the scripts from Facebook.

    Eckstein

    (@eckstein)

    I removed the code from the header (both the script and the div that holds the button itself) and the issue is still happening on the buttons on the post. I have used Shareaholic like-buttons before exactly like this and not had any issue, which is why I’m confused as to how to fix it.

    Thanks for you your help.

    udaraaka

    (@udaraaka)

    I promise I’m not just trying to score free likes here

    Yes I too visited your page but I didn’t click it cos I am logged in facebook. sorry 😀

    Eckstein

    (@eckstein)

    You can click the like button and then un-click it immediately, it’s not like you’re stuck liking the page forever….

    Anyway, I disabled all plugins having to do with Facebook like and simply inserted the code the manual way (in the header, by the logo this time) and I’m still getting the same behavior….

    Pioneer Web Design

    (@swansonphotos)

    It seems to take quite a long time to scan your site – as FB now uses a third party to scan links, you may wish to improve your page speed (these scanners give up if site is too slow and restrict the URL’s).

    https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Ftheseattlevineproject.com_2F&mobile=false&rule=____critical__path

    http://validator.w3.org/check?uri=http%3A%2F%2Ftheseattlevineproject.com%2Fgrowing-up-drawing-making-cookies%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Eckstein

    (@eckstein)

    Thanks, I might do that later. Right now I just want to figure out how to get the flyout to expand to the proper width.

    Any ideas on that would be helpful.

    that one was quite difficult. add this to your css:

    .fb-like span{overflow:visible !important; width:450px !important; margin-right:-375px;}

    This solved the problem just in case anyone was wondering!

    Thank you, ffwebdesigner. I spent about an hour trying to solve the FB like button mystery, and your CSS did the trick.

    Thanks ffwebdesigner – that also solved my problem! I bet this has to do with the twentytwelve theme but I haven’t narrowed down what is causing it yet.

    Thank you ffwebdesigner!
    That solved my problem as well, as I had the same issue with the ‘like’ fly out. I am using Blaskan as foundation for my own child theme, so it might not be connected to twentytwelve…

    Well… I thought it worked for me — however… As I’m using a responsive theme, this causes new issues. When I load the website on a mobile device it zooms out because the width extends over my wrapper now.

    Gosh this is just so frustrating — trying to solve one problem causes another. I really don’t know what to do. And what I don’t understand is what causes the fly out to be cut off in the beginning. Is this WP related?

    Moderator Andrew Nevins

    (@anevins)

    CaptainCrunch, you can discuss this on your own thread.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Facebook Like Button Flyout Getting Cut-Off’ is closed to new replies.