Davide Di Cillo

How to modify the Facebook Share button

Tuesday, October 27th, 2009

The first thing I thought when I found out about the new Facebook Share button was: “Cool! I’m going to add it to my blog right away.”
The first thing I thought after I installed it was: “Why couldn’t they make the button height 15px like most of the other sharing buttons around???”

Yes, I was pretty annoyed by having buttons at the top of my blog posts with different heights, so I decided to try to modify the css of the button myself. Here’s the result:

.FBConnectButton {
height: 15px;
float: left;
background-position-y: -251px;
background-position-x: -1px;
border-bottom: 1px solid #1a356e;
}
.FBConnectButton_Text {
font-size: 8px ;
height: 9px;
}
.fb_share_count_inner {
height: 9px;
position: relative;
}
.fb_share_count .fb_share_count_right {
float: left;
}

Just copy and paste these few lines of code into your CSS file and your Facebook Share button should be the same size of your compact Tweetmeme button.

I may do more modifications in the future to improve the look of this reduced version, but for now this is usable enough for my blog.

Tags: CSS, Facebook, Facebook Connect, How to
Posted in Design, Developing | 10 Comments »