adsPlace_1

Войти или Зарегистрироваться

Hosting Ukraine

Новостной модуль с помощью SimplePie

Сегодня мы посмотрим, как, имея в распоряжении новостной 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» и создадим внутри простую, но удобную структуру директорий для размещения требуемых файлов.

Simple-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-скрипты.

<?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 вставим следующий код:

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-фида.

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

$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 , который специально для вас расположен вот тут.

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

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

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

Настало время облагородить вывод информации.

Посмотрим, что нас не устраивает в текущем положении вещей:

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

Будем исправлять.

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

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

require_once 'lib/helper.class.php';

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

$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’ нужен нам, чтобы организовать прокрутку новостей в нашем блоке.

Инициализация плагина происходит следующим образом:

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

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

Итак, фиксируем высоту списка и, для порядка, высоту каждого элемента списка – тоже.

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

«DOM и jQuery. Манипуляция с DOM
Twitter-клиент Mixero»

Последние из рубрики

Комментарии(4)

    1. Аватар пользователя anikey99

      anikey99

      09:42 17.12.2013

      а где рабочий пример?

      ответить
    2. Аватар пользователя skyworld

      skyworld

      16:47 07.04.2014

      А как скачать?

      ответить
    3. Аватар пользователя Violetta

      Violetta

      10:44 14.07.2016

      Здесь нет никакого кода для примера. Не ищите. Просто блаблабла

      ответить
    4. Аватар пользователя aikidofriends

      aikidofriends

      17:37 18.03.2017

      Для «избранных» ))
      Демо — http://simplepie.org/demo/ вставте фид и увидите результат
      Дальше ручками или учите мат часть по PHP, HTML и тд

      ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению