Facebook, Twitter, G – Remove Extra White Space
This is occurring on two sites I manage:
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
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?
Here’s a link to that moderated out code on PasteBin:
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?
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.
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.
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.
- The topic ‘Facebook, Twitter, G – Remove Extra White Space’ is closed to new replies.