From Facebook Developer Wiki

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).

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

Opening the 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.

All you need to do is grab the code listed in the table below, and then change the <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.

Facebook offers four standard links and buttons. To use any of those, please simply grab the code from below or from this page: http://www.facebook.com/share_partners.php )

You will need to replace <url> in the code with the specific URL of the page you want to be shared. You can do this manually if you are inserting this directly into the page, or generate this dynamically for each page you render.

Button Type	Graphic	Code
Icon only		<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>
Link only		<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">Share on Facebook</a>
Link and Icon		<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> <style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top left; } </style> <a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>
Share Button		<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> <style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; text-decoration:none; } </style> <a href= "http://www.facebook.com/share.php?u=<url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>

You can access the standard Facebook icon at http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981

Also, if you choose to use the "Share Button" version, it comes with a nice highlight when you mouse over the button.

For any other uses of Facebook logos or graphics, please contact us here.

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:

• AddThis
• ShareThis

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.

Basic Markup for Description and Thumbnails

If you don't tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that is used through Share by adding the following meta tags to your page:

<meta name="title" content="title" /> <meta name="description" content="description " /> <link rel="image_src" href="thumbnail_image" / >

Where thumbnail_image is the URL to the thumbnail image. Either the width or height must be at least 50 pixels, not exceeding 130x110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionately.

For example:

<meta name="title" content="Smith hails 'unique' Wable legacy" /> <meta name="description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " /> <link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

Advanced Markup for Sharing Video or Flash Content

By default, Facebook Share will assume that the page being shared is a full page, and a link or URL will be shared in the user's feed.

If you specifically want to share video content or Flash content that renders and plays inline on Facebook, you need to specifically tag your page to identify the video or Flash content.

For your videos to be embeddable on Facebook, you will need to be whitelisted. Please send a request using the form here and include the domain names where your video or Flash content will be hosted.

In order to embed Flash or video content with Facebook Share, you must add a few additional meta tags along with title / description from above:

Where:

• image_src - URL to the thumbnail image. Max size is 130x110 pixels. Images will be resized proportionately
• video_src – URL to the embedded video file
• video_height – max height is 280px
• video_width – max width is 420px
• video_type – specify the content type or MIME type of the video file here. For Flash content, use "application/x-shockwave-flash"