Connect/Implementing Facebook Share

From Facebook Developer Wiki

Jump to: navigation, search

Implementing Facebook Share is designed to be very simple, and require minimal changes to your website. The simplest version of Facebook Share can be just one line of new code on your page. For the most optimal implementation of Facebook Share, you should consider the right placement and treatment for the button/link/action on your site and properly tagging your pages to control the description and thumbnails that are shared with the link. More advanced features of Share support sharing of video or Flash content that will play inline on Facebook.com.

Even if you don't implement a Share button on your site, we recommend you consider marking up your page so that pages from your site are shared with the most relevant description and thumbnails (section 3 below).

Contents

Technical Overview

The below diagram describes the process when a user clicks "Share". When a user first clicks the Share button, JavaScript on the page will create a GET request to Facebook for share dialog. The request will include the URL that is being shared as a parameter. A Facebook server will then immediately request the page from the website and look for tags for the description / thumbnail, or will extract those out of the page directly. Facebook will then render the Share dialog and return that to the user in a new popup window.

Note: This may cause an extra hit to be logged on your system. That is not rendered by a user or browser, but just used for determining the information for sharing the link.

Adding the Share Button to Your Page

When adding Facebook Share to your site, you can either use a standard Facebook icon, link, or button, or you can create your own custom link and calling Facebook directly. In both cases, what you will add to your site is a simple line of code to display the button, and then some JavaScript (in the "onclick") which will encode and pass the URL to be shared to Facebook. This code will open the Share popup window and trigger the events covered in the technical overview.

When you add Facebook Share to your page, you can choose from among these options:

  • Using any of Facebook's standard buttons
  • Creating your own custom link or button
  • Using a 3rd party service which handles a lot of this for you

Creating Your Own Share Dialog

You can open the share dialog anytime, by opening a new window for the URL: http://www.facebook.com/sharer.php. This URL takes the following parameters:

  • u: The URL being shared (must be URL-encoded, use the JavaScript function encodeURIComponent()).
  • t: The title of the URL being shared (must be URL-encoded, see above).

For example, with the URL: http://movies.nytimes.com/2009/07/15/movies/15harry.html, the sharer URL would be:

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fmovies.nytimes.com%2F2009%2F07%2F15%2Fmovies%2F15harry.html&t=In%20Latest%20%E2%80%98Harry%20Potter%2C%E2%80%99%20Rage%20and%20Hormones

You can redirect users to a new page with this URL with the encoded parameters, or create a popup window.

If you choose to create a popup window, we recommend the following settings:

  • Width=626
  • Height=436
  • Toolbar=0
  • Status=0

With this information, you can create or integrate your own links and buttons to trigger Facebook Share from any page. If you would like to use Facebook graphics, please see the standard buttons below which are pre-approved for Share. Other uses of Facebook graphics or logos need to be approved by Facebook in writing. You can make a request here.

Using Standard Facebook Buttons or Links for Share

To simplify using Facebook Share, we have created some standard buttons and links, along with sample code that you can use to open this window. We recommend that you place share button prominently on your page and near the main content that is being shared. See Best Practices for tips on placement.

The easiest way to implement Facebook Share is to use the Share wizard. However, Facebook offers a few standard links and buttons. See Facebook Share#Styling Your Share Button for details.

All you need to do is grab the code listed in the table in Facebook Share#Styling Your Share Button, and then change the YOUR_URL parameter to the current URL that you want to share. You can do this manually if you are inserting this directly into the page, or generate this dynamically for each page you render. This works for sharing links for pages as well as sharing links to video content.

Each of the code blocks below works by adding the graphics or links into your page, and then adding a JavaScript "onclick" handler which gets the URL and title from the current page and opens a new window for the Facebook Share dialog.

Note: This function only works for sharing links to the current page. If you'd like a user to share a different page than the current, you will want to modify the code.

<script> function fbs_click() { u=location.href; t=document.title; window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),' sharer', 'toolbar=0, status=0, width=626, height=436'); return false; } </script> <a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank"> <img src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" alt="" /> </a>

Third Party Tools and Services for Implementing Share

You can easily implement Facebook Share using the code or standard buttons above. However, you may want to use 3rd party services to offer sharing through Facebook as well as other services, simplified set up and code management, and for additional benefits such as tracking.

One thing to consider is that many of these services provide a long list of sharing services for users to choose from without an easy pattern. Based on data we have 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. You should look for providers that let you customize the user interface and offering to users.

Share service providers we recommend:

Customizing the Description / Thumbnails for Shared Content

By default, Facebook Share will attempt to extract a summary description and available thumbnails for your page. This will often be a "best guess". You pass the title and URL in directly to the Share URL per the above.

You can control the exact descriptions and thumbnails used with your link by adding specific <meta> tags in the <head> section of your web pages. These tags will be used whenever a user shares a link to your pages or site, regardless of whether they use the Share button from your site.

In addition, if your page contains specific video or Flash content that you want to share, you can include specific markup tags that indicate the content to be shared.

For more information, read Facebook Share/Specifying Meta Tags.

Retrieved from "http://wiki.developers.facebook.com/index.php/Connect/Implementing_Facebook_Share"