Facebook Share/Specifying Meta Tags

From Facebook Developer Wiki

Jump to: navigation, search

Contents

Configuring Meta Tags for Facebook Share

Adding Facebook Share to your website is easy. However, 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 a combination of <link> and <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 your HTML. An example news story could have the following:

<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" />

As shown, title contains the preview title, description contains the preview summary and image_src contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out. For consistency's sake, please use the tag to provide text data for the preview, and the tag for any source URLs.

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

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 "audio", "image", "video", "news", "blog" and "mult".

Specifying Multimedia Tags

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>/<link> tags described above (title, description, image_src) along with some additional <meta>/<link> tags:

Audio (required)

<meta name="title" content="page_title" /> <meta name="description" content="audio_description" /> <link rel="image_src" href="audio_image_src url (eg. album art)" /> <link rel="audio_src" href="audio_src url" /> <meta name="audio_type" content="Content-Type header field" />

Audio (optional)

<meta name="audio_title" content="audio_title (eg. song name)" /> <meta name="audio_artist" content="audio_artist_name" /> <meta name="audio_album" content="audio_album_name" />

Video* (required)

<meta name="title" content="video_title" /> <meta name="description" content="video_description" /> <link rel="image_src" href="video_screenshot_image_src url" /> <link rel="video_src" href="video_src url"/>* <meta name="video_height" content="video_height" /> <meta name="video_width" content="video_width" /> <meta name="video_type" content="Content-Type header field" />

* To make your videos embeddable on Facebook, please send a request using this form. Your request should include the domain names of the values you will use for the video source URL (in the video_src link tag above). You must do this to ensure your videos play correctly.

Note: Facebook supports embedding video in SWF format only.

Video (example)

Here is an example of embedded Flash video:

<embed src="http://www.example.com/player.swf" flashvars="video_id=123456789" width="300" height="200" type="application/x-shockwave-flash" />

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

<link rel="video_src" href="http://www.example.com/player.swf?video_id=123456789"/> <meta name="video_height" content="200" /> <meta name="video_width" content="300" /> <meta name="video_type" content="application/x-shockwave-flash" />

You can use these video tags for other multimedia content too if these tags fully describe the content you want to make sharable. Make sure that you use the medium type tag described above to set the correct medium type if you use these tags for something other than video.

Hiding the Share Action Bar

When someone clicks on your shared item, they are redirected to your page and a small action bar is added above your site. The action bar promotes further sharing so that more people can see your content If you would like to disable this feature, simply add this code to your web page:

<script type="text/javascript"> if (top.location != location) { top.location.href = document.location.href; } </script>
Retrieved from "http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags"
reference