RSS

Facebook Share

18 Jun
The Share button has been deprecated in favor of the Like button, and will no longer be supported.Please use the Like button whenever possible to drive maximum traffic to your apps.

Implementing Facebook Share

You can render the Facebook Share button in an anchor (<a>) tag that takes the following attributes:

  • name: You must specify fb_share 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, 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).

Note: You cannot share pages on the facebook.com domain.

WordPress Plugin

You can integrate Facebook Share using this WordPress plug-in.


Styling Your Share Button

If you want, you can choose from a variety of styles for your Share button.

Using this code… Renders this button… Of this size…
<a name="fb_share" type="button" share_url="YOUR_URL"> 56×18 pixels
<a name="fb_share" type="icon_link" share_url="YOUR_URL"> 51×15 pixels
<a name="fb_share" type="icon" share_url="YOUR_URL"> 18×15 pixels

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 the <head> element in your HTML code.

Configuring Meta Tags for Facebook Share

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it. You do this with <meta> tags.

Facebook Share passes along the URL of your page to our servers, which in turn looks up certain HTML tags within it. Those tags are used to display a preview of the page. In order to provide this preview, we always look for the title of the page, a summary of the main content and an image. If there’s media content on the page, those media files are also important to identify.

Basic Tags

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. 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 Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta property="og:title" content="title" /> <meta property="og:description" content="description" /> <meta property="og:image" content="thumbnail_image" /> 

So an example news story could have the following:

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

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 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 126×39 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 proportionally.

Specifying a “medium” Type

You may also specify the type of content being shared by using the following tag:

<meta name="medium" content="medium_type" /> 

Valid values for medium_type are audioimagevideonewsblog, and mult.

Specifying Multimedia Tags

By default, Facebook Share assumes 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 audio or Flash content that renders and plays inline on Facebook, you need to specifically tag your page to identify the Flash content.

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to a Web page that contains the <meta> tags described above (title, description, image) along with some additional <meta> tags:

Audio (required)

<meta property="og:title" content="page title" /> <meta property="og:description" content="audio description" /> <meta property="og:image" content="audio image url (eg. album art)" /> <meta property="og:audio" content="audio url (.mp3 only)" /> 

Audio (optional)

<meta property="og:audio:type" content="Content-Type header field" /> <meta property="og:audio:title" content="audio title (eg. song name)" /> <meta property="og:audio:artist" content="audio artist name" /> <meta property="og:audio:album" content="audio album name" /> 

Flash (required)

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

<meta property="og:title" content="video title" /> <meta property="og:description" content="video description" /> <meta property="og:image" content="video screenshot image url" /> <meta property="og:video" content="video url (.swf only)"/> 

Flash (optional)

<meta property="og:video:height" content="video height" /> <meta property="og:video:width" content="video width" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> 

Notes

  • Facebook supports embedding video in SWF format only.

Video Example

Here is an example of embedded Flash video:

http://www.example.com/player.swf 

For that video, the appropriate metadata would look like this:

<meta property="og:video" content="http://www.example.com/player.swf?video_id=123456789"/> <meta name="og:video:height" content="200" /> <meta name="og:video:width" content="300" /> <meta name="og:video:type" content="application/x-shockwave-flash" /> 

Using Facebook Share on a Facebook-enabled Website

If you have already implemented the Facebook JS SDK on your website, we recommend you migrate to the XFBML version of the Like button.

Alternatively, you add your own link, which when clicked, invokes stream.publish or stream.share from the FB.ui()method of the Facebook JS SDK.

We no longer support the XFBML version of the Share button.


Creating Your Own Share URL

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

https://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 — use the JavaScript function “encodeURIComponent(). For example:

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sadtrombone.com%2F&t=Sad%20Trombone 
Advertisements
 
Leave a comment

Posted by on June 18, 2012 in Facebook

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: