Facebook HTML graph api cover photo link

Question

I know that the Facebook graph api for a profile picture is pretty simple to use:

http://graph.facebook.com/timothy.potter2/picture

This redirects to the image and I can use it in a standard html img tag as a hotlinked image

I'm looking of how to do this with cover photos in ideally the same way, so I can link my Church's facebook cover image to the website header.

I have got this so far:

http://graph.facebook.com/32533442649?fields=cover.source

which returns this:

{
 "cover": {
  "source": "https://scontent-a.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/s720x720/10731043_10152857370877650_9073058844184642679_n.jpg?oh=95190ad300e507211cbd840f619fe606&oe=5516F829",
  "id": "10152857370877650"
},
"id": "32533442649"
}

How do I get it to return the image instead? Any code that can be pasted straight into html would be greatly appreciated. Thanks

Tobi Tobi · Accepted Answer · 2014-11-20T07:58:40

This is not possible with the field /{page_id}/?fields=cover. The /{user_id}/picture is an exception (and it's an edge, not a field).

You'll have to parse the JSON result either via JavaScript or on the server side.

For a JS example, have a look at this Fiddle:

http://jsfiddle.net/16cxL1ty/

or the code here:

<img src="" id="cover"/>

<script>

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          var result = JSON.parse(xmlhttp.responseText).cover.source;
          document.getElementById("cover").src=result;
        }
    }
    xmlhttp.open("GET",'https://graph.facebook.com/32533442649?fields=cover{source}',true);
    xmlhttp.send();

</script>

Facebook HTML graph api cover photo link

1 Answers