jQuery Plugin To Display Facebook Fan Page Activity Feed - FB Wall
File Size: | 8.27 KB |
---|---|
Views Total: | 7834 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
- jQuery Plugin To Display Latest Facebook Updates - Facebook Wall
- jQuery Plugin For Displaying Complete Facebook Fanpage Data - Famax
- Facebook Fan Page Feed Widget with Likes - Facio
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.