Сегодня мы посмотрим, как, имея в распоряжении новостной RSS-канал, PHP, SimplePie, JQuery и 20 минут времени сочинить симпатичный новостной блок с плавной прокруткой записей (смотреть демо).
Коротко о главном. Если вы не в курсе, что такое «SimplePie» – рассказываю.
SimplePie – это очень простая в использовании PHP-библиотека, предназначенная для работы с RSS-каналами. Поддерживаются следующие версии каналов: RSS (0.90, 0.91, 0.92, 1.0, 2.0), Atom (0.3, 1.0). С помощью с этого скрипта мы можем выводить текст новостей, заголовки и другие нужные штуки, как, например, дату публикации или изображение к новости. На самом деле у библиотеки гораздо больше возможностей, чем здесь перечислено. С полным перечнем функций можно ознакомиться на официальном сайте библиотеки.

Итак, приступим.
В работе нам понадобится:

  1. PHP не ниже версии 4.3
  2. PHP-библиотеки: XML Parser, PCRE, Mbstring, CURL, Zlib, iconv
  3. Библиотека SimplePie
  4. JQuery и плагин для плавной прокрутки текста – jquery.newsScroll.js
  5. Адрес RSS-канала – в примере будет использована одна из лент Хабра.

Шаг первый. На старт…

На своём тестовом сервере создаём папку, в которой у нас будет храниться наш новостной МегаМодуль. Назовем ее, например, «simple-news» и создадим внутри простую, но удобную структуру директорий для размещения требуемых файлов.
dirtreeSimple-news (корневая директория)
- lib (директория для библиотеки SimplePie)
- cache (кэш, который будет генерировать SimplePie)
- js (директория для JQuery и плагина прокрутки новостей)
- css (стили оформления)
- images
Теперь:

  1. в корневой директории (Simple-news) создаем пустой php-файл. Назовем его «index.php». В этом файле мы чуть позже будем реализовывать функционал нашего новостного модуля.
  2. в папку «lib» помещаем файл «simplepie.inc» (это и есть так нужная нам библиотека).
  3. в «js» закидываем последнюю версию jquery и jquery.newsScroll.js
  4. в директории «css» создаем файл «style.css».

Всё. Едем дальше.

Шаг второй. Простой вывод новостей.

Самое время позаниматься программированием). Открываем «index.php» в любимом редакторе и начинаем.
1) сначала создадим простейшую HTML-разметку страницы, не забыв подключить CSS и нужные нам js-скрипты.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
//Здесь мы позже что-нибудь накодим
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
<title>Новостной модуль</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.newsScroll.js"></script>  
</head>
<body>

<!--Начало модуля-->
<div class="news">
    <h1>Новостной модуль</h1>
       <span>PHP, SimplePie, jQuery... и всё, собсно</span>
    <!--В этой области будем организовывать вывод новостей -->
</div>
<!--Конец модуля-->
</body>
</html>

2) подключаем SimplePie
Для этого в начале index.php вставим следующий код:

1
2
3
require_once 'simplepie.inc'; //подключение библиотеки
$feed = new SimplePie('http://feeds2.feedburner.com/jquery/'); //создаём объект класса, скармливая при этом адрес нужного нам фида
$feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки

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

$feed->get_items()

Кстати, в $feed->get_items() можно указывать диапазон записей. Так, например:

$feed->get_items(0, 5)

получит для нас 5 записей RSS-фида.

Итак, давайте допишем еще одну строчку кода к трем вышеперечисленным:

1
$news =  $feed->get_items(0, 5); //получаем массив записей

Теперь в $news содержится массив с записями, и все, что нам нужно – пройтись в цикле по полученным значениям:

foreach ($news as $item){ … }

Мы хотим выводить получаемую информацию в следующем формате:

  • дата
  • заголовок новости (ссылкой на полный текст оригинала)
  • текст новости

Применительно к используемому нами SimplePie, интересующие нас атрибуты записей мы получаем с помощью следующих методов:

  • дата: $item->get_date()
  • заголовок : $item->get_title()
  • ссылка на оригинал: $item->get_permalink()
  • текст новости: $item->get_description()

Чтобы познакомиться поближе с упомянутыми методами, а также получить информацию по многим другим – рекомендую почитать справочник по API библиотеки SimplePie , который специально для вас расположен вот тут.

Давайте уже применим все полученные нами знания и изобразим рабочий вариант новостного модуля.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
   require_once 'lib/simplepie.inc'; //подключение библиотеки
   $feed = new SimplePie('http://www.gazeta.ru/export/rss/first.xml'); //создаём объект класса, скармливая при этом адрес нужного нам фида
   $feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки
    $news =  $feed->get_items(0,5); //получаем массив записей
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="windows-1251" />
<title>Новостной модуль</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.newsScroll.js"></script>
</head>

<body>

<!--Начало модуля-->
<div class="news">
    <h1>Новостной модуль</h1>
    <span>PHP, SimplePie, jQuery... и всё, собсно</span>

    <ul>
        <?php foreach($news as $item) {?>
            <li>
                        <h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3>
                        <span class="date"><?php echo $item->get_date(); ?></span>
            <p><?php echo $item->get_description(); ?></p>
             </li>
       <?php }?>
    </ul>

</div>
<!--Конец модуля-->

</body>
</html>

Выглядеть все будет примерно так:

step1

Шаг третий. Красивости и прочие приятности.

Настало время облагородить вывод информации.
Посмотрим, что нас не устраивает в текущем положении вещей:

  1. Различная длинна сообщений
  2. Надоедливая ссылка «Читать дальше»
  3. Изображения к текстам то отсутствуют, то присутствуют в эпических размерах (например, 800 пикселей в ширину) – не по фен-шую как-то.
  4. Общая бледность и некрасивость.

Будем исправлять.
Для начала, «заберем» из общего текста изображение (если оно там есть, конечно) и сделаем его ссылкой на статью. А если картинки нет – поставим вместо нее графическую «заглушку». Плюс ко всему, очистим текст от HTML-тэгов и обрежем его до пятидесяти слов. Для этого воспользуемся небольшим вспомогательным классом (есть в архиве с исходными кодами), в котором содержатся необходимые методы. Класс имеет чисто символическое название – «MyHelper» и содержит всего два метода – один из которых извлечет картинку из текста, а другой – впоследствии очистит и обрежет текст.

Итак, подключаем класс:

1
require_once 'lib/helper.class.php';

Теперь получим изображение и очищенный текст. Вставим следующий фрагмент внутрь ‘foreach’:

1
2
3
$helper = new MyHelper($item->get_description());
$img = $helper->getimg_from_tag(); //достаем картинку из текста
$text = $helper->clean_text(); //очищаем текст и обрезаем его до 50 слов

добавим $img к выводу новостей и заменим $item->get_description() на $text.

Ура, наши новости приобретают все более завершенный вид. Самое время применить CSS-магию к нашему творению. Думаю, на данном этапе действия не требуют объяснений – каждый может оформить результаты по своему вкусу. А сейчас просто посмотрим, что получилось:

step2

Шаг четвертый и заключительный. Эффекты.

Еще на первом этапе нашего эксперимента мы создали папку «js» и поселили в ней JQuery и его плагин. Самое время снова вернуться к ним.
Напомню, плагин ‘newsScroll’ нужен нам, чтобы организовать прокрутку новостей в нашем блоке.
Инициализация плагина происходит следующим образом:

1
2
3
4
5
6
<script type="text/javascript">
    $('.news ul').newsScroll({
        speed: 2000,
        delay: 5000
    });
</script>

Но, прежде чем подключать эффекты, нам необходимо произвести некоторые манипуляции с CSS, – в частности, сделать высоту нашего новостного блока фиксированной – примерно по высоте двух записей.
Итак, фиксируем высоту списка и, для порядка, высоту каждого элемента списка – тоже.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.news ul {
overflow: hidden;
background: #E5DAC0;
padding: 1em;
border: 1px solid #F1EAD4;
height: 260px;
position: relative;
float: left;
min-width: 450px;
}
.news ul li {
clear: left;
list-style: none;
overflow: hidden;
position: relative;
height: 130px;
}

Смотрим на результат. Впечатляемся ).
Как мы смогли убедиться, SimplePie – действительно простой и удобный инструмент для импорта RSS.

Скачать исходный код примера.

На этом все, до новых встреч.