Facebook Share

From Facebook Developer Wiki

Jump to: navigation, search

We've extended Facebook Share to make it even easier for you to implement, and to provide you with ways to measure how much your site's content is being shared on Facebook.

Contents

Implementing Facebook Share

It's easy to implement Facebook Share.

If you've already implemented Facebook Connect on your site, you should use the fb:share-button XFBML tag. For more information, see Using Facebook Share on a Facebook Connect Site.

Otherwise, if you haven't implemented Facebook Connect on your site, you render the Facebook Share button in an anchor (<a>) tag that takes the following attributes:

  • name: You must specify fb_name for this attribute.
  • type: The type of Share button or link to render, with or without a count included. Specify one of box_count, button_count, button, icon_link, or icon. The box_count and button_count options displays a count of the total number of times the page was shared on Facebook, how many comments were added to the story shared on Facebook, and how many times friends Liked the shared story.
    
If you don't specify a type, then this attribute defaults to button_count.
  • share_url: The URL for the page you want to share. If you don't specify a share_url, then this attribute defaults to the current page.

To put a Facebook Share button on your site right now, copy and paste the following code into the page you want to share:

<a name="fb_share"></a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Because you didn't specify the type and share_url attributes, the button defaults to the button_count type and shares the URL of the page where you placed it.

You need to include the script tag only once, no matter how many Share buttons you put on the same page. Place it after the first anchor tag on the page. If you can't place it there, you should put it high up on the page to ensure fast loading (in the page head works well).

Styling Your Share Button

If you want, you can choose from a variety of styles for your Share button. The easiest way to style your Share button is to use the Share wizard.

Using this code... Renders this button... Of this size...
<a name="fb_share" type="box_count" share_url="YOUR_URL"></a> Image:share_boxCount.png 57x57 pixels
<a name="fb_share" type="button_count" share_url="YOUR_URL"></a> Image:share_buttonCount.png 96x18 pixels
<a name="fb_share" type="button" share_url="YOUR_URL"></a> Image:share_button.png 56x18 pixels
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Share</a> Image:icon_link.png 51x15 pixels
<a name="fb_share" type="icon" share_url="YOUR_URL"></a> Image:icon.png 18x15 pixels


Remember the following:

  • Include the script tag only once on a page, after the last anchor tag.
  • If you omit the share_url attribute, the Share button defaults to the page where you placed the button.

Translating Your Share Button

If your site is written in another language, you can easily customize the Share button so it appears that language. To do this, simply wrap the text you want to appear within the anchor tags. For example, if your site is written in Spanish, you could specify your Share button like this:

<a name="fb_share" type="icon_link" share_url="YOUR_URL">Compartir en Facebook</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Sharing Rich Media

You can share rich media like images, audio, and video from your page. To do this, you need to include meta tags in your HTML code. For more information, see Facebook Share/Specifying Meta Tags.

Using Facebook Share on a Facebook Connect Site

If you already have implemented Facebook Connect on your website, you can easily render a Share button using the fb:share-button XFBML tag.

You can specify the same types for fb:share-button that you can for the anchor tag, including box_count and button_count. You must specify the full URL to the page you want to share.

Creating Your Own Share URL

However you implement Facebook Share, it always uses the following URL format to display the preview to the user.

http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>


Feel free to create your own implementation based on this. Make sure you URL encode the u and t parameters. For example:

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fdevelopers.facebook.com%2F&t=Facebook%20Developers

Measuring the Impact of Facebook Share

You can determine how effective your Facebook Share implementation is by checking to see how often:

  • Users share your page on Facebook.
  • Users "Like" the shared story from your site.
  • Users comment on the shared story on Facebook.
  • Friends click back to your site from the story on Facebook.

You can do this one of two ways. You can include the total count in real time by your Share button, or you can get more detailed numbers programmatically.

Including a Real-Time Share Count

To include a real-time Share count, specify either the box_count or button_count option for the type in your anchor link. This displays an icon next to your Share button that shows a count of the total number of times the page was shared on Facebook, how many comments were added to the story shared on Facebook, and how many friends Liked the shared story.

Note: While the data for the number of times users share a URL is in real time, the data for the count of Likes is delayed by 10 minutes or so while the data for the count of clicks is delayed by 20 minutes.

Getting Share Counts Programmatically

To get your Share counts programmatically, do one of the following:

See Also

reference