Facebook's iframe widget refuses to sit where I put it

  • Resolved UnnumberedT

    (@unnumberedt)


    11 years, 3 months 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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    Thread Starter UnnumberedT

    (@unnumberedt)

    11 years, 3 months 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?

    Thread Starter UnnumberedT

    (@unnumberedt)

    11 years, 3 months 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’?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    vertical-align: middle;

    Thread Starter UnnumberedT

    (@unnumberedt)

    11 years, 3 months ago

    That did the trick. Thanks much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Facebook's iframe widget refuses to sit where I put it’ is closed to new replies.