2

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?

3
  • Do you host your blog on your own or are you at wordpress.com? Which plugin are you using for the facebook addthis button?
    – hakre
    Commented Nov 16, 2010 at 20:28
  • I do host my own and I am using the AddThis Social Bookmarking Widget v1.6.7. The thing about this is that even if you copy and past the URL into that status bar on facebook the video preview still doesn't show.
    – TonyK
    Commented Nov 18, 2010 at 15:51
  • can we access/get all the posts of fb friends in android app??
    – user54112
    Commented Jun 12, 2014 at 12:16

2 Answers 2

6

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.

5
  • The thing is that they are 90% youtube videos. Example Page: geekoplex.com/wordpress/?p=75
    – TonyK
    Commented Nov 18, 2010 at 15:48
  • When you click the button to "share this", you're telling Facebook you want to share the page. Facebook does a quick scan of the page for images, but doesn't see the video. This is most likely because you're sharing from your own site and not from YouTube itself. See my edit for a deeper explanation ...
    – EAMann
    Commented Nov 18, 2010 at 15:59
  • Thanks EAMann you have been really helpful. I am guessing that the meta data needs to be located in the head of the file for the facebook app to recognize it. Any idea if there is a plugin that will do this or a better share plugin. I have 0 experience with the facebook or youtube API so it would be a good learning experience but I would prefer to not have to reinvent the wheel.
    – TonyK
    Commented Nov 18, 2010 at 19:23
  • None that I know of. But what you could do is use a filter on the_content to check for YouTube videos. If they're there, then hook into wp_head to add the appropriate <meta> tags to the page's <header>. I make it sound simple because it is, it will just take some work to do it.
    – EAMann
    Commented Nov 18, 2010 at 19:25
  • Yes it looks like it should be easy enough to implement. The hard part is trying to auto scrape the meta info from the youtube url. I tried using get_meta_tags(); but it is only pulling the title, description, & keywords meta info.
    – TonyK
    Commented Nov 18, 2010 at 23:31
1

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.