WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Facebook's iframe widget refuses to sit where I put it (6 posts)

  1. UnnumberedT
    Member
    Posted 1 year ago #

    Hello folks, I've got another odd problem. So, once again, I'd again appreciate your help. The problem is here:

    Specifically, the bottom half of this page shows an unordered list of ways folks can help support my project. One of those items is 'like this project on Facebook'. Thus, I wanted to have a Facebook 'like' button sitting at the end of that sentence/item. I hopped onto Facebook, got the iframe code for their like-button widget, and pasted it into my html code, just before appropriate closing . The button now appears on my page. Horizontally speaking, it's in the right place. Unfortunately, vertically speaking, it's elevated +1 lines above where it ought to be. This is true in both Chrome and IE9.

    I'd like to be able to fix this. To shift the button down to where I'd hoped it would be. Any advice on this issue would be greatly appreciated.

    Thanks,

    Tim

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Remove the margin bottom on the iframe.
    Are you using some-sort of Custom CSS plugin or a Child Theme?

  3. UnnumberedT
    Member
    Posted 1 year ago #

    That improves the situation, but doesn't completely fix the problem.

    I'm using a child of Twenty Twelve, but with just two small changes: I tweaked the image behavior so that I could remove the drop-shadows, and added transparency to the page-body-background.

    I added a margin statement to the iframe like so:

    <iframe style="border: none; overflow: hidden; width: 90px; height: 21px; margin:0" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ffireandflora&send=false&layout=button_count&width=90&show_faces=true&font&colorscheme=light&action=like&height=21" height="240" width="320" frameborder="0" scrolling="no"></iframe>

    but the widget still sits a bit above where I expect.

    I added a marginheight modifier like so:
    <iframe marginheight="0px" style="border: none; overflow: hidden; width: 90px; height: 21px; margin:0" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ffireandflora&send=false&layout=button_count&width=90&show_faces=true&font&colorscheme=light&action=like&height=21" height="240" width="320" frameborder="0" scrolling="no"></iframe>

    but that didn't result in any additional improvement.

    Could there be other tags/parameters I'm missing?

  4. UnnumberedT
    Member
    Posted 1 year ago #

    I reduced height to 19, and that made it a bit better. If height is less than that, then the bottom of the button gets cut off.

    This seems awfully fiddly. Is there not a way to say 'fit to size of button'?

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Maybe you want to add the CSS vertical-align to the iFrame;

    vertical-align: middle;
  6. UnnumberedT
    Member
    Posted 1 year ago #

    That did the trick. Thanks much!

Topic Closed

This topic has been closed to new replies.

About this Topic