How to get the large picture from feed with graph api?

Question

When loading the Facebook feeds from one page, if a picture exist in the feed, I want to display the large picture.

How can I get with the graph API ? The picture link in the feed is not the large one.

Thanks.

Answer 1

The Graph API photo object has a picture connection (similar to that the user object has):

“The album-sized view of the photo. […] Returns: HTTP 302 redirect to the URL of the picture.”

So requesting https://graph.facebook.com/{object-id-from-feed}/picture will redirect you to the album-sized version of the photo immediately. (Usefull not only for displaying it in a browser, but also if f.e. you want to download the image to your server, using cURL with follow_redirect option set.)

---

Edit:

Beginning with API v2.3, the /picture edge for feed posts is deprecated.
However, as a field the picture can still be requested – but it will be a small one.

But full_picture is available as well.

So /{object-id-from-feed}?fields=picture,full_picture can be used to request those, or they can be requested directly with the rest of feed data, like this /page-id/feed?fields=picture,full_picture,… (additional fields, such as message etc., must be specified the same way.)

Answer 2

What worked for me : getting the picture link from the feed and replacing "_s.jpg" with "_n.jpg"

Answer 3

OK, I found a better way. When you retrieve a feed with the graph API, any feed item with a type of photo will have a field called object_id, which is not there for plain status type items. Query the Graph API with that ID, e.g. https://graph.facebook.com/1234567890. Note that the object ID isn't an underscore-separated value like the main ID of that feed item is.

The result of the object_id query will be a new JSON dictionary, where you will have a source attribute containing a URL for an image that has so far been big enough for my needs.

There is additionally an images array that contains more image URLs for different sizes of the image, but the sizes there don't seem to be predictable, and don't all actually correspond to the physical dimensions of the image behind that URL.

I still wish there was a way to do this with a single Graph API call, but it doesn't look like there is one.

Answer 4

For high res image links from:

• Link posts
• Video posts
• Photo posts

I use the following:

Note: The reason I give the _s -> _o hack precedence over the object_id/picture approach is because the object_id approach was not returning results for all images.

var picture = result.picture;
if (picture) {
    if (result.type === 'photo') {
        if (picture.indexOf('_s') !== -1) {
            console.log('CONVERTING');
            picture = picture.replace(/_s/, '_o');
        } else if (result.object_id) {
            picture = 'https://graph.facebook.com/' + result.object_id + '/picture?width=9999&height=9999';
        }
    } else {
        var qps = result.picture.split('&');
        for (var i = 0; i < qps.length; i++) {
            var qp = qps[i];
            var matches = qp.match(/(url=|src=)/gi);
            if (matches && matches.length > 0) picture = decodeURIComponent(qp.split(matches[0])[1]);
        }
    }
}

Answer 5

This is a new method to get a big image. it was born after the previews method doesn't works

     /**
     * return a big url of facebook
     * works onky for type PHOTO
     * @param picture 
     * @param is a post type link
     * @return url of image
     */
    @Transactional
    public String getBigImageByFacebookPicture(String pictrue,Boolean link){
        if(link && pictrue.contains("url=http")){
            String url = pictrue.substring(pictrue.indexOf("url=") + 4);
            try {
                url = java.net.URLDecoder.decode(url, "UTF-8");
            } catch (UnsupportedEncodingException e) {
                StringBuffer sb = new StringBuffer("Big image for Facebook link not found: ");
                sb.append(link);
                loggerTakePost.error(sb.toString());
                return null;
            }
            return url;
        }else{
            try {
                Document doc = Jsoup.connect(pictrue).get();
                return doc.select("#fbPhotoImage").get(0).attr("src");
            } catch (Exception e) {
                StringBuffer sb = new StringBuffer("Big image for Facebook link not found: ");
                sb.append(link);
                loggerTakePost.error(sb.toString());
                return null;
            }
        }
    }

Enjoy your large image :)

Answer 6

Actually, you need two different solutions to fully fix this.

1] https://graph.facebook.com/{object_id}/picture

This solution works fine for images and videos posted to Facebook, but sadly, it returns small images in case the original image file was not uploaded to Facebook directly. (When posting a link to another site on your page for example).

2] The Facebook Graph API provides a way to get the full images in the feed itself for those external links. If you add 'full_picture' to the fields like in this example below when calling the API, you will be provided a link to the higher resolution version.

https://graph.facebook.com/your_facebook_id/posts?fields=id,link,full_picture,description,name&access_token=123456

Combining these two solutions I ended up filtering the input in PHP as follows:

if ( isset( $post['object_id'] ) ){
    $image_url  =   'https://graph.facebook.com/'.$post['object_id'].'/picture';

}else if ( isset( $post['full_picture'] ) ) {
    $image_url  =   $post['full_picture'];

}else{
    $image_url  =   '';
}

Answer 7

See: http://api-portal.anypoint.mulesoft.com/facebook/api/facebook-graph-api/docs/reference/pictures

Just put "?type=large" after the URL to get the big picture.

Answer 8

Thanks to @mattdlockyer for the JS solution. Here is a similar thing in PHP:

$posts = $facebook->api('/[page]/posts/', 'get');

foreach($posts['data'] as $post)
{
    if(stristr(@$post['picture'], '_s.'))
    {
        $post['picture'] = str_replace('_s.', '_n.', @$post['picture']);
    }

    if(stristr(@$post['picture'], 'url='))
    {
        parse_str($post['picture'], $picturearr);
        if($picturearr['url'])
            $post['picture'] = $picturearr['url'];
    }

    //do more stuff with $post and $post['picture'] ...
}

Answer 9

After positive comment from @Lachezar Todorov I decided to post my current approach (including paging and using Json.NET ;):

try
{
    FacebookClient fbClient = new FacebookClient(HttpContext.Current.Session[SessionFacebookAccessToken].ToString());

    JObject posts = JObject.Parse(fbClient.Get(String.Format("/{0}/posts?fields=message,picture,link,attachments", FacebookPageId)).ToString());
    JArray newsItems = (JArray)posts["data"];

    List<NewsItem> result = new List<NewsItem>();

    while (newsItems.Count > 0)
    {
        result.AddRange(GetItemsFromJsonData(newsItems));

        if (result.Count > MaxNewsItems)
        {
            result.RemoveRange(MaxNewsItems, result.Count - MaxNewsItems);
            break;
        }

        JToken paging = posts["paging"];

        if (paging != null)
        {
            if (paging["next"] != null)
            {
                posts = JObject.Parse(fbClient.Get(paging.Value<String>("next")).ToString());
                newsItems = (JArray)posts["data"];
            }
        }
    }

    return result;
}

And the helper method to retieve individual items:

private static IEnumerable<NewsItem> GetItemsFromJsonData(IEnumerable<JToken> items)
{
    List<NewsItem> newsItems = new List<NewsItem>();

    foreach (JToken item in items.Where(item => item["message"] != null))
    {
        NewsItem ni = new NewsItem
        {
            Message = item.Value<String>("message"),
            DateTimeCreation = item.Value<DateTime?>("created_time"),
            Link = item.Value<String>("link"),
            Thumbnail = item.Value<String>("picture"),

            // http://stackoverflow.com/questions/28319242/simplify-looking-up-nested-json-values-with-json-net/28359155#28359155
            Image = (String)item.SelectToken("attachments.data[0].media.image.src") ?? (String)item.SelectToken("attachments.data[0].subattachments.data[0].media.image.src")
        };
        newsItems.Add(ni);
    }

    return newsItems;

}

NewsItem class I use:

public class NewsItem
{
  public String Message { get; set; }
  public DateTime? DateTimeCreation { get; set; }
  public String Link { get; set; }
  public String Thumbnail { get; set; }
  public String Image { get; set; }
}