Отображение ваших любимых твитов с помощью PHP и jQuery

Если у вас есть Twitter аккаунт и есть желание отображать ваши последние твиты в блоге, то эту проблему вполне можно решить своими силами.

Нужны лишь: плагины jQuery, PHP классы и немного смекалки

В этом руководстве мы напишем PHP класс, который будет забирать, кэшировать и отображать ваши любимые твиты при помощи интерфейса на CSS3.

ПримерСкачать

HTML

Если вы посмотрите ниже, то увидите разметку страницы, которую мы будем использовать в качестве основы. В элементе #container будут находиться твиты (которые будут генерироваться с помощью PHP кода).

index.php

<!DOCTYPE html>

<html>

<head>

<title>Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</body>

</html>

Мы будем использовать плагин splitLines, который будет разделять твиты на DIV элементы. Это нужно для того, чтобы применить CSS стили на каждый твит индивидуально. Однако, в примере изменения будут минимальны.

Для генерации твитов мы создадим специальный PHP класс, который будет это делать автоматически. Нам только нужно будет его вызывать в элементе #container, например, таким образом: $tweets->generate(5) покажет 5 последних наиболее любимых твитов.

Этот метод будет выводить неупорядоченный список твитов:

Твит разметка

<li>

<p>The text of the tweet goes here</p>

<a title="Go to Tutorialzine's twitter page" class="user"

href="http://twitter.com/Tutorialzine">Tutorialzine</a>

<a title="Shared 3 days ago" target="_blank" class="date"

href="http://twitter.com/Tutorialzine/status/98439169621241856">3 days ago</a>

</div>

</li>

</ul>

Текст твита будет находится в параграфе, с дополнительной информацией в элементе DIV с классом .info.

Теперь напишем PHP класс.

PHP

Мы назовем наш класс FavoriteTweetsList. Он будет принимать ник твитер-пользователя и, конечно, количество твитов, как параметры, и на выходе генерировать HTML разметку.

Класс будет забирать любимые твиты из JSON потока, расположенного по адресу USERNAME.json.

Дополнительно будет встроено кэширование. Таким образом запрос будет производиться каждые три часа, что ускорит процесс.

FavoriteTweetsList.class.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

class FavoriteTweetsList{

private $username;

const cache = "cache_tweets.ser";

public function __construct($username){

$this->username = $username;

}

/* The get method returns an array of tweet objects */

public function get(){

$cache = self::cache;

$tweets = array();

if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

// Use the cache if it exists and is less than three hours old

$tweets = unserialize(file_get_contents($cache));

}

else{

// Otherwise rebuild it

$tweets = json_decode($this->fetch_feed());

file_put_contents($cache,serialize($tweets));

}

if(!$tweets){

$tweets = array();

}

return $tweets;

}

/* The generate method takes an array of tweets and build the markup */

public function generate($limit=10, $className = 'tweetFavList'){

echo "<ul class='$className'>";

// Limiting the number of shown tweets

$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>

<a href="http://twitter.com/<?php echo $username ?>" class="user"

title="Go to <?php echo $username?>'s twitter page">

<?php echo $username ?></a>

<?php if($retweets > 0):?>

<?php echo $retweets ?></span>

<?php endif;?>

<a href="http://twitter.com/<?php echo $username,'/status/',$id?>"

class="date" target="_blank" title="Shared <?php echo $time?>">

<?php echo $time?></a>

</div>

</li>

<?php

}

echo "</ul>";

}

/* Helper methods and static functions */

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('second','minute','hour','day','week','month','year');

$time = time() - strtotime($time);

$name = "";

if($time < 10){

return "just now";

}

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.= 's';

}

return "$time $name ago";

}

private static function formatTweet($str){

// Linkifying URLs, mentionds and topics. Notice that

// each resultant anchor type has a unique class name.

$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">#$2</a>',

$str

);

return $str;

}

Метод generate() является одним из основных рабочих методов. Он забирает количество твитов, необходимых для отображения, и опционально может менять имя класса неупорядоченного списка.

Теперь, когда класс FavoriteTweetsList на месте, мы создадим экземпляр объекта, передавая ему имя твиттер-пользователя, например так:

index.php

1 2	require "includes/FavoriteTweetsList.class.php"; $tweets = new FavoriteTweetsList('Tutorialzine');

При вызыве $tweets->generate() , на экран будут выводиться последние любимые твиты.

jQuery

Поскольку мы используем jQuery плагин splitLines, следовательно работа почти вся выполнена. Нужно, просто, пробежаться по всем параграфам, разделяя их.

script.js

$(function(){

var width = $('ul.tweetFavList p').outerWidth();

// Looping through the p elements

// and calling the splitLines plugin

$('ul.tweetFavList p').each(function(){

$(this).addClass('sliced').splitLines({width:width});

});

Этот метод будет разделять элементы параграфов на линии, у каждой из которых будет свой собственный DIV элемент, который, в последствии, можно стилизовать с помощью CSS.

CSS

Во-первых, давайте оформим неупорядоченный список и элементы параграфа.

styles.css – 1

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;

}

/* Coloring the links differently */

ul.tweetFavList a.link { color:#aed080;}

ul.tweetFavList a.mention { color:#6fc6d9;}

ul.tweetFavList a.hash { color:#dd90e9;}

Если вы внимательно посмотрите на статичный метод formatTweet() в PHP, то вы можете увидеть, что он добавляет имена классов для различных типов гиперссылок. Типы следующие: регулярная ссылка, упоминание и хэш.

styles.css – 2

/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{

background:none;

display:block;

padding:0;

line-height:2;

}

/* Each div is a line generated by the splitLines plugin */

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;

}

Далее, оформляем цветные информационные боксы, которые содержат имя автора, дату публикации и количество ретвитов.

styles.css – 3

ul.tweetFavList .info{

overflow: hidden;

padding: 15px 0 5px;

}

/* The colorful info boxes */

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;

}

И в конце оформляем элемент .divider. Это единичный элемент DIV, но из-за того, что у него есть два псевдо-собрата :before/:after, то мы можем дополнительно навесить стили и на них.

styles.css – 4

/* Styling the dotted divider */

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;

}

На этом всe!

Итог

Этот пример можно использовать в разделе отзывов или в любой колонке, вобщем, там где вам нужно, чтобы посетители увидели ваш любимые твиты.

А у вас получилось добавить этот скрипт к себе на сайт?

Отображение ваших любимых твитов с помощью PHP и jQuery

HTML

index.php

Твит разметка

PHP

FavoriteTweetsList.class.php

index.php

jQuery

script.js

CSS

styles.css – 1

styles.css – 2

styles.css – 3

styles.css – 4

Итог

Возможно, Вам будет интересно ↓↓↓

Оставить комментарий Отменить ответ