Widget for getting facebook group's timeline / posts - facebook-widgets

Question

I want to integrate facebook Widget for getting facebook group's timeline / posts. I have searched & got this https://developers.facebook.com/docs/plugins/page-plugin but this gives user's & page's timeline. I wanted Group's timeline. I didn't found perfect answer on Fb Developer portal & didn't get anything on web.
Any help on this is appreciated.
Thanks in Advance.

Answer 1

After lots of search, no plugin kind of thing i got for this. But yes got one blog in php where the developer made custom widget manually, I modified it with JavaScript & jQuery.
<div style="height: 375px; background: #f6f7f9;">
<div id="fb-root"></div>
<p class="text-center media-body social-link" style="background: white">
<img src="~/Content/Images/Link-Red.png" />
Facebook Group
</p>
<div id="fix-div"></div>
<div id="facebook-group" style="overflow-y: scroll; height: 375px; margin-top: 55px;"></div>
</div>
Facebook JavaScript API as follows-
<script>
var access_token = '<!-- Valid fb access token -->';
var groupId = 'valid facebook group id';
window.fbAsyncInit = function () {
FB.init({
appId: 'valid facebook app id',
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.api("" + groupId + "?fields=cover,icon,name,privacy",
'get',
{ access_token: access_token },
function (groupResponse) {
if (groupResponse && !groupResponse.error) {
$("#fix-div").html('');
$("#facebook-group").html('');
var fixDivHtml =
"<div style='z-index: 10;position: absolute;border: 1px solid #e9ebee;max-width: 470px;background: white;min-height: 50px;'><div class='media' style='border: 0'><div class='media-left media-middle' style='vertical-align: bottom'><a href='https://www.facebook.com/groups/" + groupResponse.id + "' target='_blank'><img class='media-object' src='/Content/Images/Facebook-group.png' style='min-height: 50px;padding: 5px 10px;width: 64px;'></a></div><div class='media-body media-middle'><a href='https://www.facebook.com/groups/" + groupResponse.id + "' target='_blank'><h4 class='media-heading' style='font-size: 14px;font-weight: bold;'>" + groupResponse.name + "</h4></a></div></div></div>";
$("#fix-div").append(fixDivHtml);
FB.api("/" +
groupId +
"/feed?fields=id,message,link,attachments{media,description},created_time,from,object_id,parent_id&limit=1000",
'get',
{ access_token: access_token },
function (response) {
if (response && !response.error) {
for (var i = 0; i < response.data.length; i++) {
var picture = undefined;
var description = undefined;
var date = formatDate(response.data[i].created_time);
if (response.data[i].attachments !== undefined) {
if (response.data[i].attachments.data.length > 0) {
if (
response.data[i].attachments.data[0].media !==
undefined) {
if (
response.data[i].attachments.data[0].media
.image !==
undefined)
picture = response.data[i].attachments
.data[0].media.image.src;
if (
response.data[i].attachments.data[0].media
.image.description !==
undefined)
description = response.data[i].attachments
.data[0].media.image.description;
} else {
if (
response.data[i].attachments.data[0]
.description !==
undefined)
description = response.data[i].attachments
.data[0].description;
}
}
}
var message = response.data[i].message;
var
append =
"<div class='border'><div class='media'><div class='media-left media-middle'><a href='https://www.facebook.com/" + response.data[i].from.id + "' target='_blank'><img class='media-object' src='http://graph.facebook.com/" + response.data[i].from.id + "/picture?type=square'></a></div><div class='media-body' style='vertical-align: bottom'><a href='https://www.facebook.com/" + response.data[i].from.id + "' target='_blank'><h4 class='media-heading'>" + response.data[i].from.name + ".<br /><small>" + date + "</small></h4></a></div>";
if (message !== undefined) {
if (ValidURL(message) === 1) {
append +=
"<a class='ellipsis' href='" +
message +
"' target='_blank'>" +
message +
"</a>";
} else {
append += "<a class='ellipsis'>" + message + "</a>";
}
}
if (picture !== undefined)
append +=
"<a href='" +
response.data[i].link +
"' target='_blank'><img class='img-responsive' src='" +
picture +
"'/></a>";
if (description !== undefined)
append += "<p>" + description + "</p>";
append += '<hr///>' +
"<div class='btn-group btn-group-justified' role='group' aria-label='Justified button group'>" +
"<a href=" +
response.data[i].link +
" class='btn btn-default' role='button' target='_blank'><i class='fa fa-thumbs-up' aria-hidden='true'></i> Like</a>" +
"<a href=" +
response.data[i].link +
" class='btn btn-default' role='button' target='_blank'><i class='fa fa-comment' aria-hidden='true'></i> Comment</a></div></div></div>";
$("#facebook-group").append(append);
}
}
});
}
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
var formatDate = function (input) {
var d = new Date(Date.parse(input));
input = d.toString();
d = new Date(Date.parse(input.replace(/-/g, "/")));
var month = [
'january', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'
];
var date = d.getDay().toString() +
" " +
month[d.getMonth().toString()] +
", " +
d.getFullYear().toString();
return (date);
};
function ValidURL(str) {
if (
/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(str))
return 1;
else
return -1;
}
</script>
Here formatDate & ValidURL are helper functions used for some cosmetic operations.