Facebook does not allow the presentation of posts in iframes?

Question

Follow a routine that searches all posts of a particular user via Facebook Graph API, displays the time it was posted and the message, description and type of post on DIV:

FB.api(
    {
        method: 'fql.query',
        locale: 'pt_BR',
        query: 'SELECT post_id, source_id, message, created_time, type, description, permalink FROM stream WHERE source_id = ' + friend_data[i].id + ' LIMIT 50'
    },
    function(posts){
        if(posts.length>0){
            var divFriendsPost = document.getElementById('friend' + posts[0].source_id);
            var friendPosts = '';
            for(var j=0; j < posts.length ; j++) {
                var d = new Date(0);
                d.setUTCSeconds(posts[j].created_time);
                dateFormat = [d.getDate(), (d.getMonth()+1), d.getFullYear()].join('/');
                timeFormat = [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');
                if(posts[j].permalink != null && posts[j].permalink != '') {
                    friendPosts += '<a href="' + posts[j].permalink + '" target="_blank">';
                }
                friendPosts += '<div class="singlePost">';
                friendPosts += '<div class="spLeft">';
                friendPosts += '<p>' + dateFormat + '</p>';
                friendPosts += '<p>' + timeFormat + '</p>';
                friendPosts += '</div>';
                friendPosts += '<div class="spRight">';
                friendPosts += '<p>' + posts[j].message  + '(' + posts[j].type + ')</p>';
                friendPosts += '<p>' + posts[j].description +'</p>';
                friendPosts += '</div>';
                friendPosts += '</div>';
                if(posts[j].permalink != null && posts[j].permalink != '') {
                    friendPosts += '<div>';
                    friendPosts += '<iframe height="400" src="' + posts[j].permalink + '"></iframe>';
                    friendPosts += '</div>';
                    friendPosts += '</a>';
                }
            }
            var newNode = document.createElement('div');
            newNode.innerHTML = friendPosts;
            divFriendsPost.appendChild(newNode);
        }
    }
);

The problem is that it is not enough to present this information in the DIV, because most of the time the post is a sharing or publishing photos, for example.

I had the idea to put the link (permalink) in a iframe under the DIV, but the console returns the following error:

Refused to display 'https://www.facebook.com/...' in a frame because it set 'X-Frame-Options' to 'DENY'.

I believe that facebook blocks this kind of action.

How to solve this problem, i.e., simply show only the post (with nothing around on the facebook page) under the DIV?

Answer 1

This is because when accessing the HTML page, you have the following header

x-frame-options:DENY

This explicitly tells the browser that it does not want the site to be viewed within an Iframe. It is common to do this to force people to access the site through the site URL, not through the url of others, and of course, for security reasons, and avoid, for example, that it is easy to steal passwords while trying to make the person think that they really are on Facebook.

The solution for you to solve this is to use the official Facebook API. They already provide buttons, comments and the like. What you are doing, by the way, if it is not via an API of your own, is explicitly prohibited in the terms of use of Facebook.

Answer 2

You don’t need to create an iframe with the Facebook post. You can use the Facebook Embedded Posts.

It automatically creates an iframe with the post you want. Just pass the link.