Widget for getting facebook group's timeline / posts

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" />
           <a href="<!--Widget.Link-->">Facebook Group</a>
           </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>&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;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.