Сегодня мы посмотрим, как, имея в распоряжении новостной 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). С помощью с этого скрипта мы можем выводить текст новостей, заголовки и другие нужные штуки, как, например, дату публикации или изображение к новости. На самом деле у библиотеки гораздо больше возможностей, чем здесь перечислено. С полным перечнем функций можно ознакомиться на официальном сайте библиотеки.
Итак, приступим.
В работе нам понадобится:
- PHP не ниже версии 4.3
- PHP-библиотеки: XML Parser, PCRE, Mbstring, CURL, Zlib, iconv
- Библиотека SimplePie
- JQuery и плагин для плавной прокрутки текста - jquery.newsScroll.js
- Адрес RSS-канала - в примере будет использована одна из лент Хабра.
Шаг первый. На старт…
На своём тестовом сервере создаём папку, в которой у нас будет храниться наш новостной МегаМодуль. Назовем ее, например, «simple-news» и создадим внутри простую, но удобную структуру директорий для размещения требуемых файлов.
Simple-news (корневая директория)
- lib (директория для библиотеки SimplePie)
- cache (кэш, который будет генерировать SimplePie)
- js (директория для JQuery и плагина прокрутки новостей)
- css (стили оформления)
- images
Теперь:
- в корневой директории (Simple-news) создаем пустой php-файл. Назовем его «index.php». В этом файле мы чуть позже будем реализовывать функционал нашего новостного модуля.
- в папку «lib» помещаем файл «simplepie.inc» (это и есть так нужная нам библиотека).
- в «js» закидываем последнюю версию jquery и jquery.newsScroll.js
- в директории «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> |
Выглядеть все будет примерно так:
Шаг третий. Красивости и прочие приятности.
Настало время облагородить вывод информации.
Посмотрим, что нас не устраивает в текущем положении вещей:
- Различная длинна сообщений
- Надоедливая ссылка «Читать дальше»
- Изображения к текстам то отсутствуют, то присутствуют в эпических размерах (например, 800 пикселей в ширину) - не по фен-шую как-то.
- Общая бледность и некрасивость.
Будем исправлять.
Для начала, “заберем” из общего текста изображение (если оно там есть, конечно) и сделаем его ссылкой на статью. А если картинки нет – поставим вместо нее графическую «заглушку». Плюс ко всему, очистим текст от 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-магию к нашему творению. Думаю, на данном этапе действия не требуют объяснений – каждый может оформить результаты по своему вкусу. А сейчас просто посмотрим, что получилось:
Шаг четвертый и заключительный. Эффекты.
Еще на первом этапе нашего эксперимента мы создали папку “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.
На этом все, до новых встреч.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Сообщения
Статья помогла, использовал на своем сайте http://econom-print.ru Спасибо автору
А как быть, когда при импорте фида не импортируются картинки? Можно все-таки вытянуть картинки из фида, не импользуя заглушку? Например, лента http://k.img.com.ua/rss/ru/russia.xml, в которой картинки отображаются явно. А вот в ленте http://www.rbc.ua/include/dynamic/rus/top/politics_full.xml картинки не отражаются, т.к. урл картинки не входит в блок .
Как это можно решить при помощи SimplePie?