If you’re not on the HyperArts blog, Click Here
The FBML tag fb:share-button is quite versatile. You can add it multiple times to your custom tab, say for each item on the tab you’d like to provide the user the ability to share to their Facebook Profile, specifying an image for the popup dialog box, a URL link and a custom message.
And you can either have a default “Share” button or create your own custom button image to use instead of the default button.
In this article, I will show you exactly how to use the fb:share-button FBML tag, and I will explain what the different parts of the code mean.
NOTE: The lack of any Facebook documentation for fb:share-button indicates to me that at some point it won’t be supported. Facebook is in the process of nudging developers to use XFBML and not FBML. It may be supported for years, but no one outside of Facebook really knows.
Creating the FBML Share Button with Default Button
Here is the basic FBML code for the Share Button (the values are just examples):
<div id="share">
<fb:share-button class="meta">
<meta name="title" content="HyperArts"/>
<meta name="description" content="Read the Static FBML Bible and Rejoice!"/>
<link rel="image_src" href="http://www.hyperarts.com/facebook/static-fbml-bible/_img/share-img-100x150.gif"/>
<link rel="target_url" href="http://www.facebook.com/StaticFBMLBible"/>
</fb:share-button>
</div>
The above results in a default Facebook Share Button:
And clicking on the Share Button results in this popup dialog box:
In the above example, you can see where the values you put in the FBML code show up in the popup dialog box.
The most important part of the fb:share-button tag is
class="meta"
This allows you to add the various meta tags you see in the example in this post (title, description), to add an image to the popup dialog box (“image_src”), and set the URL you want the user to share (“target_url”).
The Image that Renders in the Share Button Popup Dialog Box
To have the image you want included in the popup dialog look as good as possible:
- Create the image to be no wider than 100px in width and 150px in height. If you use a smaller or larger image, Facebook is will resize your image to be 100px wide and at least 100px tall. So it’s best to size it yourself!
- Make sure the image is either a GIF, JPEG or PNG. I’ve noticed that sometimes, if an image doesn’t show up, you can simply change it from a GIF to a JPEG or PNG and then it works. I can’t explain why, but it happens.
- Of course, if your image isn’t showing up in the popup dialog box, test it by pasting the URL for “image_src” into your browser’s address bar to see if it loads. If it doesn’t your URL is incorrect.
Using an Image for the Share Button Instead of the Default Button
In order to have your own button image replace Facebook’s default button, you need to do this using CSS, by adding the following style in your stylesheet which is where you point to the image you want to use for the Share Button:
#share a {
text-indent:-9999px;
display: block;
border:0; padding:0; margin:10px auto;
width: 152px; height: 32px;
background:url(http://www.hyperarts.com/facebook/static-fbml-bible/_img/share-btn.png) top left no-repeat;
overflow: hidden;
text-decoration:none !important;
}
The above CSS results, combined with the fb:share-button FBML tag, results in:
Let’s take a look at the “#share” CSS.
The Share Button is contained in a DIV with the ID “share”. You can control the positioning of your Share Button, as well as its appearance, by having it in its own DIV.
The “a” after “#share” applies the linking parameters to the “share” DIV, making sure the entire DIV is linked.
The CSS Styles Explained
- text-indent:-9999px;
This style rule hides the little speech-box icon and “Share” text generated by Facebook, positioning it 9999px to the left where it has not chance of displaying! - display: block;
This style makes sure the image is a “block” element, creating a line-break before and after it. In this context, it also ensures that the entire DIV is clickable to generate the link. - border:0; padding:0; margin:10px auto;
Because you’re using an image for the button, you don’t want a border (unless, of course, you do), so it sets the border and padding to “0″. The “margin:10px auto;” creates a 10-pixel margin at the top and bottom of the image and centers it in its container with the “auto” for left and right margin values. - width: 152px; height: 32px;
These are the values for the size of the button image you’ve created. - background:url(http://www.hyperarts.com/facebook/static-fbml-bible/_img/share-btn.png) top left no-repeat;
This is where you specify the image you want for the Share Button. MAKE SURE your URL is correct (see above for how to test your URL). This style sets your button image as the background for the DIV “share”. The “top” and “left” values make sure the background is top aligned and left aligned. The “no-repeat” ensures the background won’t “tile”, i.e., repeat horizontally and vertically. - overflow: hidden;
This style ensures that any content that extends beyond the height or width of the “share” DIV is hidden from view. - text-decoration:none !important;
This style ensures that because the “share” DIV is a link, it doesn’t have an underline below it. The “!important” enforces this.
The above tutorial should be sufficient for you to get the Facebook Share Button working. Make sure you do thorough testing of your code. If you follow these instructions carefully, it should all work fine.
Comments are open here but, honestly, if your fb:share-button isn’t working and the solution isn’t in this article, I probably can’t help you. MAKE SURE YOU CHECK YOU CODING CAREFULLY! Cheers!
