sharing video on facebook from wordpress

Question

When a user tries to share a page with an embedded video on it only the title of the pages shows up on their facebook status and not the flash video player. This happens while sharing with the addthis button or if the url is posted directly to the facebook page. Any idea how I can make facebook pickup the embedded flash video?

Answer 1

That really depends on how the video is embedded into the page. Facebook can only handle specific formats and if it sees something it doesn't expect, it defaults to a failsafe "show nothing" standard.

If the embedded video is well-recognized standard (i.e. YouTube's default player) it should work just fine. If it's your own self-hosted video player, though, this won't work. Facebook won't embed other people's Flash objects on their site.

---

Update 11/18

Facebook, as smart as it is, still needs a considerable amount of help to determine what content lives on the page. It can do a quick scraping of <img /> tags to give you page thumbnails, but it doesn't scan for <object>s or <embed>s because these could be anything from a YouTube video (that you'd like shared on Facebook) to an intrusive Flash application (that Facebook doesn't want on their site).

To make things easier, YouTube actually uses a specific Facebook application to allow you to share videos that will be automatically embedded into Facebook. In addition to linking directly to this application, every YouTube video page includes additional meta information in their header that Facebook uses to scrape up the video and embed it into the page. Here's an example from the video you linked to earlier:

<meta property="fb:app_id" content="87741124305" />
<meta property="og:title" content="Cubed: Manny Pacquiao&amp;#39;s Punchout" />
<meta property="og:description" content="Manny Pacquiao is training hard for his upcoming fight with Miguel Cotto, but you might be surprised how he got to the top.  Check out this clip." />
<meta property="og:type" content="video" />
<meta property="og:url" content="http://www.youtube.com/watch?v=IvCCuuuJhd4" />
<meta property="og:image" content="http://i2.ytimg.com/vi/IvCCuuuJhd4/default.jpg" />
<meta property="og:site_name" content="YouTube" />

The application linked is the YouTube application on Facebook. You can also see some specific information included here: title, description, type, url, image, site_name. All of this helps Facebook figure out what to do when you "share" the page to your friends and network.

The AddThis button doesn't add any of this information to your header. It can't, really, because it's built to allow simple sharing of pages, not to power sharing for video websites like YouTube.

So as I said before, it "depends on how the video is embedded into the page." Facebook can only handle videos in specific formats, tagged in a specific way, that originate from specific sites/applications.

To replicate the embedded video feature that YouTube has, you'll need to:

• Create your own Facebook app to power things
• Add the same kind of meta information to your header

If you want (and I would recommend this), the easier route would be to just scrape the <meta> tags YouTube uses. So if you add a video, use the same YouTube app Id, the same <meta> properties, and you should be good to go.

Answer 2

Update To extract just the meta tags with the property attribute I put together the following:

  <?php 

ini_set('display_errors', false); 
$page = "http://www.youtube.com...(the video ID)"; 
$page_data = file_get_contents($page); 

$doc=new DOMDocument();
$doc->loadHTML($page_data);
$xml=simplexml_import_dom($doc);
$meta=$xml->xpath('//meta');
foreach ($meta as $met) 
{
 if ($met['property'] != '')
 {
     echo '<meta property="'.$met['property'] . '" content="' . $met['content']."\">\n";
 }
}
ini_set('display_errors', true); 

?>

I know its a bit hacky but it works. I think I am going to use this with one of the url video embedding plugins and set the meta info in the head of the template.