Connect/Using Facebook Share
From Facebook Developer Wiki
Contents |
Benefits
Facebook Share is the most powerful and simplest way for users to share articles, pages, video, or flash content on your site with their friends on Facebook. Already, over 2 Billion pieces of content are shared each week through Facebook.
The Share button leverages the power of word-of-mouth to get new traffic to your site. Visitors to your site can share any page on your website through Facebook with just two clicks. When shared a link to the page, along with a thumbnail image, and a brief description will appear on the user's profile and in the home page stream of all of the user's friends. The average user on Facebook has 120 friends, and over half of Facebook's userbase (currently more than 300 million users) visit Facebook every day. So each time a link is shared by one user, there's a chance at getting hundreds of new people to see and/or click through on the link. When users share video or flash content, that content can be automatically activated and played within the Facebook home page or on a user's profile.
We measure the success of Share by how much new traffic it drives to your site each time a user shares a link to your site. We call this "clicks-per-share". You should expect a baseline average of 3-7 clicks per share and often much higher (20, 50, 100+) depending on the content and users who are sharing the content. The number of "share" actions generated from your site depends on how simply and prominently you place the Facebook Share button.
One thing to note: On many sites, you may see a large number of options for users to choose from different services to share. Based on data we've gathered, Facebook Share is the most popular option for users by a decent margin. When placed more prominently for Facebook users than amidst a large list, Facebook Share can contribute an order of magnitude more share actions.
The Share button can take just one line of code to implement on your site. It's the fastest way to start tapping into the power of word-of-mouth.
How it Works - a Product Tour
Facebook Share is designed for the web as a button or link added to a website for the user to share that site's content. When clicked, this triggers a popup dialog for the user to preview and confirm sharing the content along with adding their own message. A mobile-specific version of Share is being considered.
In this section, we'll walk through three different examples that a user may experience with the Share button. These will show the various steps a user may encounter as they use the Share dialog, and what topics you should consider as you think about integrating this into your experience.
Scenarios:
- Using Share to post a link to a profile
- Using Share to send a message with a link attached
- Share to post a video (or other flash content) to a profile
Case 1: Using Share to Post a Link to a Profile
When a user wants to share a link to a page, they click the share button, optionally add a comment, and post the link to their profile and to their friends' home page streams.
Example: http://www.huffingtonpost.com/2009/10/26/ann-minch-to-chase-bank-a_n_333625.html
1. User clicks Share button or action. Recommendation: the Share button should be clearly labeled and prominently placed near the content that is being shared.
2a. (If needed.) User is prompted to log in. If the user is already logged into Facebook, skip directly to 2b. Over 30% of Facebook users are permanently logged in.
2b. Facebook Share dialog pops up in a new window. The title, list of thumbnails, and description have all been extracted from the page. The default tab (Post to Profile vs. Send a Message) is selected based on the user's last action. The first time a user uses Share, it will default to Post to Profile.
3. User chooses to add a message and/or choose a different thumbnail (or no thumbnail) to post along with the link.
4. User clicks "Share" and the page is shared!
5. The link, thumbnail, description, and user's comment are automatically posted to the user's profile, and to all of their friends' streams.
Case 2: Using Share to Send a Message
When a user wants to send a link to one or a few friends in a message (i.e. share it privately), they click the share button, select who they want to send it to (using typeahead), write a brief message, and send the message and link to their friends' inboxes.
Example: http://movies.nytimes.com/2009/07/15/movies/15harry.html
1. User clicks Share button.
2. Facebook Share dialog pops up in a new window.
3. User types in the names of the people they want to send the message to. Typing in just a letter or two will bring up a full typeahead list of all friends who match what you have typed in. Users can select multiple recipients, as well as type in an email address or list name.
4. User clicks "Send" and the message is sent!
5. The message is sent to their friends' Inboxes, and an email is sent to the friends' email addresses containing the message and the link.
Case 3: Using Share to Post a Video (or Other Flash Content) to a Profile
When a user wants to post a video to their profile, they click the share button, optionally add a comment, and post the video to their profile and to their friends' home page streams. In this case, when users see the video in their streams, they can click and play the video inline on Facebook. In order for this to work, the website owner must do some extra work including special tagging of their pages for Facebook Share to identify the videos or flash content, and applying to be whitelisted for inline playback of the video or flash content.
Example: http://www.youtube.com/watch?v=_OBlgSz8sSM
1. User clicks "Share" button. Recommendation: the Share button should be clearly labeled and prominently placed near the specific content that is being shared.
2. Facebook Share dialog pops up in a new window. The thumbnail for the video and the title and description have been extracted from the page.
3. User clicks "Share" and the video / content is shared!
4. The video thumbnail, description, and user's comment are automatically posted to the user's profile, and to all of their friends' streams. The video is initially in a "thumbnail" view with a play button overlaid.
5. Viewing user clicks on the video thumbnail, the video automatically expands inline, and starts playing. Note: the max width for expanded video or flash is 420px.
Implementation
Learn how you can implement Facebook Share on your site.
Best Practices
Facebook Share is intended to help users share content more easily and effectively from your site.
We have these best practices that we recommend you consider as you implement Facebook Share:
- Focus on placement – make it easy and obvious for users to find the share buttons
- Detect Facebook users – when you know it's a Facebook user on your site, make the Facebook option even more prominent
Focus on Placement
As you are designing your Share integration, make it easy and prominent to share links from your site. Here are some great examples from Slate, New York Times, and YouTube that show how how sharing is prominently placed within or near the content and articles, and makes it obvious what users are sharing. We also recommend you use terms like "Share" or "Recommend to friends" as best fits into the context of your application. You may also use the Facebook icon or the text "Facebook" whenever appropriate.
YouTube: Note how Facebook is prominently listed as a share option underneath the video.
Slate.com - Note how "Recommend" is shown with a Facebook icon within the context of the article.
New York Times - Note how Share is an easily accessible option near the top of the article.
Detect Facebook Users
Most sites offer a variety of services including email to allow users to easily share content. This makes sense as each site wants to ensure that each user can find the service that they use most actively to share content with.
Unfortunately, what often happens is that a site simply presents a large number of services in a list making it difficult for users to find the options they use most.
We recommend three best practices to help simplify this experience for users:
1. Once a user uses a service to share content, remember that on your site and feature that option more prominently the next time a user visits the site. For example – if a Facebook user visits your site and shares with Facebook, you should make the "Facebook Share" option more prominent on your page the next time
2. Look at the "referral" URL and feature that service as a sharing option more prominently. For example, if a user is visiting your site directly after clicking a link on Facebook.com, you should feature the "Facebook Share" option more prominently.
Washington Post – features certain sharing experiences for a user over others based on usage.
3. Detect "logged in" Facebook users. Using the following JavaScript code, you can detect whether a user is currently logged in to Facebook. Over 30% of users are permanently logged in to Facebook. If so, you can more prominently feature the "Share" option knowing that the user won't even have to log in to Facebook in order to share the content.
This feature leverages Facebook Connect, and more details can be found in Detecting Connect Status.
Appendix
Reference Docs
- Additional details on Facebook Share
- The XFBML tag fb:share-button is available for sites using Facebook Connect as well as canvas applications on Facebook.
Policies
Please see the full policies and terms for Facebook at http://www.facebook.com/terms.php. Section 8 of this document covers "Share" links. 'Bold text'
