Выводим избранные твиты с помощью 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.