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:
[html] .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.
