Loading
» Unlabelled » Meta Tags for Facebook Share

Meta Tags for Facebook Share


Facebook Share/Specifying Meta Tag

Contents

[hide]



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 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 name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >

So 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 <meta> tag to provide text data for the preview, and the <link> tag for any source URLs.

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


The thumbnail_image is the URL to the image that appears in the Feed story. The thumbnail's width or height must be at least 50 pixels, and cannot exceed 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 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 "audio", "image", "video", "news", "blog" 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>/<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" />

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 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="application/x-shockwave-flash" />
Where:

  • image_src - URL to the thumbnail image. Max size is 130x110 pixels. Images will be resized proportionally
  • 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"

Notes

  • Facebook supports embedding video in SWF format only.
  • For your videos to be embeddable on Facebook, Facebook must whitelist your site. Please send a request using the form here and include the domain names where your plan to host the Flash content.


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


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"


Meta Tags for Facebook Share Reviewed by photocopy canon on Rating: 4.5
Share on: Twitter, Facebook, Delicious, Digg, Reddit

0 comments:

Post a Comment