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:
content=”title” />
<meta name=”description” content=”description ” />
<link rel=”image_src” href=”thumbnail_image” / >
So an example news story could have the following:
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 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:
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)
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)
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:
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:
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:
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:
type=”text/javascript”>
if (top.location != location) {
top.location.href = document.location.href;
}
</script>
Posted by Fbml on August 14, 2010 at 4:03 am
Evet afferim size böyle işler yapmaya devam edin.
Posted by ryan on August 25, 2010 at 4:56 am
do you know how to add this to wordpress header?
Posted by Anonymous on February 2, 2011 at 2:43 pm
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,
Posted by ahrengot on March 2, 2011 at 7:32 pm
This is great! I wrote a tutorial similar to this one, where i also use HTML5 fallback. This way, the video will work on iPhones and iPads too- Even inside the native Facebook iPhone app!
It’s called “How to display your custom flash video player on Facebook” and you can find it here: http://ahrengot.wordpress.com/2011/03/02/how-to-display-your-custom-flash-video-player-on-facebook/
Posted by Facebook Like – Cum afişezi corect imaginea şi descrierea articolului on May 17, 2011 at 7:50 pm
[...] şi încercând să găsesc o rezolvare. Am citit mai multe articole (cele mai relevante: 1,2,3,4) şi am testat vreo 15 pluginuri [...]
Posted by Puţin ajutor din partea celor care se pricep la Blogger. - GTop.ro / GTopStats.com official forum on May 20, 2011 at 11:11 am
[...] [...]
Posted by PDT.KLJHASHASTRI@GMAIL.COM on May 27, 2011 at 4:07 pm
Ham apne mitron ki seva men nirantar tatpar rahte hain ratri8se9online ya phone ke dwara,-09897701636.09358885616
Posted by Power of Sharing | Bubulu Labs on June 16, 2011 at 8:54 pm
[...] sure you have the correct meta tags so the correct images and blurbs get picked up. Here’s a tutorial on how to do it easily. Happy Sharing! You may also enjoy: Icon Survey Announcing Christmas [...]
Posted by Comment forcer facebook à prendre une image lors de la publication d’un lien on June 20, 2011 at 9:24 am
[...] http://grafikdesign.wordpress.com/2010/02/10/facebook-sharespecifying-meta-tags-fbml-audio-flash-vid… [...]
Posted by Jayson Pimentel on July 5, 2011 at 3:38 pm
Heelo How can you specify video url using custom fields?
Posted by rock on July 29, 2011 at 12:09 pm
your informayion was helpfull for me as i was intersted Wanna get GOOGLE+ invite free in it
so thank you who have written this
Posted by Anonymous on April 1, 2012 at 11:54 pm
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
Posted by Moringa Tea on August 9, 2012 at 10:17 am
facebook is responsible for a lot of damage in relationships…but that is what it is.
Posted by Anonymous on August 9, 2012 at 11:09 am
It’s nearly impossible to find experienced people for this subject, however, you sound like you know what you’re talking about! Thanks
Posted by instashirt.com on August 10, 2012 at 3:22 pm
Lovely composed material! Appreciate that you post it here.
Posted by Chris H on November 7, 2012 at 6:36 pm
Great article. How would someone make a full size graphic show up if someone hits the SHARE button? Here is an example 430 x 430 graphic: http://gridironalumni.com/images/congrats430.jpg
Posted by Facebook Optimization (FBO) or Facebook SEO – New Social Media Optimization (SMO) for Your Site | Trafficandmoney.com on February 28, 2013 at 6:41 pm
[...] These old meta tags still work, but it is always good to go with the wind and embrace Open Graph Meta Tags. You can read more about it here. [...]
Posted by Melody on March 23, 2013 at 11:28 am
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
Posted by tinyurl.com on April 14, 2013 at 6:28 am
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