You are here: Home / Archives for great success!

howto: tweetmeme and facebook share buttons aligned

June 21, 2010 by Andrea D'Intino · 1 Comment 

HELLO WORLD,

A super-fast post here, for those of you who are geeky, blogs/sites, but don’t know too much about html/javascript. I’m writing this as even if the problem is trivial, I googled a bit and couldn’t find any “copy’n'paste” kind of solution, so here you are.

The problem:  the tweetmeme and facebook share horizontal buttons are disaligned

“This kinda sucks” you’d think “since they’re the 2 most populare sharing button, why didn’t they make an effort to make them aligned by default?”. Good question. But still, wait to see what the “Google buzz” button looks like! :-O

Anyway, before finding this solution I created a table around the 2 buttons,  tried using  inline CSS (vertical-align and margin) to get them aligned and none worked. What did work was usign a div tag, just copy’n'paste the following code into your webpage and it should work fine:


<table>
<tbody>
<tr>
<td>
<div style=”float: left; margin-left: 0px; padding: 6px 0px 0pt;”>
<script type=”text/javascript”> tweetmeme_style = ‘compact’;</script> <script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”> </script>
</div>
</td>
<td>
<div style=”float: left; margin-right: 12px; padding: 4px 10px 0pt;”>
<a name=”fb_share” type=”button_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</div>
</td>
</tr>
</tbody>
</table>


You can see the result on our forum.

Notes: always get the latest scripts from tweetmeme and facebook. As the buttons change, you may need to play around with the values a bit…


Edit: on this blog we’re currently using the amazing Digg Digg plugin and the wibiya toolbar (we’re still using the 2 buttons on our forum).

Filed under English · Tagged with , , , , , , , ,