CSS for Custom Share Button in FBML

The FBML code to add a share button to an FBML is pretty straightforward, but if you want to use a custom image as the share button, it can be a little trickier to track down. Somewhere along the line, Facebook changed the CSS class that handled this button, so old CSS overrides on the style no longer worked.
I should mention, this is specifically for the share button in a Static FBML tab or an FBML application. The way you add a share button in an IFRAME application or Facebook Connect are different, so this doesn’t apply there.

In fact, the FBML button in a Static FBML tab or FBML application even look different, displaying (as of Aug 2010 anyway) as the old share, instead of the blue share button that is more common to see nowadays.

That’s kind of an ugly button, and doesn’t even match the rest of the styling for Facebook itself. If I want to use my own image as the share button, this is the code I’ll use:

My button, in this case, this image here, is 122px wide, so I’ve adjusted the padding and width properties in the CSS above to be 122px. You would adjust those numbers to match the width of whatever image you’re using.

This may seem too simple to have bothered to post here, but it actually took me a while to track down this information. This button used to use a .share CSS class (which I believe is still applicable in the Facebook Connect and IFRAME versions), but that CSS override no longer works.

While it’s possible to use javascript to try to rig the share functionality without using the button, it causes all kinds of problems, such as opening the share dialog in a new window instead of in the standard modal window. Really, the tag is the best way to provide a share button within FBML – every other method I’ve tried to use to “fake it” has come up sub-par.

To make matters more confusing, the code above did not work for about a week, and then randomly did (and has ever-since). But that’s Facebook for you.

It seems like Facebook is now redirecting the old documentation page that explains the meta information you can specify in this FBML tag to an unrelated page about “like” functionality. That’s a shame, since the old meta details page explained how to embed video and images a lot better than the current documentation page does.

UPDATE #1: A friend at Facebook pointed me to this page, which contains the old, working meta information options.

UPDATE #2: Delightfully, this is suddenly not working on Chrome and Safari. It was working yesterday, and may very well work again tomorrow. Sigh.

About the author

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more…

is there any way to implement this without having such a large clickable area below the button? I only want the new share image clickable without the chunk of white space below also being clickable – can I fix this in the css?

With no explanation, this share code is working again, as of Sunday at least. (Could have been sooner, but Sunday was when I noticed.) I have no explanation for it not working, as I have no explanation for most of the bugs on FB’s platform.

Cathy

It’s working for me in Safari and Firefox, but IE8 is a bust. Tried including background-image in the css and no luck there either. Thoughts?

Cathy

Is this working for you in IE8? I can’t seem to get it to work and even tried adding in background-image in case it was being finicky. Thoughts?

Hmm, progress.
Button works in firefox. All styling is removed in ie8. Fonts, colors, everything.
Page looks fine outside of FB (minus the fbml code obv) in all browsers.
Thanks for taking the time to respond, btw. 🙂

Yeah, that’s what I figured. For some reason, in-page styles seem safer and display far more consistently, but IE isn’t seeing them. So perhaps a compromise would be to use both – duplicate the in-page style in an external style sheet. Might be worth trying. This has been an ongoing issue with FB for a few months now. 🙁

frinkink

Sweet. Any idea how to have that image show up when a user isn’t logged in? Obviously, the share button wouldn’t work but if it’s part of a design, it’s at least somewhat helpful to the user.

Thanks so much for sharing this. I have been searching for a while for the solution to this and it worked perfectly the first time I put the code in.
I was wondering any knowledge on how to customize a like button?

Funebre

Is it possible to change the predefined “What’s on your mind” message as well?

Search

About Me

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more…