CODEWITHSUNDEEP
javascriptfacebookinternet-explorer
Modika
Modika

Reputation: 6282

Facebook Graph Call not working in Internet Explorer 9

I have a JavaScript function that I use to call the Facebook API and get a list of posts from a wall. In Firefox, Chrome and Safari this works with no issue, but in Internet Explorer 9 (I haven't tested below yet), it just doesn't do anything, the UI stays blocked, but I do not seem to get any messages that point to an error. I have a feeling it may have something to do with the JSON being returned and the Internet Explorer parser, but I can't be sure at this point.

After being pointed back to the Facebook SDK, I re-implemented using that (I am not sure why I left it before now), and it all seems to play nicely with Internet Explorer now.

Old Code

var getFeed = function (name, type, limit, accessToken, apiKey, containerId) {
    var list_url = "https://graph.facebook.com/" + name + "/" + type + "?limit=" + limit + "&access_token=" + accessToken + "&api_key=" + apiKey;
    var html = "";

    displayHelper.blockUI(containerId, "Loading Feed");
    $.getJSON(list_url, function (json) {
        //Loop through and within the data array to retrieve the variables.
        $.each(json.data, function (i, fb) {
            var msg = (typeof (fb.message) != "undefined") ? fb.message : "";
            var link = (typeof (fb.link) != "undefined") ? fb.link : "";
            var pic = "";
            // msg = (typeof(fb.story) != "undefined") ? fb.story : msg;
            var type = (typeof (fb.type) != "undefined") ? fb.type : "";
            var includeInOutput = true;

            pic = getPicture(fb.from.id);

            switch (type) {
                case "story":
                    msg = fb.story;
                    break;
                case "link":
                    if (typeof (fb.message) != "undefined")
                        msg = fb.message;
                    else if (typeof (fb.caption) != "undefined")
                        msg = fb.caption;
                    else if (typeof (fb.story) != "undefined")
                        msg = fb.story;
                    else if (typeof (fb.name) != "undefined")
                        msg = fb.name;
                    break;
                case "video":
                case "photo":
                    if (typeof (fb.message) != "undefined")
                        msg = fb.message;
                    else if (typeof (fb.story) != "undefined")
                        msg = fb.story;
                    break;
                case "status":
                    if (typeof (fb.message) != "undefined")
                        msg = fb.message;
                    else if (typeof (fb.story) != "undefined")
                        msg = fb.story;
                    break;
                default:
                    includeInOutput = false;
                    break;
            }

            if (includeInOutput) {
                //build html for this list item
                html += '<dl class="fb-item">';
                html += "<dt>" + fb.from.name + "</dt>";
                html += (pic != '') ? '<dd class="img"><img src="' + pic + '" />' : '';
                html += '<dd class="msg">' + msg + '</dd>';

                /*html += '<a href="' + link + '" class="fb_link" target="_blank">'
                + msg  + "(" + type + ")"
                + "</a>";*/

                html += '<dd class="links">';
                html += '<span>' + fuzzyTime(fb.created_time.replace(/-/g, '/')) + '</span>';

                if (typeof (fb.actions) != "undefined") {
                    if (fb.actions[1].name == "Like")
                        html += "<a href='" + fb.actions[1].link + "' class='fb_link' target='_blank'>Like</a> - ";

                    if (fb.actions[0].name == "Comment")
                        html += "<a href='" + fb.actions[0].link + "' class='fb_link' target='_blank'>Comment</a>";
                }
                html += '</dd>';
                html += "</dl>";
            }

        }); /* end .each */

        //html += "</ul>";
        $(containerId).html(html);
        $(containerId).unblock();

    }); /* end getJSON */

} /* end hetFeed

New Code - UPDATED again. The picture was not returning so I extracted the message and build parts into its own method and built the message on the call back of the get picture. Before I was doing it in a blocking way, just wrong! Hopefully this will help someone one day.

var postMessage = function (fb, containerId) {
    FB.api("/" + fb.from.id + "/?fields=picture", {}, function (p) {
        var pic = p.picture;
        var msg = (typeof (fb.message) != "undefined") ? fb.message : "";
        var link = (typeof (fb.link) != "undefined") ? fb.link : "";
        var type = (typeof (fb.type) != "undefined") ? fb.type : "";
        var includeInOutput = true;
        var html = "";

        switch (type) {
            case "story":
                msg = fb.story;
                break;
            case "link":
                if (typeof (fb.message) != "undefined")
                    msg = fb.message;
                else if (typeof (fb.caption) != "undefined")
                    msg = fb.caption;
                else if (typeof (fb.story) != "undefined")
                    msg = fb.story;
                else if (typeof (fb.name) != "undefined")
                    msg = fb.name;
                break;
            case "video":
            case "photo":
                if (typeof (fb.message) != "undefined")
                    msg = fb.message;
                else if (typeof (fb.story) != "undefined")
                    msg = fb.story;
                break;
            case "status":
                if (typeof (fb.message) != "undefined")
                    msg = fb.message;
                else if (typeof (fb.story) != "undefined")
                    msg = fb.story;
                break;
            default:
                includeInOutput = false;
                break;
        }

        if (includeInOutput) {
            //build html for this list item
            html += '<dl class="fb-item">';
            html += "<dt>" + fb.from.name + "</dt>";
            html += (pic != '') ? '<dd class="img"><img src="' + pic + '" />' : '';
            html += '<dd class="msg">' + msg + '</dd>';

            /*html += '<a href="' + link + '" class="fb_link" target="_blank">'
            + msg  + "(" + type + ")"
            + "</a>";*/

            html += '<dd class="links">';
            html += '<span>' + fuzzyTime(fb.created_time.replace(/-/g, '/')) + '</span>';

            if (typeof (fb.actions) != "undefined") {
                if (fb.actions[1].name == "Like")
                    html += "<a href='" + fb.actions[1].link + "' class='fb_link' target='_blank'>Like</a> - ";

                if (fb.actions[0].name == "Comment")
                    html += "<a href='" + fb.actions[0].link + "' class='fb_link' target='_blank'>Comment</a>";
            }
            html += '</dd>';
            html += "</dl>";
        }

        $(containerId).append(html);
    });
}

var getFeed = function (name, type, limit, accessToken, apiKey, containerId) {

    var list_url = "https://graph.facebook.com/" + name + "/" + type + "?limit=" + limit + "&access_token=" + accessToken + "&api_key=" + apiKey;
    var fullHtml = "";

    helper.blockUI(containerId, "Loading Feed");
    var path = "/" + name + "/" + type;

    FB.api(path, { access_token: accessToken, api_key: apiKey, limit: limit }, function (json) {
        console.log(json);
        var data = json.data;
        for (var i = 0, l = data.length; i < l; i++) {
            var fb = data[i];

            postMessage(fb, containerId);

        } //End For

        $(containerId).unblock();
    });

} /* End getFeed */

Upvotes: 0

Views: 755

Answers (1)

Nitzan Tomer
Nitzan Tomer

Reputation: 164139

You might want to try to use the sdk anyway, that way you can know better where exactly is the problem with your code in IE.

If you do this:

var path = name + "/" + type;
var params = limit == null ? {} : { limit: limit };

FB.api(path, "post", params, function(json) {
    ......
});

It should pretty much do the same as the code you posted (minus the actual handling of the results). If you try it and this works in IE then the problem was with how you communicated with facebook, otherwise it's in the part that handles the results from facebook.

One thing for sure, this approach (of using the sdk) is simpler and more elegant, not to mention that in this way, changes facebook are making on their on end won't affect you (in most cases).

Upvotes: 1

Related Questions