jQuery Plugin To Display Latest Facebook Updates - Facebook Wall

An easy jQuery plugin for creating a 'Facebook Wall' widget on your website to display the latest updates (news feed) from your fan page or profile.

How to use it:

1. Create a container for the facebook widget.

<ul id="facebook_wall">
</ul>

2. Include the jQuery library and jQuery facebook wall plugin on the page.

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script src="facebook_wall.plugin.js" type="text/javascript"></script> 

3. Create a new App on facebook developer page and get the App ID/API Key and App Secret.

<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script src="facebook_wall.plugin.js" type="text/javascript"></script> 

4. Call the plugin and insert the facebook access token in the javascript.

<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#facebook_wall').facebook_wall({
id: '428802613841578', // your profile or fan page ID.
access_token: '193673707489176|55a9bc60f1b35074263ea95e45218fc3', // API Key|App Secret
limit: 10 // the maximum items you want to display on the page.
});
});
})(jQuery);
</script>

5. All the options.

<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#facebook_wall').facebook_wall({
id: '' - insert your profile og fanpage id
access_token: '' - insert your acces token
limit: 10 - any amount from 1-15
timeout: 400 - any amount (in miliseconds)
speed: 400 - any amount (in miliseconds)
effect: 'slide' - choices: 'slide', 'fade' or 'none'
locale: 'en_US' - your contry code
avatar_size: 'square' - choices: 'square', 'small', 'normal' or 'large'
message_length: 200, // Any amount you like. Above 0 shortens the message length
show_guest_entries: true - choices: 'true' or 'false'
text_labels: your translations
on_complete: execute function when complete
});
});
})(jQuery);
</script>

6. The sample CSS to style the facebook widget.

#facebook_wall {
min-height: 200px;
margin: 0 -40px;
border-top: 2px solid #535353;
border-bottom: 2px solid #535353;
background: #eee;
position: relative;
}
#facebook_wall .facebook-loading {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: url('images/loader.png') no-repeat 50% 50%;
position: absolute;
top: 100px;
left: 50%;
}
#facebook_wall .facebook-loading {
-moz-animation: update-spinner 1s linear infinite;
-webkit-animation: update-spinner 1s linear infinite;
-ms-animation: update-spinner 1s linear infinite;
animation: update-spinner 1s linear infinite;
}
#facebook_wall li {
min-height: 52px;
padding: 10px 10px 10px 72px;
border-top: 1px solid #d4d4d4;
display: none;
position: relative;
}
#facebook_wall li:first-child {
border-top: none;
}
#facebook_wall li .meta-header {
}
#facebook_wall li .meta-header .avatar {
width: 50px;
height: 50px;
border: 1px solid #999;
position: absolute;
top: 10px;
left: 10px;
}
#facebook_wall li .meta-header .author {
font-weight: bold;
}
#facebook_wall li .meta-header .date {
display: none;
}
#facebook_wall li .message {
color: #666;
margin-bottom: 16px;
}
#facebook_wall li .story {
font-style: italic;
color: #666;
margin-bottom: 16px;
}
#facebook_wall li .media {
color: #8a8a8a;
margin: 10px 0;
}
#facebook_wall li .media.border-left {
padding-left: 10px;
border-left: 2px solid #a1a1a1;
}
#facebook_wall li .media .image {
margin-right: 10px;
float: left;
position: relative;
}
#facebook_wall li.type-video .media .image:after {
width: 44px;
height: 44px;
background: url('images/play.png') no-repeat 50% 50%;
margin-top: -22px;
margin-left: -22px;
position: absolute;
top: 50%;
left: 50%;
content: " ";
pointer-events: none;
}
#facebook_wall li .media .image img {
max-width: 100%;
height: auto;
padding: 2px;
border: 1px solid #a1a1a1;
}
#facebook_wall li .media .media-meta {
float: left;
display: table;
}
#facebook_wall li .media .media-meta .name {
font-weight: bold;
}
#facebook_wall li .media .media-meta .caption {
font-style: italic;
}
#facebook_wall li .media .media-meta .description {
}
#facebook_wall li .meta-footer {
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
clear: both;
}
#facebook_wall li .meta-footer .seperator {
padding: 0 4px;
}
#facebook_wall li .meta-footer .date {
}
#facebook_wall li .meta-footer .likes {
}
#facebook_wall li .meta-footer .comments {
}
#facebook_wall li .meta-footer .actions {
}
#facebook_wall li .meta-footer .actions .like {
}
#facebook_wall li .meta-footer .actions .comment {
}
#facebook_wall li ul.like-list {
margin-top: 10px;
display: none;
}
#facebook_wall li ul.like-list li.like {
font-size: 11px;
line-height: 16px;
margin-top: 2px;
border-top: none;
background: #e0e0e0;
display: block;
}
#facebook_wall li ul.like-list li.like:first-child {
margin-top: 0;
}
#facebook_wall li ul.like-list li.like .meta-header .author {
}
#facebook_wall li ul.comment-list {
margin-top: 10px;
}
#facebook_wall li ul.comment-list li.comment {
font-size: 11px;
line-height: 16px;
margin-top: 2px;
border-top: none;
background: #e0e0e0;
display: block;
}
#facebook_wall li ul.comment-list li.comment:first-child {
margin-top: 0;
}
#facebook_wall li ul.comment-list li.comment .meta-header .author {
}
#facebook_wall li ul.comment-list li.comment .meta-header .date {
}
#facebook_wall li ul.comment-list li.comment .message {
margin-bottom: 0;
}
#facebook_wall li ul.comment-list li.comment .date {
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
}
#facebook_wall li ul.comment-list li.read_more {
min-height: 1px;
font-size: 9px;
line-height: 16px;
color: #a1a1a1;
padding: 0 10px 0 72px;
margin: 5px 0 -5px 0;
border-top: none;
display: block;
}
#facebook_wall li ul.comment-list li.read_more a {
color: #a1a1a1;
}

---

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