How to fetch/embed facebook's photos/videos/statuses?

StackOverflow https://stackoverflow.com/questions/18807005

Question

I'm trying to embed Facebook's photos, videos or even statuses, but I couldn't fetch anything from Facebook,

For example, I'm trying to embed this Photo Post: https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater

First (trying oEmbed services):

  • Facebook doesn't support an oEmbed interface
  • Also, I think that Facebook is blocking web-scraping

so some services like Noembed (or Embedly) will work fine to embed content from Twitter, Youtube or even other sites that doesn't support oEmbed interface, but they won't retrieve anything from Facebook, for example, trying to call the service with:

http://noembed.com/embed?url=https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater

will give:

{
    url: "https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater",
    error: "no matching providers found"
}

Second (trying YQL):

when trying to fetch it using Yahoo's YQL like this:

http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url='https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater'%20and%20xpath='//meta|//title|//link'%20and%20compat='html5'&format=json

it will give nothing, and you can even try it here in the YQL console

Question is:

How on earth could someone fetch anything from Facebook?

Was it helpful?

Solution

Finally :), Facebook now supports a new feature that enables us to embed "Public Posts", So the short answer & all we need to know about Embedded Posts is in this link:

https://developers.facebook.com/docs/plugins/embedded-posts/

But to embed the answer here ;) , let's do the following:

1- Include the JavaScript SDK on your page once, ideally right after the opening <body> tag (don't forget replace the appId below with your own application ID)

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=334259852684024";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2- Place the code for your plugin wherever you want the plugin to appear on your page.

<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"></div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top