A Thinner Facebook “Share” Button

The trend is growing to include a “social bar” or a “share bar” to allow visitors to share the web page with their friends on different social networks.

For example, Facebook also includes a “share” button of their own, where you can drop in a simple HTML line, and presto. A magic share button.

While having a “share” button is great, there is an inconsistency of the size of the “share” button, which makes things look a bit out of place.

Inconsistent share button widths

I noticed on Mashable, that their share buttons were exactly the same width.

This is great and all, but I needed to reproduce it on my site. I opened up Firebug, and went digging.

After snooping around, I found the required CSS class.

.FBConnectButton_Small{background-position:-5px -232px !important;border-left:1px solid #1A356E}
.FBConnectButton_Text{margin-left:12px !important;padding:2px 3px 3px !important}

Now dump it into your stylesheet, and enjoy the slimmer Facebook share button.

Same size "share" button widths