|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:
Because you didn’t specify the
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.
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…|
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:
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.
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" />
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.
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
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:
<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)" />
<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" />
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)"/>
<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" />
- Facebook supports embedding video in SWF format only.
Here is an example of embedded Flash video:
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
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>