Contact Us
  • Facebook FBML: Using the fb:share-button with Static FBML; Custom Image or Default

    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:

    Facebook Share Button

    And clicking on the Share Button results in this popup dialog box:

    Facebook Share Button 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:

    Graphical Facebook Share Button

    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!

    Comments

    1. Thank you so much for posting this tutorial on the uses of share buttons. I have been trying to figure out image replacement for the share button for months…. so happy to finally know how it works. I am however still having one issue. In the corner of my replacement image is a small grey box. Oddly, that small grey box that renders in the left corner of my image is the only clickable part of the share replacement image. How do I get that grey to disappear and convert the entire image into the link? I have followed your exact code and even made the image in the same dimensions as your example. Thanks!

    2. Thanks for this helpful tutorial.
      Its very hard to find the Easy but effective code.
      so Thanks again for this gr8 tutorial.

    3. LOL, that last sentence is AWESOME! Amazing how so many people expect you troubleshoot their sloppiness. This is a great tutorial. Easy to follow.

    4. Anyone know how to embed a LIKE button in a Static FBML tab?

    5. Hi All,

      I had used the same code in my facebook tab application and its working fine. But the issue is after submitting the share button its redirecting the user to wall. I want to do this in the same page where the user put the share. ie. if I click on the share button it should pop up and show the comment box and the user can enter the comments and click on share. Then the pop up window close and it should stay in the same page where I am. Please see an example of a share button in the Facebook fan page left hand side bottom. I am looking for the functionality of the share button exactly same. Please send me a solution.

      Thanks.

    6. My share buttons appear in FF and Chrome, but not in IE. Here is the code I’m using:


      <div style="margin:5px 0 -20px 5px; position: absolute; z-index:10;"><fb:share-button class="url" href="http://www.facebook.com/xxxxxx" /></div>

      The negative bottom margin and the z-index are to position it over the tab images.

      Am I doing something wrong?

      • I suspect it has to do with the absolute positioning of the containing DIV.

        Make sure that the containing DIV is *inside* another DIV that is explicitly set to:

        style=”position:relative;”

        Tim

        • Hi

          I tried to find some way to change it, but I cant.

          If u have any idea, it would be awsome. I think I was on 500 different Paged and I cant find solution for IE

          btw: GREAT work! Thank u!

    7. hi,
      i used your code in my facebook app but everytime i click on the share link; i’m taken out of the application to a links page in facebook where i’m informed that my content has been shared on my wall and no link back to my app. i need to keep pple in my app not send them out. could this be because facebook is trying to get rid of the share button in favor of like.

    8. Image size is changed to 90×90

      • Thanks, Hylco. Actually, I just did some testing and the maximum width is 100 pixels and the maximum height is 150 pixels. So thanks for calling my attention to that! I’ve modified this post to reflect this.

        UPDATE: It’s actually even weirder! The Share button takes your image that you’ve carefully sized to 100px wide, makes a copy on their proxy server that is 90px wide, and then forces the 90px-wide image to display at 100px wide! Unbelieveable….

    9. Hi Tim,

      I used you code and it works great, but I’ve got a flash video on my page, and a row of buttons, and want one of the buttons to like my page if that makes sense, but can’t get the like button to line up with the rest of the buttons. Before I just had it to a link to another page and it worked fine, now it goes underneath the rest of the menu?

    10. Tim,
      Sometimes I come over here just to watch you answer the same question over and over again with grace and class! I can’t tell you how many times I am asked to make behavior changes to the fb-share button. Great tutorial by the way. And if there is anyone who will find a way to magically make the fb-share button behave differently, I have no doubt it will be you.

    11. hi, this tutorial it’s excellent, but how i make it work in internet explorer? couse in chrome an mozilla works fine but it’s not work in IE
      PD: sorry for my English, im from Argentina.

      • This FBML tag, fb:share-button, should work fine with IE. The only IE-specific requirement for Facebook tabs is that you have to use an external stylesheet, called with the <link /> tag. IE doesn’t handle the <style> tag.

    12. Hi,

      Im looking for share button with some message which automatically put instead of “Whats on your mind” example: “This is great!”…when people will share a page… and question n.2 how can i do that people will se the content after sharing a page? please answer me

      thanks!

      • Hmmm. I’m not sure how they’re doing that. Perhaps using FBJS. If you get an answer, please make sure you post it here :)

    13. Hi, i wanted to ask you, i got all this code and it’s working, just how can i code that when you click on SHARE , you get MAXIMIZED new windows, not this normal one?

      Thx in advance
      Luka

    14. I use this code what to change to become maximized?
      I am not using that smaller one. Thanks in advance

      <fb:share-button class="meta">
      <meta name="title" content="mult"/>
      <meta name="title" content="Pogledajte kako se decak raduje (SNIMAK)"/>
      <meta name="description" content="Pogledajte NEVEROVATNO ! Kako se danas deca raduju kada DOBIJU POKLON ZA NOVU GODINU ! + SNIMAK"/>
      <link rel="image_src" href="http://img262.imageshack.us/img262/4200/coveruq.png" />
      <link rel="target_url" href="http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878"/>
      </fb:share-button>

      • If you don’t want the popup window, just the whole page as in the latest example you provided, then use what I provided just above, not the fb:share-button tag. Substitute the target_url value in the URL-OF-PAGE-OR-TAB…. part of my example.

        • I’m sorry but im not much in this FBML, i just need something to finish. Could you just change part of code and put whole code here i will copy it? I provided full code before your reply. Thanks

          • <a href=”http://www.facebook.com/sharer.php?u=http://www.facebook.com/pages/Pogledajte-kako-se-decak-raduje-SNIMAK/126179030778732?v=app_4949752878″><img src=”http://img262.imageshack.us/img262/4200/coveruq.png”/></a>

    15. Thanks Tim, i made it. I just need one more problem to solve. I want to code, when button is clicked – hyperlink is visible. How to ? TNX

    16. hi..thank for publish that, and i make the button change adding “hover”..
      :)

    17. Hi sir.
      I don’t get how i combine both of codes to make the custom (orange) share button.Can you share the complete code of the demo button so we can change it?Thanks.
      Im speaking about this button:
      http://www.hyperarts.com/blog/wp-content/uploads/custom-share-button.png

    18. Do you know any trick to use this with a facebook fan page url?Cause when i put link rel=”target_url” the FB fan page in the sharing process its turning to the main facebook domain (http://facebook.com) and is don’t sharing the fan page url :(
      Any advices?

    19. There was an error trying to share this content.
      Sorry, the content owner’s privacy settings don’t allow you to share this content. Close this window

      I have created the SHARE button
      The Above error is occuring on it :(
      wat to do? please guide me

    20. Takis and Gustavo if you are using IE, it wont work, also if you have more style in it you have to make sure they are all closed seperately with } for every style tag you have like #not-fans and so on there is a { and a }..

      Im also fiffling a little with it, Tim, nice tutorials you have here. Do you know of any sites where when you have pressed the share button, you will first of all get the popup, but if you press skip then another popup reminding you whats missing pops up (also facebook design). And after sharing you will be posted to another facebook page with a video, picture, or some other stuff.

      Cant seem to figure it out but it must use some form of javascript i guess?

    21. is there any way to monitor the click on the fb-share button, and then use it as a trigger for another event?
      let’s say: if someone pushed share, he’s getting a coupon code