Aligning sharing buttons

Are you using the Twitter buttons? It shouldn’t be iframes. Should be js.

I took out the iframe for twitter, kept the iframe for facebook (it needs it), put them in divs, floated the divs, and wala I got it to align.

If you use the Facebook JavaScript SDK you can ditch that iframe. That might help your cause a little bit.

Load the SDK:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Add your like button:

<fb:like href="https://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>" layout="button_count"></fb:like>

More info on that here.

This is all well and good…. but I am not using the twitter buttons or another buttons with iFrames (new styles removed these… and linked in and google seem to sit lower than the rest….

<div class="floater">

<script type="text/javascript" src="https://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right"></script>

<a title="Post to Google Buzz" class="google-buzz-button" href="https://www.google.com/buzz/post" data-button-style="small-count"></a><script type="text/javascript" src="https://www.google.com/buzz/api/button.js"></script>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="pinnaclenetwork">Tweet</a><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
<!-- Begin
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<a class="contact" HREF=\"mailto:\?subject\=Take a look at this page I found, ' + document.title + '?body=You can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page">Email to a Friend<\/a>');
}
else { document.write('<a class="contact" HREF=\"mailto:\?body\=Take a look at this page I found titled ' + document.title + '. You can see this page at: ' + window.location + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/email.png"><\/a>');
}
// End -->
</script>
<span class="st_sharethis_custom"><img border="1px solid #ccc" src="<?php bloginfo('template_url'); ?>/images/share.png"></span>

<script type="text/javascript" src="https://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
        stLight.options({
                publisher:'12345',
        });
</script>
</div>

and the styling

`<style>
#mainwrap { padding: 50px 220px; text-align: justify; }
.floater { background: #eee; border:1px solid #ccc; position: abolute; top: 276px; left: 120px; padding: 10px 10px 10px 10px; height: 20px; width: 500px} }
ul { padding: 1em; margin: 0;display:inline-block; link-style-type:none;}
</style>’

the above can be viewed here https://pinnaclenetworking.com