I recently did that on my website, although comments posted on facebook page go through the website, the link to comment post, redirects to facebook post, where it can be commented.
Below the code I used:
<script>
function get_facebook_posts() {
console.log('Loading facebook posts');
FB.api('/|REPLACE WITH PAGE ID/feed?limit=10&access_token=|REPLACE WITH FB ACCESS TOKEN|', function(response)
{
$.each(response.data, function(key, val){
message = val['message'];
if(message != 'undefined' && message != '' && message != null && typeof(message) != 'undefined'){
identifier = val['id'];
identifier_parts = identifier.split('_');
spec_identifier = identifier_parts[1];
var creator;
if(typeof(val['admin_creator']) != 'undefined'){
creator = val['admin_creator']['name'];
}
else{
creator = '|REPLACE WITH YOUR DESIRED PAGE NAME|';
}
var post_html = '<div class="col-sm-4">'+
'<div class="single-blog">'+
'<img class="fbpostimage" id="post_image_'+ spec_identifier +'" src="images/logo.png" alt="" />'+
'<h2>'+ creator +'</h2>'+
'<ul class="post-meta">'+
'<li><i class="fa fa-clock-o"></i><strong>Published on:</strong> '+ getDateString(val['created_time']) +'</li>'+
'</ul>'+
'<div class="blog-content">'+
'<p>'+ val['message'] +'</p>'+
'</div>'+
'<a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail_'+ spec_identifier +'">Comments</a>'+
'</div>'+
'<div class="modal fade" id="blog-detail_'+ spec_identifier +'" tabindex="-1" role="dialog" aria-hidden="true">'+
'<div class="modal-dialog">'+
'<div class="modal-content">'+
'<div class="modal-body">'+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
'<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F|REPLACE WITH PAGE ID|%2Fposts%2F'+ spec_identifier +
'&width=500" width="500" height="498" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>'+
'</div> '+
'</div>'+
'</div>'+
'</div>'+
'</div>';
$('#|REPLACE WITH THE ID OF THE DIV WHERE POSTS MUST APPEAR|').append(post_html);
console.log(identifier);
FB.api('/' + identifier + '/attachments?access_token=|REPLACE WITH FACEBOOK ACCESS TOKEN|', function(subresponse){
if(subresponse.data.length > 0){
if(typeof(subresponse.data[0]['media']) != 'undefined'){
if(typeof(subresponse.data[0]['media']['image']) != 'undefined'){
$('#post_image_' + spec_identifier).attr('src', subresponse.data[0]['media']['image']['src']);
}
}
}
});
}
});
});
function getDateString(date){
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
var date = new Date(date);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = date.getHours() >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return monthNames[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + strTime;
}
}
window.fbAsyncInit = function() {
FB.init({
appId : '|REPLACE WITH FACEBOOK APP ID|',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
FB.Event.subscribe('xfbml.render', get_facebook_posts);
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You must replace each text between || with the actual APP and Page Data.
Hope it Helps
