How to modify the Facebook Share button
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.
Related posts:
Trick of the day: hide Tweetmeme’s button number
How to use Facebook Chat with iChat
How to create a shiny button with Photoshop
Integrating Facebook Connect in your iPhone app
Two weeks of Magic Mouse
Tags: CSS, Facebook, Facebook Connect, How to
This entry was posted on Tuesday, October 27th, 2009 at 10:48 am and is filed under Design, Developing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
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…
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
Thank you for this tutorial
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.
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.
alright, thanks for the reply..i’ll try that..