Davide Di Cillo

How to modify the Facebook Share button

October 27th, 2009
Share

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: , , ,

  • http://www.theweeklydope.com The Weekly Dope

    Hey! Just wanted to say thanx for the smooth tutorial for modifying the facebook share button. We’ve been trying to figure it out for the longest! thx. again…

  • http://techono.com Arbaz

    hey i really need this, if you can help, problem is when i place the code which facebook has given, the share count is not showing on page load until i click on share button. i need the code which some blogs have and that show count on page load. waiting for your reply. Thanks

  • http://www.filmslive.net BlackAngel

    Thank you for this tutorial

  • Gopi Namasivayam

    Hi,

    How can i modify the share button script to be added to my web page, but with reference capabilities.

    Scenario:

    Currently my website has the share button. I want this share button, when clicked; a box should pop up asking to enter his of her name.

    Then when the name has been entered, the sharing would be posted on FB. The link should be having my name on it.

    e.g: http://www.domain.com/ref=gopi

    The reason why i want this is because, on the website there is a inquiry form, where when users visit this website and they seem interested to know more, they could fill out the inquiry form.

    The problem is users who fill out the inquiry form sometimes forget to fill out the introducer information, and this has caused the leads to go to anybody, coz we don’t know who is it from.

    So if anyone who clicks on the shared link with the example address (http://www.domain.com/ref=gopi), on my webpage the name gopi is automatically inserted into the introducer column.

    Hope to get a reply soonest, and have a great day.

    Please also advice if you don’t understand the scenario. It’s more like affiliate marketing the links.
    :)

  • http://www.DavideDiCillo.com Davide Di Cillo

    I honestly never tried to do that, but my best guess would be to invite your users to login on your site with facebook connect, in that way you should be able to access their info and create a dynamic link with a reference to their profile.

  • Gopi Namasivayam

    alright, thanks for the reply..i’ll try that.. :)

  • Destrossecret

    Very useful! Cheers.

  • Anonymous

    test

  • Anonymous

    Very interesting. I don’t actually have the SHARE button yet… Any chance you can point me in the right direction as to how to do that ? I’m trying to add it to my Tumblr page. I added Disquis comments but it doesn’t seem to come with the FB Share button. Thanks!

  • Anonymous