(Anti) Social Development

(Anti) Social Development

by

FBML – How to Add a Share Button to Your Facebook Fan Page

Olivia Chow's Community Art Project - Screwed Out of Our Share (by Medmoiselle T)

FBML provides the code to include a little share button, like the ones you see on the bottom right of the wall, on your customized fan or business page.

When you are on any tab on a fan page other than the wall, there isn’t a share button, so it’s useful to be able to add one so that visitors can share the page with their friends or even post your page to their own wall.

And this little bit of FBML is super easy to use.


The little share button at the bottom left of the wall page looks like this:

Unfortunately, the button can not be customized. It’s going to look just like that. But, it can be added.

The code is:

<fb:share-button class="url" href="http://facebook.com/
Anti.Social.Development" />

The only thing that you need to change is the the url after http:// to the one for your own fan page.

When the button is clicked on the share box looks like the following:

It’s pretty basic and includes the general information that Facebook has about your fan page.

If you want to make the share box a little fancier you would use the fbml that includes the meta class rather than the url class. With the meta class you can specify the image that is displayed rather than using the default logo and include a description that contains more information about the content of your page.

<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<meta name="title" content="name of fan page"/>
<meta name="description" content="description of fan page"/>
<link rel="image_src" href="url to image location" />
<link rel="target_url" href="http://facebook.com/Anti.Social.Development"/>
</fb:share-button>
  • meta name=”title” content=””name of fan page” – the name of your fan page
  • meta name=”description” content=”description of fan page” – the description you want to use.
  • link rel=”image_src” href=”url to image location” – if you are using an alternative image, this would be the location on your server
  • link rel=”target_url” href=”http://facebook.com/Anti.Social.Development” – the url to the fan page that you are sharing

The message box when using the meta class looks like the following.

You can see that a different logo is being used and that the description that I specified is providing more detailed information about the page.

Just one more little thing you can do with FBML on your fan page.

photo credit: Medmoiselle T

It's Time!

Start your WordPress website project now!

Contact Me! >>



Keep Reading:
Images and Sizes for the New Timeline Layout on Facebook Pages
Facebook FBML Ends June 1, 2012
How to Hide a Facebook Tab from Being Displayed on Your Facebook Page
How to Change the Username of a Facebook Profile Page


Comments

  1. Karen Clark says

    Thank you! This is wonderful! I can’t get the image to show up though but I still like being able to customize the text etc. Any idea what’s up with the image? I was using a logo stored on flickr, wonder if that has something to do with it! Anyway, thanks a ton, you’re terrific!
    Karen
    .-= Karen Clark´s last blog ..Fan or Follow =-.

  3. Posao says

    Adding a share button can really make a difference when it comes to spreading the word ( and love..) around. I haven’t tried share button with Facebook yet but it helped with some of my blogs.

  4. Caroline says

    Thanks for the code snipit. I added a FBML for this and executed the code. Worked great and the new ShareBox appeared under my Boxes tab. I can also create a whole additional tab called “Share Box”, but that seems odd and I’m not sure that was what you were suggesting. How do I get my new ShareBox icon to appear on each of my Tabs?
    Thanks!

  5. Kim Woodbridge says

    Hi Caroline – You can name an FBML section anything that you want and then under Application Settings for it set it to be a tab rather than a box. For each custom tab that you make using FBML, you can add a little share box to it.

  6. Phil says

    In case it helps anyone else – I found that in my RSS reader Facebook app, I had to close the fbshare tag with otherwise it only showed one item. Might be related to the fact that it is a iframe not fbml app.
    Great post by the way.

  7. Sorin Petre says

    Hello! I used the code and it works. I am very pleased with the results and i thank you for posting it.

    There’s just one problem. The thumbnail is very blured no matter where i upload the image or how i resize it. I tried to use a picture from my facebook profile by copy/pasting the image location but the thumbnail still looks blured. If i delete the line that replaces the profile thumbnail i get no thumbnail at all…

    What should i do?

    Thank you!

  8. Juncai says

    Hi there,

    I was trying to add an image when i share to facebook. The code above for the link rel=”image_src” href=”url to image location” works but the image does not have an alt text. Is there any way to pass the image alt text to facebook as well?

    • Kim Woodbridge says

      Hi Juncai – There isn’t any mention of the alt tag in the fbml documentation for the share tag. I tested it by adding it to the code on my demo page and it didn’t work. I can only assume that fbml doesn’t utilize it here but I haven’t been able to verify it.

  9. Majid says

    Hi
    THis is really an informative post.
    I have tried the same, but with the content type video.

    But the problem is that i see an error showing “the content cannot be shared, publishers privacy settings dont allow for this”. some thing of this sort.

    can u help me regarding this?

  10. Brian says

    Can you add hotspot links to your facebook fan page? I was able to upload my image and add a link to the entire image, but I am wanting to add different links to the image kind of like you would add “hotspots” in dreamweaver. Is this possible? If so, how?

    • Kim Woodbridge says

      Hi Brian – You should be able to use an image map on a fan page – CSS ones tend to work better – but the image used in the share button can only have one link associated with it.

  12. Yuri says

    hey Kim,

    A foreword – I’m a total beginner to FBML as well as programming in general, but I’m super eager to learn, so bear with me here :)

    I created a new tab with a large picture in it (a promotional poster) and was trying to insert a share button using the code from your post, but it doesn’t seem to work. The picture’s there, but the code keeps appearing along side it, with no sign of share button at all.

    Here’s what it looks like:

    &lt:fb:share-button class=”url” href=”http://facebook.com/
    weloveflo” />

    I tried using the tag mentioned in the comments section, but it made no difference.

    It’s quite possible that I’m doing something wrong on a basic level here, but, like I said – I’m a newbie.

    Would you guys be kind enough to tell me what I’m missing?

    thanks,
    Yuri

  14. Yuri says

    hey,

    Problem solved – I used this code from Wiki developers

    and it worked like a charm. A question, though – how do I move the share button around the page? I’d like to have it on top of my poster. Also, can it overlay the picture? I’d like to have it on top of the graphic.

    Sorry if that stuff’s obvious, I’m still trying to get the basics.

    thanks!
    yuri

  17. Yuri says

    Hi Kim,

    Thanks for the reply. Helpful.

    One more thing: I tried using the meta class share button – the extra bits of info are pretty vital for what I’m trying to do – but I can’t seem to display both, the background image and the share button. It seems that the only thing displayed on my page is the one I put on top of the code – if the code starts with the meta share button, it’s all I see on the website and, similarly, when I put the button code underneath the CSS background code, it disappears and all I see is my background image.

    Any thoughts?

    thanks!
    Yuri

    • Kim Woodbridge says

      Hi Yuri – I love it when people fix the problem they were having before I
      even get a chance to answer ;-) I do that all the time – ask a question on a website and then figure it out before the question is answered.

  20. Sommer says

    Hi Kim!! This is awesome, but Imma little slow…so uhm, here’s what i’ve done and maybe you can tell me what I’m not doing right. Before I found your page I went to facebook’s widget share page (http://www.facebook.com/facebook-widgets/share.php) and got the code to post a share button on a page. I added the FBML Static App to my fan page, then I went to edit page and then “edit” under fbml and it takes me to a box. I pasted the code. Okie…now that I did that, I get a new tab that says fbml and a box under my boxes tab that has the “share”link and when I click on either of them they take me to a site that says “enter the url of the page u want to share”….So after that I found your page I did the same thing but pasted your code instead and used the link of my discussions tab page. (which is where I want it so that ppl can share the discussions) This is the link I put in your code: (http://www.facebook.com/apps/application.php?v=app_2373072738&id=335911472298) Well all that shows up is a new tab “fbml” and the code, but it is not clickable and isnt recognized as a link!
    So basically, either way I cannot get the “share” link to show in my discussions tab and even so, it wont work.
    Ideally I would love to have a post button avail on every topic on the discussion board, but I will settle for the discussion board itself. I want it to be how it is in the FB “notes” tab where you can share a note! I would love to use the notes tab because it has what I need, but I need my fans to be able to “post a new note” and unfortunatly, only I can start a new note! The whole concept of the page is for people to post prayer requests and for other ppl to be able to comment on those requests, follow up on them, and post them to profile and share them with others. So I just need a place where ppl can post, comment, and share all in one but there is nothing like this avail. Sorry for the long story, but is there anyway you can help me with this? please feel free to e-mail me!
    Thanks so much! At least now I know it CAN be done! :)

    • Kim Woodbridge says

      Hi Sommer – This article is about the fbml code that can be used on a custom facebook page in order to allow users to share it. As far as I know it can be used on a custom page to share *that* page but can’t be used to share different tabs or multiple items on a tab.

      I think you are looking for more functionality than is currently offered by the available facebook applications.

      • Sommer says

        Okie Kim! Thanks that does make sense! Just one last question in that case…is there place to maybe copy a code that you can paste in the fbml static box that would make the new custom tab exactly like the original FB Discussions tab or even the notes tab? Like a code to clone the Discussions tab? If I could find that, then maybe I could implement the share button in that new tab?! Thanks again, I’m still learning! :) And if you know of any other reasources to where maybe I could find templates for new pages kinda geared to what I want that would be great! So far, I can only find picture galleries and such for fbml static templates!
        Thanks again!!

        • Kim Woodbridge says

          Hi Sommer – It wouldn’t be possible to duplicate Facebook applications on a custom tab. The best thing to do is create that functionality on your web site and then have the custom tab give information about that and link over.

          I’m not aware of any templates – I’ve thought about making some but haven’t had time to start that project ;-)

  21. gil says

    hey there!
    just wrote to say thanx! i was looking for this sort of infor for ages and couldn’t find it. so happy i came to your blog… :))
    thanx,
    gil

  22. GIlbert hutabarat says

    Hai Kim,
    I manage to put a share button on my facebook fan page,
    And since you have experience more on this, I was wondering how can you move the position of the share button. I would like to search for other resources, but it would really save my time if you just help me on this small favor :)
    Thanks

    and have a nice day..

    • Kim Woodbridge says

      Hi Gilbert – You could use html to change the position of it. It depends on the layout but you could have it aligned with a table or use a margin or padding.

  25. Steve says

    Thanks for this post.

    You forgot to close the fb:share-button tag in your example. I copied your example and was getting this error when trying to share:

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

  26. Dave says

    Is there a way to share a specific Tab page within a Fan page? Insead of sharing the entire fan page I want to be able to share a specific tab page within my Fan site. Is there a way to do this?

    • Kim Woodbridge says

      Hi Dave – If you go to Edit Page and then locate the specific tab you should see a link that says ‘Link to this tab’. If you use that URL you should be able to link directly to the specific tab. I have not, however, tested this yet. Thanks!

  27. Lotte says

    I’m having difficulty adding a share button to me website. I tried the link below:

    Between the head tags I have the following:

    This code will share the page but doesn’t utilise the title, image, or description. Only the URL is shared.

    I’ve been looking everywhere for how to do this and can’t figure it out. Can you help?

    • Lotte says

      Sorry, it didn’t seem to accept the code tags. I use an a tag with name=”fb_share” type=”button_count” share_url=”[URL]”.

      In the header tags I have the FBML markup within a fb:share-button class=”meta” tag, containing the title, description, image url etc.

      • Kim Woodbridge says

        Hi Lotte – What size is the image being shared? I’ve found that I’ve had to place with the size to get everything to display properly. The one that I’m currently using is 75×75 px.

  28. Lotte says

    Hi Kim,

    I’ve knocked up a simple html page which demonstrates my issues. I’d be very very grateful if you could have a quick look at the page and source code and provide any insight. I’ve been going around in circles all day!!

    http://www.gazoomy.com/fbshare.html

    The website provides themes for Google, and when people click the “Set as Home Page” button I want to share it on Facebook with a thumbnail image which is approx 200×150 pixels. At present it only displays the url and ignores everything else.

    Here’s an example of a proper page:

    http://www.gazoomy.com/search.aspx?theme=Clown%20Fish

    Thanks, Lotte

    • Kim Woodbridge says

      Hi Lotte,

      The second example with the meta information is the code that you want to use but you don’t want it in the head of the page – you want it where the button is located. It’s kind of one or the other – not a mix of both code types. And I think your image needs to be resized and made smaller – I’ve run into issues with that before.

  31. Yaco Zaragoza says

    Thank you very much for that link.

    I have tested using that in my code but it is still only showing the one image.

    what I am trying to do is something more like the wishlist on

    – Starwood Preferred Guest (SPG) on the Explore SPG Tab or
    – SamsungUSA on the Samsung tab

    Thank you very much in advanced

  33. Simeon says

    Hi. This is perfect ,and works !
    But I want to know are user-xxx share this or not.
    how can we do that.
    Can i see staticstic of SHAREing with this button.
    This is too inportant information

  34. John says

    do you now how to do this…
    1st step visitor must become a fan of the page, then 2nd step unlocks
    2nd step visitor must share the page to see some content (like photos, videos, links)
    1th action I made… But I can’t find code for 2th. I only menaged this: visitors must become a fan and the can see link… I want to they mast share page too.
    thanks.
    I ask on few forums but nothing :(

  36. ajay says

    I want to use fb:share im my facebook app. it working fine but when i post the priview it goes to “facebook post url ” it is not coming back to my parent page..

    any sugesstion ?

  37. jay says

    thanks for the post. One question though. Do you know how you would be able to track if someone actually did the share? For example, if you wanted to give a custom “thank you” message to a person after they did the share from your website, how can you track that the person actually did the share?

    While I found ways to event track likes and comments, I could not find something similar for shares.

  38. zebhi says

    This tips so awesome.

    we can explore FBML in FB for anything that blogger need. Thank’s for your sharing. I can use this trick if i need it. :D

    • Isabelle says

      I’ve been reading all your facebook posts and found them very clear and useful. I’ve been trying to customize a landing page for a while now, but I’m stumped on the Share button. Everything in the code works, except it redirects us to our own posted links page instead of staying on the page we are on. That is really annoying, for a fan page, because we want people to be able to see our content and not have to track their steps back. It seems to be a known issue http://forum.developers.facebook.net/viewtopic.php?id=61514
      But for the sake of me I could not find a fix. Are you by any chance aware of a solution? Thank you!

      • Kim Woodbridge says

        Hi Isabelle

        I don’t know of a solution – every share that I’ve tested this morning is doing the same thing. The one on my demo page is doing it and it didn’t used to do that …

        I’ll keep my eye out for a solution but so far I haven’t come up with much.

  39. sean says

    I want to thank you.. I loaded the share button and it works but no image and not much description..
    I have read other peoples issues regarding and resized the flickr image but still no luck…
    I will keep trying and am sure will fix the problem but still wanted to thank you for your kind info..
    much appreciated
    sean

    • Kim Woodbridge says

      Hi Sean – I’ve found the size of the image is the usual cause of the problem. If something else is causing the issue, it’s possible Facebook has changed something that I haven’t encountered yet.

  40. nidhi says

    hi,
    I pasted the following code under the body tag in my website…

    When click on share button its open the window but not set any variable which we defined above that is title, description,target_url, image_src….

    Please tell me what do i am wrong….

  41. James says

    Hi,

    is there a meta class solution for showing the number of fans which one already has like in the normal url class version?

    Thank you.

  43. thomas says

    hello to all… ;)

    at the moment i’m creating a facebook “fan-page” and i did an extra button for “share” – as you described.

    but… my image i prepared for the share function is alway blurred or something like that…

    what do i have to do (picture size, resolution), that it won’t be like that anymore…

    thanks for your answers in advance!

    thomas ;)

  44. Flow says

    Hi there,

    this tutorials is working great for me so far. so thank you for that.
    i’ve just got one problem. the image i’m going to embed is shown correctly in the “post to profile” popup, but it’s not shown on the users wall. text and url are displayed correctly.

    any suggestions whats the problem?
    thank you!

    • Matt says

      Having the same issue as Flow above? It just started this week as I have had this button on tabs for a few weeks now and the image always showed up. It’s like FB changed the support for the image posting to the users wall. Everything else works great.

      • Kim Woodbridge says

        Hi Matt and Flow

        Yes, I’m experiencing the same thing and it looks like a new problem.

        Facebook is actually getting rid of the share button and wants everyone to use the Like button instead – the instructions I have in this article aren’t even on FB’s site anymore. My guess, although I haven’t verified this, is that even if it is a bug, they aren’t going to fix it – they don’t want us to use this anymore.

        • Matt says

          Thanks for the quick response! I was worried about posting here as I didn’t think I’d get a response. I’m going to do some more research into this and will post anything I find.

          Appreciate the help!

        • Flow says

          Thanks for your response. I think in my case the problem is, that I didn’t have the in my section. The page I want to share is within an facebook app and I can not modifie the header. The function “profile_setInfoOptions” is not supported anymore, so I go that way.

          Why my picture shows up in the “post to profile” popup?
          Because I just put in a link to an image, but this image is not on the facebook app page I want to share. The picture doesn’t work on the wall that way, because I think the informations on the users wall need to be on the site I share.

          Unfortunately this is not a solution I just wanted to share my problem :) Perhaps Matt, this is a explanation why It doesn’t work for you as well.

  45. Kevin says

    Not sure why the system is unable to find that url. Anyway I am trying to the second share box, but my image would not come up and it’s one that I have saved on facebook.

  46. Tim Ware says

    Hi folks, Over on the HyperArts Blog we’ve posted a couple tutorials that may be of help here. I know the Share Button FBML tag is not as dependable as it once was, and this is likely due to Facebook’s phasing out of FBML and encouraging folks to use iFrame apps for their custom tabs.

    Here’s our tutorial on adding a Share Button (classic style) on an iFrame tab:
    martiniti.me/iqJSeH

    An article on how to control the image and text that populates a status-update dialog box: martiniti.me/k7oCrW

    And, finally, my final word on FBML and Static FBML (move on!): martiniti.me/k3kaLX

    Cheers, Tim

  47. Florabel Mayo says

    Hello,, i just want to ask a question.. Can i put a share button tab in a page,, so that if there’s a member who will like my quotes they will only click the share button right away and it appear the quotes right away in their wall.. Hope you ca help me with this.. Thank you so much..

    • Kim Woodbridge says

      The Share button doesn’t work very well on a tab anymore as Facebook has been phasing out share for like. A share button will share the entire tab – not just specific content within the tab.

  48. Heather Chait says

    Can you tell me how I can insert just the F in the box to my site, rather than including the words ‘like’ or ‘send’ also?
    Can I just do this by myself or does Facebook supply the code for this too?
    Thanks so much.

  49. mike says

    I have put the facebook button on my site but I can not make it go where I want it. I have tried all sorts of html codes to move it but it is stuck. Any suggestions?

  50. David Charles says

    It is not working for me. I tried everything. am I doing something wrong?

    Thank you for your help.
    DC

    -fb:share-button class=”meta”>
    -meta name=”medium” content=”mult”/>
    -meta name=”title” content=”Charles David NYC”/>
    -meta name=”description” content=”Get your Graduation PHOTOs TODAY! 800.384.6551″/>
    -link rel=”image_src” href=”http://i1237.photobucket.com/albums/ff470/CharlesDavidNYC/Graduation-baby.jpg” />
    -link rel=”target_url” href=”http://www.facebook.com/CharlesDavidNYC?sk=app_10467688569″/>
    -/fb:share-button>

Trackbacks

Comments are closed. Please contact me for specific questions or subscribe to my newsletter.

(Anti) Social Development

Sign Up!


Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

Follow Me

Pin It on Pinterest

asd

Sign Up!

Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

You have Successfully Subscribed!