Выводим избранные твиты с помощью 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Выводим избранные твиты с помощью PHP и jQuery | | 2012-06-19 12:00:35 | | Статьи Web-мастеру | | Если у вас есть профиль в Twitter, то наверняка вы ищете способ выводить ваши твиты на вашем сайте или блоге. Данная задача имеет отличное решение в виде плагина jQuery.Но что если надо выводить | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: