Facebook Share/Specifying Meta Tags FBML Audio Flash Video Action Bar



Here is the origin http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags

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&#8221; />

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 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 “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 130×110 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&#8221; 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″/&gt;
<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>

23 thoughts on “Facebook Share/Specifying Meta Tags FBML Audio Flash Video Action Bar

  1. Sir,
    How to place digital clock found on blog on to facebook account?
    Is it possible ? Digital clock should appear and not the link .

    thanks,

  2. heeeeeeeeeeelp i used this method to embed my flash player to facebook as a post inline and it worked but my player has download buttons and links in the player but the links dont work what am i missing on facebook end to get these hyper links in my flash player to work

  3. It’s nearly impossible to find experienced people for this subject, however, you sound like you know what you’re talking about! Thanks

  4. This posting, Fabric Roman Shades “Facebook Share/Specifying Meta Tags FBML Audio Flash Video Action Bar |
    Graphic Design Blog” was in fact excellent. I’m creating out a replica to present my good friends.
    I appreciate it,Joshua

  5. I personally speculate the reason why you labeled this blog post, “Facebook Share/Specifying Meta Tags FBML Audio Flash Video Action Bar
    | Graphic Design Blog”. Regardless I admired the article!
    Thank you-Alisa

  6. An intriguing discussion is definitely worth comment.
    There’s no doubt that that you need to write more on this subject matter, it may not be a taboo matter but usually folks don’t talk about these issues.
    To the next! Kind regards!!streetdirectory

  7. This really is the second post, of urs I really read.
    However , I actually enjoy this one, “Facebook Share/Specifying Meta Tags FBML Audio
    Flash Video Action Bar | Graphic Design Blog” the most.
    Take care -Milagro

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