jQuery Plugin To Display Facebook Fan Page Activity Feed - FB Wall

File Size: 8.27 KB
Views Total: 7825
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Display Facebook Fan Page Activity Feed - FB Wall

FB Wall is a lightweight jQuery plugin that embeds a custom activity feed (e.g. posts, photos, events) from any Facebook fan page into your web page.

See also:

How to use it:

1. Include jQuery library and the jQuery FB Wall plugin on your web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/fbwall.js"></script>

2. Include the jQuery templates plugin to render the activity feed data as a template.

<script src="js/jquery.tmpl.min.js"></script>

3. Create the template for the Facebook activity feed wall.

<script id="headingTpl" type="text/x-jquery-tmpl">
<h1>${name}<span>on Facebook</span></h1>
</script>

<script id="feedTpl" type="text/x-jquery-tmpl">
<li>
  <img src="${from.picture}" class="avatar" />
  
  <div class="status">
    <h2><a href="http://www.facebook.com/profile.php?id=${from.id}" target="_blank">${from.name}</a></h2>
    <p class="message">{{html message}}</p>
    {{if type == "link" }}
      <div class="attachment">
        {{if picture}}
          <img class="picture" src="${picture}" />
        {{/if}}
        <div class="attachment-data">
          <p class="name"><a href="${link}" target="_blank">${name}</a></p>
          <p class="caption">${caption}</p>
          <p class="description">${description}</p>
        </div>
      </div>
    {{/if}}
  </div>
  
  <p class="meta">${created_time} · 
  {{if comments}}
    ${comments.count} Comment{{if comments.count>1}}s{{/if}}
  {{else}}
    0 Comments
  {{/if}} · 
  {{if likes}}
    ${likes.count} Like{{if likes.count>1}}s{{/if}}
  {{else}}
    0 Likes
  {{/if}}
  </p>
  
</li>
</script>

4. Initialize the plugin with a fanpage id and an access token.

$('#wall').facebookWall({

  // insert your fanpage id
  id:'jqueryscript',

  // insert your acces token
  access_token:''

});

5. You can also pass a custom limit as a parameter.

$('#wall').facebookWall({

  // insert your fanpage id
  id:'jqueryscript',

  // insert your acces token
  access_token:'',

  // any amount
  limit: 15

});

This awesome jQuery plugin is developed by Gertt. For more Advanced Usages, please check the demo page or visit the official website.