Создание стены Facebook с помощью jQuery шаблонов

Для создания собственной стены как на Facebook, мы воспользуемся Facebook Graph API, jQuery и template plugin. Создать отдельный HTML код и конвертировать посты поможет jQuery.tmpl.

GRAPH API

Будем использовать два API ключа. Они позволят извлечь информацию о пользователе (аватар, полное имя и т.д.) и получить все последние посты. Пример: http://graph.facebook.com/smashmag/posts/

{
    "data": [{
        "id": "45576747489_10150136051797490",
        "from": {
            "name": "Smashing Magazine",
            "category": "Website",
            "id": "45576747489"
        },
        "message": "Creating a sphere with 3D CSS",
        "picture": "http://platform.ak.fbcdn..",
        "link": "http://bit.ly/epqBBv",
        "name": "Creating a sphere with 3D CSS \u2013 Paul Hayes",
        "caption": "www.paulrhayes.com",
        "description": "A professional slice of newly..",
        "icon": "http://photos-d.ak.fbcdn.net/photos..",
        "actions": [{
            "name": "Share",
            "link": "http://www.facebook.com/share.."
        }],
        "type": "link",
        "application": {
            "name": "Sendible",
            "id": "26065877776"
        },
        "created_time": 1301325483,
        "updated_time": 1301325483,
        "likes": {
            "data": [{
                "name": "Zome Lia",
                "id": "100000643422735"
            }],
            "count": 16
        }
    }]
}

Ответ JSON вмещает информацию о постах Smashing Magazine. В некоторых полях имеется информация о количестве комментариев, дате создания, заголовке и т.д. рак
Для извлечения аватарки создаем дополнительный запрос:
http://graph.facebook.com/smashmag/


{
    "id": "45576747489",
    "name": "Smashing Magazine",
    "picture": "http://profile.ak.fbcdn.net/hp..",
    "link": "http://www.facebook.com/smashmag",
    "category": "Website",
    "likes": 42696,
    "website": "http://www.smashingmagazine.com/",
    "username": "smashmag",
    "company_overview": "Founded in September 2006..",
    "mission": "The offical Smashing Magazine pa..!",
    "products": "Looking for a web design job? Che.."
}

Вот, что мы имеем:

ШАБЛОНЫ

Поскольку Graph API возвращает валидные JSON данные, то можно применить их для шаблонов. Для этого нужно определить блоки HTML кода.

Поместим шаблоны между тегом script.

Шаблоны имеют следующую форму:



<script id="someID" type="text/x-jquery-tmpl">
<!-- HTML markup coupled with template tags -->
</script>

Первый шаблон такой:


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

${} тег передается в метод tmpl() и получает изменённое имя свойства объекта.

Другой шаблон немного сложнее. Он служит для и отображения постов.



<script id="feedTpl" type="text/x-jquery-tmpl">
<li>
<img src="${from.picture}" />

<div>
<h2><a href="http://www.facebook.com/profile.php?id=${from.id}" target="_blank">${from.name}</a></h2>
<p>{{html message}}</p>
{{if type == "link" }}
<div>
{{if picture}}
<img src="${picture}" />
{{/if}}
<div>
<p><a href="${link}" target="_blank">${name}</a></p>
<p>${caption}</p>
<p>${description}</p>
</div>
</div>
{{/if}}
</div>

<p>${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>

Внутри тегов можно использовать выражения JavaScript. Это особенно актуально, когда нужно применить выражения {{if}}, для проверки наличия комментариев.
Смотрим HTML документ:






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Making a Custom Facebook Wall with jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="page">

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

</div>

<!-- jQuery templates. Not rendered by the browser. Notice the type attributes -->

<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>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

JQUERY

Приступаем к разработке плагина.
script.js


// Создаём плагин.

(function($){

    $.fn.facebookWall = function(options){

        options = options || {};

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

        // начальные значения:

        options = $.extend({
            limit: 15   // лимит
        },options);

        // Graph API URL:

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

        var wall = this;

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

            // user[0] содержит инфу о пользователе
            // posts[0].data содержит инфу о постах;

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

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

posts feed:
                if(this.type != 'link' && this.type!='status'){
                    return true;
                }

                // Копируем аватар
                // проще генерировать шаблоны:
                this.from.picture = fb.user.picture;

                // конвертируем время из UNIX timestamp
                // в что-то вроде (5 минут назад):
                this.created_time = relativeTime(this.created_time*1000);

                // конвертируем URL
                this.message = urlHyperlinks(this.message);

                fb.posts.push(this);
            });

            $('#headingTpl').tmpl(fb.user).appendTo(wall);

            // создаём список для постов:
            var ul = $('
').appendTo(wall);

            // Присоединяем шаблоны:
            $('#feedTpl').tmpl(fb.posts).appendTo(ul);
        });

        return this;

    };

    // Вспомогательные методы:

    function urlHyperlinks(str){
        return str.replace(/\b((http|https):\/\/\S+)/g,'$1');
    }

    function relativeTime(time){

        var period = new Date(time);
        var delta = new Date() - period;

        if (delta <= 10000) {   // Less than 10 seconds ago             return 'Just now';         }         var units = null;         var conversions = {             millisecond: 1,     // ms -> ms
            second: 1000,       // ms -> sec
            minute: 60,         // sec -> min
            hour: 60,           // min -> hour
            day: 24,            // hour -> day
            month: 30,          // day -> month (roughly)
            year: 12            // month -> year
        };

        for (var key in conversions) {
            if (delta < conversions[key]) {
                break;
            }
            else {
                units = key;
                delta = delta / conversions[key];
            }
        }

        delta = Math.floor(delta);
        if (delta !== 1) { units += 's'; }
        return [delta, units, "ago"].join(' ');

    }

})(jQuery);

Метод $.getJSON используется для отправки запроса в Graph API. Все данные получаются одновременно, поэтому функцию обратного вызова применять нет необходимости.
Конструкция типа $.when() поможет получить одновременно информацию о пользователе и посты.
Рендеринг шаблонов:


$('#headingTpl').tmpl(fb.user).appendTo(wall);

// создаём список для постов:
var ul = $('<ul>').appendTo(wall);

// генерируем шаблоны:
$('#feedTpl').tmpl(fb.posts).appendTo(ul);

Метод tmpl() принимает массив. Применим плагин:


$(document).ready(function(){

    // вызываем плагин:
    $('#wall').facebookWall({id:'smashmag'});

});

Все!

Полезные ссылки: скачать бесплатно лицензию на nod32

Об авторе Олена Блажко

Оставить комментарий или два

Комментарии

Реклама

Создание стены Facebook с помощью jQuery шаблонов

Об авторе Олена Блажко

Популярные записи:

Оставить комментарий или два

Оставайся на связи

Подписка

Курсы

Популярное

Комментарии

Теги

Реклама