Выводим избранные твиты с помощью 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
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.