WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Facebook Like Button Flyout Getting Cut-Off (14 posts)

  1. Eckstein
    Member
    Posted 2 years ago #

    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.

  2. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    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.

  3. Eckstein
    Member
    Posted 2 years ago #

    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.

  4. udaraaka
    Member
    Posted 2 years ago #

    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 :D

  5. Eckstein
    Member
    Posted 2 years ago #

    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....

  6. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    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

  7. Eckstein
    Member
    Posted 2 years ago #

    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.

  8. ffwebdesigner
    Member
    Posted 1 year ago #

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

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

  9. Eckstein
    Member
    Posted 1 year ago #

    This solved the problem just in case anyone was wondering!

  10. amandahi
    Member
    Posted 1 year ago #

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

  11. bknutson
    Member
    Posted 1 year ago #

    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.

  12. CaptainCrunch
    Member
    Posted 1 year ago #

    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…

  13. CaptainCrunch
    Member
    Posted 1 year ago #

    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?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    CaptainCrunch, you can discuss this on your own thread.

Topic Closed

This topic has been closed to new replies.

About this Topic