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 ? T

Answer 1

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 2

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 3

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 4

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 5

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 6

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; }
}