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:

.ff3.mac .uiButtonMedium {
padding-bottom:1px;
}

a.uiButtonMedium {
}

.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover {
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
  display:block;
  float:left;
  width:122px;
  height:0px;
  padding:42px 0 0 0;
  margin:0;
  border:none;
  background:url(http://www.snipe.net/wp-content/uploads/share_button.png);
  background-repeat: no-repeat;
  overflow:hidden;
}









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.

UPDATE #3: It’s working again. Absolutely no fucking explanation whatsoever.

Advertisement

468x60_makemoney

Advertisement

Themeforest
fbjs-thumbnail-slideshow
Previous post

FBJS Image Carousel for FBML Apps & Fan Page Tabs

Next post

Using JW Player in FBML to Bypass YouTube Video Ads

snipe

snipe

Iā€™m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Kkentt2000

    this is so cool..!!
    but how can i put the share button on the middle of the page?
    by adding

    ?
    if yes, then where should i put the

  • You would put the share button inside a div tag, and use CSS to center the contents of the div.

  • 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?

  • Yes, you would edit the CSS so that the size matches whatever the size of your button, as mentioned in the article.

  • No sure how that works – looking at your button on your facebook page – the area of whitespace below the button is fully clickable (not just the button) – is that how you have designed it?

  • That’s how it’s currently coded, yes. As I said, you have to edit the CSS to match what you’re looking for. Change the padding to the height of your button. Not rocket science.

  • ok – thanks

    I see you have edited the padding now for your button – the 122px padding confused me in my simple way

    This is a great resource snipe – much appreciated

  • Yes – edited for clarity, so I don’t get more comments like this šŸ˜‰

    Incidentally – the code above is borked on Chrome and Safari today. No idea why. it worked fine yesterday. And the week before. Have I mentioned how much I hate facebook? Bah.

    I’m going to see if I can track down a bug reponsible, or at least hack together a workaround that gets past whatever the Chrome/Safari issue is today.

  • 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?

  • Have you tried using an external style sheet?

    • Creativitymaker

      How do I use this external style sheet in IE. This works fine in MF and chrome.
      Please šŸ™ New to facebook coding šŸ™

  • is there a way to pre-populate the the status message (“What’s on your mind?” box) when the once a user clicks on the Share button?

    Thanks.

  • Does this still work? I’m trying to put it in an FBML page and I’m just seeing the standard share button. Floats in css don’t seem to be working either. FB dev isn’t fun.

    • Yep, this is still working. Floats are too. What browser are you using?

      • IE8, Firefox, Chrome..all does the same thing.
        I’m using an external css file stored on our server, and the fb button images is also stored there. Some css works, other stuff doesn’t.

      • And what happens when you include the CSS in the main HTML area?

      • 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.

    • It should show up anyway when the user is logged in. If the user isn’t logged in, once they click on it, Facebook goes through the steps to log them in.

  • Kai

    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?

  • So how do you get rid of the drop shadow at the bottom, when FB deems “-moz-box-shadow” as invalid, and strips it?

    • I should clarify, FB will not allow “-moz-box-shadow” on a tab.

      • Olivier_atton

        Same problem. The result is a line under the button.

  • Inzi

    Hi

    thx for this great job
    But I am confused now..

    If u use your code + image I dont see the word “share”

    Then I replace it with my jpg and I see the word “share” ober the jpeg.
    I can get the word “share” behind the image, like u did. I cant see any word on your template.

    What’s wrong? I dont get it šŸ˜‰

    thx, really good work.

    • I’m not sure I understand. The word “Share” is part of the image itself. It’s not separate text.

      • Inzi

        See this picture pls (its on my google picaso album)
        http://lh6.ggpht.com/_OytX26PQsPk/TSccSWElP8I/AAAAAAAAADk/R0Sla6IzQxI/Unbenannt.jpg

        If I replace your “pink-image” with my image – I see the share button, if I use your pic, this “share button” is not there. Hope u understand now šŸ˜‰

        The next problem now is with IE – wont work. I have seen your post above
        “Just use an external style sheet instead of inline. “, just have to find out how to do that.

      • dualaudi

        Inzi, I too am getting the “text” Share with a bubble icon just before it. This is how I am hiding it.

        .uiButtonText { display:none;}
        .uiButton .img { display:none;}

        This is in a so My external css looks like this:

        #masthead .uiButtonText { display:none;}
        #masthead .uiButton .img { display:none;}

        Snipe, THANK YOU!!!! love this css code.

  • Tester

    Thanks so much for this! Much appreciated! This has been working on Chrome and Firefox but is not working on Internet Explorer!! šŸ™ Do you know why??

    • Just use an external style sheet instead of inline.

  • Untitledmgmt.com

    its funny how these things work one day and not the next. it now will now show share in any browser except for in safari…. AHHHH

  • Luka032

    snipe how can i show hyperlink after share button click, code please ? thanks in adv. luka

  • FerrIT

    hahah update 3 is classic!

    omg why oh why do they have to disable shit like tags in static fbml…..

    created a FBML app, put it in a tab, ticked both FBML boxes for app and tab, and i get “unknown tag fb:like” …. seriously?! WTF?

    ever noticed FBML is like FML but with extra B (bullshit)
    Fuck my life haha