Выводим избранные твиты с помощью PHP и jQuery
Если у вас есть профиль в Twitter, то наверняка вы ищете способ выводить ваши твиты на вашем сайте или блоге. Данная задача имеет отличное решение в виде плагина jQuery.
Но что если надо выводить только определённые твиты? В Twitter есть инструмент для решения такой задачи - отмечать твиты избранными. В данном уроке мы сделаем класс PHP который будет извлекать, помещать в кэш и выводить избранные твиты. для интерфейса будет использоваться CSS3.
Разметка HTML
Ниже приводится разметка страницы, которая исопльзуется за основу нашего интерфейса. Элемент div#container будет содержать твиты, которые будут генерироваться кодом PHP.
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Выводим избранные твиты с помощью PHP и jQuery | Материалы сайта RUSELLER.COM</title>
<!-- Стили CSS -->
<link rel="stylesheet" href="/assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<!-- Твиты будут размещаться здесь -->
</div>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="/assets/js/jquery.splitlines.js"></script>
<script src="/assets/js/script.js"></script>
</body>
</html>
В проекте используется плагин splitLines, который разделяет твит построчно на отдельные элементы div. Так мы можем обрабатывать строки твита индивидуально.
Для генерирования твитов создается класс PHP. Нужно только вызвать метод-генератор внутри контейнера #container: $tweets->generate(5), который выведет 5 последних избранных твитов. Данный метод выводит твиты в виде неупорядоченного списка:
разметка твитов
<ul class="tweetFavList"> <li> <p>Текст твита</p> <div class="info"> <a title="Переход на ссылку" class="user" href="http://адрес.сайта">Ссылка</a> <span title="Количество ретвитов" class="retweet">19</span> <a title="Размещено 3 д. назад" target="_blank" class="date" href="http://twitter.com/Tutorialzine/status/98439169621241856">3 д. назад</a> </div> <div class="divider"></div> </li> <!-- Другие твиты ... --> </ul>
Текст твита содержится в параграфе, а дополнительная информация доступна в элементе div .info. Теперь перейдем к классу PHP.
PHP
Класс называется FavoriteTweetsList. Он получает в качестве параметра имя пользователя Twitter и имеет несколько полезных методов для получения твитов и генерирования разметки HTML.
Класс получает избранные твиты через фид JSON, расположенный по адресу http://api.twitter.com/1/favorites/ИМЯ_ПОЛЬЗОВАТЕЛЯ.json. Дополнительно производится кэширование, так что запрос производится только один раз каждые три часа.
FavoriteTweetsList.class.php
<?php
class FavoriteTweetsList{
private $username;
const cache = "cache_tweets.ser";
public function __construct($username){
$this->username = $username;
}
/* Метод get возвращает массив твитов */
public function get(){
$cache = self::cache;
$tweets = array();
if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){
// Используем кэш, если он есть, и не старше трех часов
$tweets = unserialize(file_get_contents($cache));
}
else{
// иначе перестраиваем его
$tweets = json_decode($this->fetch_feed());
file_put_contents($cache,serialize($tweets));
}
if(!$tweets){
$tweets = array();
}
return $tweets;
}
/* Метод generate получает массив твитов и строит разметку */
public function generate($limit=10, $className = 'tweetFavList'){
echo "<ul class='$className'>";
// Ограничения количества показываемых твитов
$tweets = array_slice($this->get(),0,$limit);
foreach($tweets as $t){
$id = $t->id_str;
$text = self::formatTweet($t->text);
$time = self::relativeTime($t->created_at);
$username = $t->user->screen_name;
$retweets = $t->retweet_count;
?>
<li>
<p><?php echo $text ?></p>
<div class="info">
<a href="http://twitter.com/<?php echo $username ?>" class="user"
title="Переход на страницу <?php echo $username?>"><?php echo $username ?></a>
<?php if($retweets > 0):?>
<span class="retweet" title="Количество ретвиттов"><?php echo $retweets ?></span>
<?php endif;?>
<a href="http://twitter.com/<?php echo $username,'/status/',$id?>"
class="date" target="_blank" title="Размещено <?php echo $time?>"><?php echo $time?></a>
</div>
<div class="divider"></div>
</li>
<?php
}
echo "</ul>";
}
/* Вспомогательные методы и статические функции */
private function fetch_feed(){
return file_get_contents("http://api.twitter.com/1/favorites/{$this->username}.json");
}
private static function relativeTime($time){
$divisions = array(1,60,60,24,7,4.34,12);
$names = array('с.','мин.','ч.','д.','н.','мес.','г.');
$time = time() - strtotime($time);
$name = "";
if($time < 10){
return "только что";
}
for($i=0; $i<count($divisions); $i++){
if($time < $divisions[$i]) break;
$time = $time/$divisions[$i];
$name = $names[$i];
}
$time = round($time);
if($time != 1){
$name.= 'с';
}
return "$time $name назад";
}
private static function formatTweet($str){
$str = preg_replace(
'/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/i',
'<a class="link" href="/$1" target="_blank">$1</a>',
$str
);
$str = preg_replace(
'/(\s|^)@([\w\-]+)/',
'$1<a class="mention" href="http://twitter.com/#!/$2" target="_blank">@$2</a>',
$str
);
$str = preg_replace(
'/(\s|^)#([\w\-]+)/',
'$1<a class="hash" href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>',
$str
);
return $str;
}
}
?>
Из всех методов наиболее часто употребляемым будет generate(). Он получает в качестве параметра количество твитов для вывода. В качестве опционального параметра ему можно передать имя класса для неупорядоченного списка.
Теперь у нас есть класс FavoriteTweetsList, нужно просто создать экземпляр класса, передав ему имя пользователя Twitter:
index.php
require "includes/FavoriteTweetsList.class.php";
$tweets = new FavoriteTweetsList('Tutorialzine');
А вызов $tweets->generate() приведет к выводу нескольких последних избранных твитов.
jQuery
В проекте используется плагин jQuery splitLines, который выполняет рутинную работу для нас. Мы просто проходим циклом по всем элементам параграфам, содержащим текст твитов и вызываем для них плагин:
script.js
$(function(){
var width = $('ul.tweetFavList p').outerWidth();
// Цикл по элементам p
// и вызов плагина splitLines
$('ul.tweetFavList p').each(function(){
$(this).addClass('sliced').splitLines({width:width});
});
});
Содержание разделяется на отдельные элементы div построчно. И мы можем задавать для них собственные стили.
CSS
Зададим стили для неупорядоченного списка и параграфов:
ul.tweetFavList{
margin:0 auto;
width:600px;
list-style:none;
}
ul.tweetFavList p{
background-color: #363636;
color: #FFFFFF;
display: inline;
font-size: 28px;
line-height: 2.25;
padding: 10px;
}
/* Раскрашиваем ссылки в другой цвет */
ul.tweetFavList a.link { color:#aed080;}
ul.tweetFavList a.mention { color:#6fc6d9;}
ul.tweetFavList a.hash { color:#dd90e9;}
Если посмотреть на статический метод formatTweet() нашего PHP класса, то вы увидите, что мы добавили класс для каждого типа ссылки, чтобы выделять их с помощью формата.
Когда страница загружается, jQuery добавляет класс sliced к каждому параграфу.
/* Класс sliced назначается в коде jQuery */
ul.tweetFavList p.sliced{
background:none;
display:block;
padding:0;
line-height:2;
}
/* Каждый элемент div является строкой, генерируемой плагином splitLines */
ul.tweetFavList li p div{
background-color: #363636;
box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
display: inline-block;
margin-bottom: 6px;
padding: 0 10px;
white-space: nowrap;
}
Затем мы добавляем стили для информационного прямоугольника, который содержит имя авторая, дату размещения и количество ретвитов.
ul.tweetFavList .info{
overflow: hidden;
padding: 15px 0 5px;
}
/* Цветные прямоугольники информации */
ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
float:left;
padding:4px 8px;
color:#fff !important;
text-decoration:none;
font-size:11px;
box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}
ul.tweetFavList .user{
background-color:#6fc6d9;
}
ul.tweetFavList .retweet{
background-color:#dd90e9;
cursor:default;
}
ul.tweetFavList .date{
background-color:#aed080;
}
И в завершении задаем стили для разделителя. Это один элемент div, но благодаря пседо элементам :before/:after, мы добавляем дополнительные окружности справа и слева.
/* Стили точечного разделителя */
ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
background-color: #777777;
border-radius: 50% 50% 50% 50%;
height: 12px;
margin: 60px auto 80px;
width: 12px;
position:relative;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
margin:0;
position:absolute;
content:'';
top:0;
left:-40px;
}
ul.tweetFavList .divider:after{
left:auto;
right:-40px;
}
ul.tweetFavList li:last-child .divider{
display:none;
}
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/h7w5TPi_iMc/lessons.php
|
Если у вас есть профиль в Twitter, то наверняка вы ищете способ выводить ваши твиты на вашем сайте или блоге. Данная задача имеет отличное решение в виде плагина jQuery.Но что если надо выводить |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Человек - аристократ среди животных Гейне Генрих - (1797-1856) - немецкий поэт и публицист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.