Как создать стену, подобную «FaceBook»

Как создать стену, подобную «FaceBook»

Кирпичная стена

Здравствуйте, уважаемые читатели!

Сегодня мы с вами попробуем создать стену, как на сайте «FaceBook» с использованием шаблонов jQuery. Еще нам понадобятся: Facebook Graph API, template plugin, jQuery.tmpl, которые позволят отображать посты и создать HTML–код.

Скачать исходные файлы

Для начала хочу вас познакомить с Facebook API и объяснить для чего он нужен.

Graph API

Graph - это метод Facebook, который используется для интерфейсов. Любая страница этого сайта имеет свое должное представление, например, фотография, редактирование данных, страница пользователя и т.д. К тому же API поддерживает JSONP, что дает возможность подключения jQuery.

А нам достаточно двух API ключей для получения последних постов и информации о пользователях (ник, аватар и т. д.). Здесь вы можете посмотреть пример: 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, а также о количестве комментариев, о заголовках, об описаниях и мн. др..

Еще нам понадобится дополнительный запрос для извлечения фотографий пользователя:
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.."
}

То что нам было нужно, уже готово.

Стена Facebook

Шаблоны

Шаблоны нужно поместить между тегами «script» или обойтись средствами AJAX, но первый вариант наиболее легкий, поэтому используем его.

Для каждого шаблона будет своя форма:

<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.tmpl, библиотеку jQuery, а затем файл script.js, который мы создадим на следующем этапе.

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

Делаем рендеринг шаблонов:

$('#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'});

});

Стена готова!

Дискуссия по теме