FBML – How to Add a Share Button to Your Facebook Fan Page
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"/>
- 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
Related Posts:
January 25, 2010 at 6:59 pm
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
January 25, 2010 at 7:00 pm
Oops forgot to include the fan page in case you wanna peek: http://www.facebook.com/mybusinesspresence
Here is the welcome tab I’m adding it to:
http://www.facebook.com/mybusinesspresence?v=app_11007063052
January 26, 2010 at 6:43 am
Hi Karen – Thank you.
Do you mean the logo image or the image that you are using for the share button? If the one for the share button isn’t working it might be because of flickr – you might want to test an image an another location to make sure the share code is working properly. When I tried the share button on you page right now the image didn’t load.
January 27, 2010 at 7:19 am
Cool Kim. I must have missed something along the way though…FBML – is that like HTML for Facebook?
Dennis Edell´s last blog ..The Time Has Come. The Deal Is Done. It’s Time To Move!!
January 27, 2010 at 4:51 pm
Hi Dennis – It’s like Facebook’s version of html – a lot of is html and then they have their own tags – FBML=Facebook Markup Language.
January 27, 2010 at 5:02 pm
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.
January 28, 2010 at 11:03 am
Hi Posao – I wish I could make them bigger but they are useful in helping get a fan page shared with others.
January 29, 2010 at 5:31 pm
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!
January 30, 2010 at 8:37 am
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.
January 30, 2010 at 10:52 am
Ahhh ha!! Now I understand. I need to think of this as additional code that I add to my existing custom FMBL tabs (not a standalone tab). I just tried it and it works perfectly!! Thanks!!!
January 31, 2010 at 8:29 am
Hi Caroline – Exactly! Great – I’m glad it worked out.
February 4, 2010 at 9:26 am
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.
February 4, 2010 at 9:29 am
code tag didn’t work then – I had to close the fb share tag wit… </fb:share-button>
February 4, 2010 at 12:47 pm
Hi Phil – Thanks for the extra info :-)
February 4, 2010 at 4:03 pm
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!
February 4, 2010 at 8:45 pm
Hi Sorin – I didn’t encounter that problem when I tested it. The image I used is 125×125 – did you try one about that size?
February 5, 2010 at 3:20 am
I did it now and it worked ! :)
Thank you very much!
I would also like to turn the “Suggest to friends” link into a tab just like they did for this 2 page – http://www.facebook.com/DiscoveryChannel?v=wall&ref=search (Tell Your Friends Box) and http://www.facebook.com/ifan.page.design?v=info&ref=search (Send Vip Box)….
I tried the “Invite Friends Tab” made by the developers ( http://wiki.developers.facebook.com/index.php/Fb:request-form) but it is very limited as you can send only a few invites per day…
The “Suggest to friends” link is very efficient compared to this app…
Thank you again for your help!
February 9, 2010 at 5:04 am
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?
February 9, 2010 at 11:13 am
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.
February 12, 2010 at 4:38 am
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?
February 12, 2010 at 7:52 am
Hi Majid – Try a different video. It sounds like the one you are using
doesn’t allow embedding and that is why you are getting the error
message.
February 24, 2010 at 1:08 pm
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?
February 24, 2010 at 1:59 pm
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.
February 24, 2010 at 7:42 pm
Hi Kim,
This was really helpful. Wish I could make the share button larger, but what can you do?!
Regina Fried´s last blog ..LinkedIn Goes Social
February 24, 2010 at 7:47 pm
Hi Regina – Seriously!! It’s tiny. And it would be really nice to have a custom share button.
My Facebook wish list is getting really long :-)
February 28, 2010 at 3:47 am
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:
<: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
February 28, 2010 at 3:49 am
oh, for some reason the code for the picture didn’t appear in my post above.
It’s just a simple
copied and pasted from here: (example one) – http://lorrainesiew.wordpress.com/2009/07/04/facebook-pages-fbml-examples-part-1/
February 28, 2010 at 3:54 am
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
February 28, 2010 at 4:57 am
first of all sorry for multiple messages, feel free to delete some :)
I have just found a perfect example of what I’m trying to do:
http://www.facebook.com/search/?q=nike&init=quick#!/justdoit?v=app_7146470109&ref=search
the SHARE tab – see how the share button overlays the picture? Also, how do I make another picture clickable (as in “Share your story on our wall” in the Nike example)?
any help will be much appreciated
yuri :)
March 1, 2010 at 6:44 am
Hi Yuri,
The share button will display wherever you put it in the code. It looks like Nike made the main picture the background and then added the image and the share button and told them to align to the right.
LInking an image is done through regular html.
http://www.quackit.com/html/codes/html_image_link_code.cfm
March 1, 2010 at 9:09 am
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
March 1, 2010 at 9:32 am
fixed! :)
March 1, 2010 at 11:33 am
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.
March 5, 2010 at 1:34 pm
Thank you very much. This is very helpful.
March 5, 2010 at 2:29 pm
Hi PT – Great! I’m glad it helped.
March 7, 2010 at 8:03 pm
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! :)
March 8, 2010 at 7:04 am
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.
March 8, 2010 at 12:43 pm
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!!
March 8, 2010 at 4:03 pm
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 ;-)