Wednesday, December 22, 2010

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

Amplify’d from www.kimwoodbridge.com

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.

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

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 href="http://www.kimwoodbridge.com/fbml-how-to-add-a-share-button-to-your-facebook-fan-page/url to image location" />
<link 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.

Read more at www.kimwoodbridge.com
 

No comments:

Post a Comment