Facebook, Twitter, G – Remove Extra White Space

  • jrothra

    (@jrothra)


    11 years, 12 months ago

    This is occurring on two sites I manage:

    – http://www.jrothraministries.com
    – http://www.greggcountygop.com

    As you can see in the posts, there is an extra white space after the second social sharing button. I’ve tried re-arranging them and here’s what the results are:

    Order: FB / G / T
    Result: Extra space between G and T

    Order: FB / T / G
    Result: Extra space between T and G (same as above except T/G switched places)

    Order: FB placed in 2nd or 3rd position
    Result: FB moves down one line, no longer having all three in a row

    Here’s the code I’m using for those three

    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

    You may ask why the style="bottom:3px;" in the FB code. Without it, the FB button has three extra spaces above it, making it not aligned horizontally with the other two (see jrothraministries.com for that, since I didn’t use that styling on that page for comparison purposes).

    I suspect it has to do with the two <div> . . . </div> FB’s code uses. I got these codes from FB, T, and G. I’m not a coding pro, and so I’m baffled. What do I do? I want to maintain the flexibility of allowing FB to move over a bit as people share and the count goes from zero to anything else, and a div around all three set to a specific width would hamper that, right?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jrothra

    (@jrothra)

    11 years, 11 months ago

    Here’s a link to that moderated out code on PasteBin:
    http://pastebin.com/1YiLE7c4

    Thread Starter jrothra

    (@jrothra)

    11 years, 11 months ago

    I tried wrapping all three in a <div> . . . </div> with no specifications just to see what happened. No impact. How do I remove the extra space?

    Thread Starter jrothra

    (@jrothra)

    11 years, 11 months ago

    I tried using the iframe version of Facebook’s button, but it requires a specific URL to do that. To make it pull the current URL instead, I tried this code (seems to be what many are using):

    <iframe src="http://www.facebook.com/widgets/like.php?href=<?php  echo "http://" . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>"
        scrolling="no" frameborder="0"
        style="border:none; width:450px;"></iframe>

    However, it creates just a blank box instead of the FB button. I’m not sure what else to try.

    Thread Starter jrothra

    (@jrothra)

    11 years, 11 months ago

    One more variation: I changed the iframe code given me by FB, but added the php current URL call code in place of the URL I entered in the form on FB. Big box gone, but the extra spacing remains.

    All I want is them right next to each other, but able to move to the left as people like/tweet/plus the page.

    Thread Starter jrothra

    (@jrothra)

    11 years, 11 months ago

    Okay, this iframe code did NOT work. If you like, then refresh, it doesn’t remember that you liked it… the count resets to zero.
    <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo 'http://' . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21&appId=303087599738597" scrolling="no" frameborder="0" style=" border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>

    I’m completely lost now. Please advise.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Facebook, Twitter, G – Remove Extra White Space’ is closed to new replies.