Isotope + jQuery TMPL

issue #214

by Reusablecode

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="page">

    <div id="wall" class="facebookWall"></div>

</div>

<!-- jQuery templates -->

<script id="feedTpl" type="text/x-jquery-tmpl">

<div class="item">

    <div class = "picbox">
    {{if link}}
    <a href ="${link}">
    <img src="${picture}" class="avatar"/>
    </a>

    {{else}}
    <a id ="fbicon" href ="https://facebook.com/alexanderfuchsdiamantaire">
    <img src="img/elysee2.jpg"/>
    </a>

    {{/if}}
    </div>

    <div class ="textbox">

    <div class="status">
        <h2>${created_time}</h2>
        <p class ="message">{{if type == "photo"}}<a href="${link}" target="_blank">{{/if}}{{html message}}{{if type == "photo"}}</a>{{/if}}</p>
    </div>

    <p id="meta">
    {{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>

    </div>

</div>
</script>

CSS

*{
    margin:0;
    padding:0;
}

html{
    background-color: white;
}

body{
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
    color:#434D53;
}

#page{
    max-width:1140px;
    margin: 0 auto;
}

#container{
    width:960px;
    margin: 0px auto;
    padding-top: 100px;
}

#wall .item{
    width:320px;
    margin-bottom:20px;
}

#wall .picbox   {
    display:block;
}

#wall .textbox {
    display:block;
}

.facebookWall h2{
    font-size:18px;
    font-weight:bold;
    margin-bottom: 10px;
    text-align:left;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    color:#0E8D94;
}

a:hover{
    text-decoration:underline;
}

JavaScript

$(document).ready(function(){

    // Calling the plugin with a page id and an access token

    $('#wall').facebookWall({
        id:'alexanderfuchsdiamantaire',
        access_token:'INSERT YOUR ACCESS TOKEN HERE'
    });

});

// Creating the plugin

(function($){

    $.fn.facebookWall = function(options){

        options = options || {};

        if(!options.id){
            throw new Error('You need to provide an user/page id!');
        }

        if(!options.access_token){
            throw new Error('You need to provide an access token!');
        }

        // Default options of the plugin:

        options = $.extend({
            limit: 15   // You can also pass a custom limit as a parameter.
        },options);

        // Putting together the Facebook Graph API URLs:

        var graphUSER = 'https://graph.facebook.com/'+options.id+'/?fields=name,picture&access_token='+options.access_token+'&callback=?',
            graphPOSTS = 'https://graph.facebook.com/'+options.id+'/posts/?access_token='+options.access_token+'&callback=?&date_format=U&limit='+options.limit;

        var wall = this;

        $.when($.getJSON(graphUSER),$.getJSON(graphPOSTS)).done(function(user,posts){

            // user[0] contains information about the user (name and picture);
            // posts[0].data is an array with wall posts;

            var fb = {
                user : user[0],
                posts : []
            };

            var number = 0;

            $.each(posts[0].data,function(){

                // We only show links and statuses from the posts feed:
                if(this.type != 'link' && this.type!='status' && this.type!='photo'){
                    return true;
                }

                // Copying the user avatar to each post, so it is
                // easier to generate the templates:



                // Converting the created_time (a UNIX timestamp) to
                // a relative time offset (e.g. 5 minutes ago):
             ...