Align twitter and facebook buttons on my page

Get Started
1

Im trying to align the Facebook, twitter, and Google +1 button on my website hopefully someone has already done this and has a quick solution. I haven’t signed up for Google +1 just yet im about to do that after this post. Below is the code I got and you can see the uploaded page at ukratom (dot) com (slash) home.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Kratom | Kratom Leaf |</title>
  <meta name="description"
 content="uKratom offers information on kratom, kratom powder, kratom leaf, kratom extracts, effects of kratom, where to buy kratom and more.">
  <meta name="abstract"
 content="Get information about kratom, kratom extracts, kratom effects, kratom dosage and more. Learn all you can about the wounderful kratom plant.">
  <meta name="ROBOTS"
 content="ALL=INDEX,FOLLOW">
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <link rel="stylesheet"
 type="text/css" href="styles.css">
  <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30392963-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
  </script>
  <style type="text/css">
p.c3 {text-align: center;}
img.c2 {border: 0px solid ; width: 200px; height: 106px;}
img.c1 {border: 0px solid ; width: 450px; height: 89px;}
  </style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a
 href="http://ukratom.com" title="kratom home"><img
 class="c1" src="http://ukratom.com/images/kraton_logo.jpg"
 alt="Kratom"></a><a
 href="http://www.bouncingbearbotanicals.com/ethnobotanicals-kratom-c-60_91.html?ref=4331"
 target="_blank"><img
 class="c2" alt="buy kratom, kratom buy"
 src="http://ukratom.com/images/Kratom_leaf.jpg"></a></h1>
<iframe
 src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
 style="border: medium none ; overflow: hidden; width: 650px; height: 21px;"
 allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<a href="https://twitter.com/share"
 class="twitter-share-button" data-via="ukratom">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div id="wrapper">
<div id="content"></div>
</div>
<div id="navigation">
<ul>
  <li><a
 href="kratom_images.html" title="kratom images">Kratom
Images</a></li>
  <li><a
 href="kratom_dosage.html" title="kratom dosage">Kratom
Dosage</a></li>
  <li><a
 href="kratom_effects.html" title="kratom effects">Kratom
Effects</a></li>
  <li><a
 href="kratom_extracts.html" title="kratom extract">Kratom
Extracts</a></li>
  <li><a
 href="kratom_resin.html" title="kratom resin">Kratom
Resin</a></li>
  <li><a
 href="kratom_crushed.html" title="crushed kratom leaf">Crushed
Kratom Leaf</a></li>
  <li><a
 href="kratom_powder.html" title="kratom powder">Kratom
Powder</a></li>
  <li><a
 href="kratom_tea.html" title="how to make kratom tea">How
to Make
Kratom
Tea</a></li>
</ul>
</div>
<div id="extra">
<p class="c3"><a
 href="http://ukratom.com/" title="kratom home">Kratom
Home</a>
| <a href="sitemap.html"
 title="kratom sitemap">Site
Map</a>| <a
 href="http://ukratom.com/links/link.php" title="ukratom Links">Links</a>
</p>
<div id="footer">
<p class="white">&copy;
uKRATOM.COM</p>
</div>
</div>
</div>
</body>
</html>
2

Currently your Facebook button has a width of 605px, simply change that to about 100px and it will sit nicely next to the Twitter button.

3

wow what a nice fix. I had to set it to 50px but you knew what ur talking about. Thank You. and it looks like I have just enough room for the google button

4

Well now im having troubles since i added the google button. I tried switching the twitter and google button still there’s a lot of space in between the 2. I changed the google button width from 120 to 75 but i didn’t seem to have effect. I don’t see where i can change the twitter width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Kratom | Kratom Leaf |</title>
  <meta name="description"
 content="uKratom offers information on kratom, kratom powder, kratom leaf, kratom extracts, effects of kratom, where to buy kratom and more.">
  <meta name="abstract"
 content="Get information about kratom, kratom extracts, kratom effects, kratom dosage and more. Learn all you can about the wounderful kratom plant.">
  <meta name="ROBOTS"
 content="ALL=INDEX,FOLLOW">
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <link rel="stylesheet"
 type="text/css" href="styles.css">
  <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30392963-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
  </script>
  <style type="text/css">
p.c3 {text-align: center;}
img.c2 {border: 0px solid ; width: 200px; height: 106px;}
img.c1 {border: 0px solid ; width: 450px; height: 89px;}
  </style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a
 href="http://ukratom.com" title="kratom home"><img
 class="c1" src="http://ukratom.com/images/kraton_logo.jpg"
 alt="Kratom"></a><a
 href="http://www.bouncingbearbotanicals.com/ethnobotanicals-kratom-c-60_91.html?ref=4331"
 target="_blank"><img
 class="c2" alt="buy kratom, kratom buy"
 src="http://ukratom.com/images/Kratom_leaf.jpg"></a></h1>
<iframe
 src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
 style="border: medium none ; overflow: hidden; width: 75px; height: 21px;"
 allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<!-- Place this tag where you want the +1 button to render --><g:plusone
 annotation="inline" width="75"></g:plusone><!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script><a
 href="https://twitter.com/share" class="twitter-share-button"
 data-via="ukratom">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div id="wrapper">
<div id="content"></div>
</div>
<div id="navigation">
<ul>
  <li><a
 href="kratom_images.html" title="kratom images">Kratom
Images</a></li>
  <li><a
 href="kratom_dosage.html" title="kratom dosage">Kratom
Dosage</a></li>
  <li><a
 href="kratom_effects.html" title="kratom effects">Kratom
Effects</a></li>
  <li><a
 href="kratom_extracts.html" title="kratom extract">Kratom
Extracts</a></li>
  <li><a
 href="kratom_resin.html" title="kratom resin">Kratom
Resin</a></li>
  <li><a
 href="kratom_crushed.html" title="crushed kratom leaf">Crushed
Kratom Leaf</a></li>
  <li><a
 href="kratom_powder.html" title="kratom powder">Kratom
Powder</a></li>
  <li><a
 href="kratom_tea.html" title="how to make kratom tea">How
to Make
Kratom
Tea</a></li>
</ul>
</div>
<div id="extra">
<p class="c3"><a
 href="http://ukratom.com/" title="kratom home">Kratom
Home</a>
| <a href="sitemap.html"
 title="kratom sitemap">Site
Map</a>| <a
 href="http://ukratom.com/links/link.php" title="ukratom Links">Links</a>
</p>
<div id="footer">
<p class="white">&copy;
uKRATOM.COM</p>
</div>
</div>
</div>
</body>
</html>
5

The problem is the size of the button you have chosen to use, i would recommend you use a smaller version of the G+ button which should fix the odd looking space issue.

6

I dont think so i tried 3 dif ones. I tried the small and it was too small but the gap still was there. I tried the tall and i like how that looks but still the gap is there and I flipped the 2 around .

7

Well is there any chance of you removing the div that encompasses the second iframe on the page? If so, you could just set the vertical alignment of all 3 (iframe, iframe, anchor) to vertical-align:bottom; or something like that and that way it would be consistant. Right now you could align the uncontained iframe and the anchor by using vertical alignment (some room is left at the bottom of the #header div for this very reason) but all three won’t play ball unless something gives :).

8

I just ended up taking the count off the twitter button and putting 2 html spaces in between each. I dont know how to vertical align i suck

9

Don’t feel bad. Vertical alignment is a tricky part of web design. Though with IE7 dying, we can make more use out of display:table/table-cell and tables automatically make vertical align as simple as it gets :). Might want to consider that in the future :).

10

Hi,

I use G+1 medium size, and I added this code in css.
It aligns facebook, twiter and google +1 on same line.

#___plusone_0, #___plusone_0 iframe {
     display:inline !important;
     height:24px  !important;
    }