Создание и продвижение сайтов, материалы веб-мастеру!
Способы заработка, свой бизнес в интернете!

Подписка на обновления сайта с помощью RSS

Подписка с помощью RSS
(читателей: 955)

Мой LiveJournal Мой Я.ру Мой FaceBook Мой Twitter

Читать в соц. сетях:

Способы заработка в интернетеОбновляемый сборник Способы заработка в интернете

Свой бизнес на файлообменникахУчебное пособие
Свой бизнес на файлах (пошагово)

Вход | Регистрация | Напомнить пароль

Коллекция плагинов для WordPressКоллекция плагинов для WordPress

Язык запросов поиска ЯндексаЯзык запросов поиска Яндекса

Что делать если украли деньги с WebMoneyЧто делать если украли деньги с WebMoney

Куда вложить деньги - инвестирование в ПАММ-счетаПассивный доход за счёт инвестирования Куда сегодня можно вложить деньги

Главная » Инструкции и методы » Программирование

Инструкции и методы решения различных задач

Раздел "Инструкции и методы"

Основа данного раздела - это пошаговые описания решений определённых задач в сайтостроении (вёрстка, web-дизайн, программирование и прочее), примеры решения различных трудностей с помощью полезного софта, а также некоторые другие интересные материалы

Все инструкции и методы одним списком

Как создать стену Facebook

Как создать стену Facebook

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

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

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

Graph API

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

А нам достаточно двух 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.."
}

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

Стена 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'});

});

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

Разработка сайтов - сайты-визитки, интернет-магазины, небольшие и крупные порталы, промо-сайты высокого качества по приемлемым ценам и в короткий срок.

Если Вам понравился данный материал, Вы можете подписаться на получение новых публикаций сайта с помощью RSS-ленты или E-mail-рассылки:

Подписка на обновления сайта с помощью RSS

Введите свой e-mail:

RSS-подписчиков: 955 | E-mail-подписчиков: 691

Спасибо Вам за добавление данной страницы в социальные сервисы:

Ещё инструкции и методы...
Использование средств CSS и jQuery для центрирования блока
Как сайт на Joomla сделать статическим
Какой хостинг выбрать для сайта
Не игнорируйте :focus
Знакомство с Firebug
Создание формы
CMS LiveStreet
Установка MODx
Как поставить favicon.ico на сайт
Блок (информер) апдейтов поисковых систем для своего сайта

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

Вы можете поделиться своим мнением по теме или задать возникшие вопросы ниже в комментариях. Спасибо!

Чтобы получить подробный ответ на ряд возникших вопросов или если требуется детальная помощь в решении какой-либо задачи, можно воспользоваться данной формой. Ответы на вопросы, заданные через указанную форму, публикуются в разделе "Вопросы пользователей".

Отправить комментарий
Содержание этого поля является приватным и не предназначено к показу.
КАПЧА
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
7 + 1 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.

Copyright © 2007-2012 Николай Мурашкин | Хостинг сайта

Копирование, а также любое другое подобное использование материалов без ссылки на сайт NikMurashkin.RU строго запрещено!

тИЦ и Page Rank сайта