Making Facebook Share Button Fit In

fetchit-21

The share buttons that are currently offered by sites such as Digg, Facebook and Tweetmeme all have something in common when it comes to their height. 61px seems to be a developing standard.

The problem is that when you line them all up the Facebook share button is actually wider than the others which seem to come in at 52px.

Well you can make the Facebook button 52px in width without too much trouble. Facebook only use two classes to style the inner ‘Share’ button which seems to be the decider when it comes to the buttons width.

By shaving a little off the left and right padding we can bring the Facebook share button back down to 52px in width and make it play nice with the other share buttons.

<style type="text/css">
span .FBConnectButton_Small .FBConnectButton_Text 
{
	padding:3px 2px 2px;
}
</style>

The extra span is just enough to beat the included Facebook css with a higher specificity score by 1 single point.

One comment.

  1. Thank you! This tip is exactly what i was looking for!