Расширение SimplePie для анализа уникальных RSS-каналов

Несколько дней назад, когда я готовил наш урок по созданию галереи Slick Flickr с SimplePie , мне пришло в голову, что мы не опубликовали много статей, посвященных SimplePie . Принимая во внимание, насколько фантастична библиотека, думаю, пришло время присмотреться.

Мы рассмотрим более продвинутую функцию, которая позволяет расширять встроенный класс элементов для анализа сложных RSS-каналов.

Наша миссия

Если вы хотите импортировать каналы нескольких блогов для отображения на вашем веб-сайте, у вас не должно возникнуть никаких проблем. На самом деле, на сайте SimplePie.org есть отличная заставка, которая научит вас, как делать то же самое. Если вы незнакомы, я настоятельно рекомендую вам посмотреть его. Однако время от времени вы будете сталкиваться с некоторыми уникальными именами тегов. Например, работая над перезагрузкой моего личного сайта, я решил, что хочу показывать мои nettuts + видео из RSS-канала Blip.tv. Просмотрев сам канал, я наткнулся на теги, например: <blip: smallThumbnail>.

Теперь SimplePie проделывает огромную работу по упрощению наиболее распространенных процедур. Но очевидно, что от них нельзя ожидать удобных сокращенных методов для каждого пространства имен, теперь они могут !? Конечно, нет. Я решил, что это сделало бы для превосходного скринкаста. Итак, я создал простой пример, который включит все скриншоты nettuts + и разрешит всплывающее видео, когда пользователь выберет один.

Это достаточно простая раскладка; но должно быть просто идеально подходит для демонстрационных целей. Без дальнейших церемоний, давайте начнем.

Шаг 1: Index.php

Первым шагом является загрузка SimplePie и размещение файла «simplepie.inc» в папке «include». Затем создайте index.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/default.css» /> <title>Untitled Document</title> </head> <body> <div id=»container»> </div><!—end container—> <!— begin scripts —> <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js»></script> <script type=»text/javascript»> </script> </body> </html>

Единственное, на что стоит обратить внимание, это то, что мы создали упаковочный div-контейнер и используем CDN от Google для импорта jQuery. Не беспокойтесь, если вы не знакомы с этой библиотекой; это просто способ добавить немного глазури в конце. Это вряд ли важно.

Шаг 2: Новый SimplePie ();

Я предполагаю, что у вас есть базовое понимание SimplePie. Если нет, сначала посмотрите их вступительное видео , а затем вернитесь. К счастью, здесь нет ничего сложного.

Прямо перед вашим доктайпом добавьте немного PHP.

<?php
 
require ‘includes/simplepie.inc’;
$feed = new SimplePie();
$feed->set_feed_url(‘feed://nettuts.blip.tv/rss’);
$feed->set_item_class();
$feed->enable_cache(true);
$feed->set_cache_duration(3600);
$feed->set_cache_location(‘cache’);
$feed->init();
$feed->handle_content_type();
 
?>

Первым шагом при работе с SimplePie является создание нового экземпляра класса SimplePie. Далее нам, естественно, нужно указать URL нашего фида (set_feed_url).

Как я упоминал ранее, мы будем работать с Blip.tv сегодня. Если у вас есть собственный аккаунт, нажмите на одно из ваших видео, чтобы перейти на страницу шоу. Далее прокрутите вниз до дна. Вы увидите ссылку RSS внутри нижнего колонтитула. Скопируйте этот URL и вставьте его в качестве параметра.

Далее нам нужно установить item_class. Мы изменим этот раздел чуть позже. Следующие три метода настраивают кэширование, продолжительность (в секундах) и расположение нашей папки «cache». Нам лучше создать это прямо сейчас. Убедитесь, что структура вашей папки выглядит примерно так.

$ Запитка> Init ();

Наконец, нам нужно все инициализировать. Если вы этого не понимаете, не слишком переживайте по этому поводу. Просто смирись с тем, что это то, что «заводит подачу»

«Init () — это то, что заставляет все происходить. Период. Здесь все параметры конфигурации обрабатываются, фиды извлекаются, кэшируются и анализируются, а также все остальные полезные вещи. Это вызывается автоматически, если вы передаете URL-адрес конструктор SimplePie. « — SimplePie Документация

Шаг 3: Получение заголовка и описания

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

<h1><?php echo $feed->get_title();
<p><?php echo $feed->get_description();

Заметьте эти простые для понимания методы ?! SimplePie делает эти процедуры несложными. Мы создали объект $ feed в верхней части нашей страницы. Помните, это по сути копия класса элемента. Чтобы получить доступ к методам, нам нужно использовать подход ООП. Для полного списка, обязательно посетите ссылку API SimplePie.

Для заголовка мы используем «$ feed-> get_title ()», а для описания мы будем удобно использовать «$ feed-> get_description».

Шаг 4: Цикл

Следующий шаг — перебрать все элементы в RSS-ленте.

<?php foreach($feed->get_items() as $item) : ?>
     
    <div class=»entry»>
        <a href=»» title=»»>
            <img src=»» alt=»<?php $item->get_title(); ?>» />
        </a>
    </div>
<?php endforeach;

Здесь много PHP, но все относительно просто. Мы используем сокращенную форму цикла PHP. SimplePie предоставляет метод get_items (), который будет извлекать каждый элемент из RSS-канала. Затем мы перебираем каждый элемент и назначаем временную переменную с именем $ item. Теперь мы можем использовать эту новую переменную для получения конкретной информации на уровне элемента.

проблема

К сожалению, мы столкнулись с проблемой. Если вы вернетесь к демонстрации, вы увидите, что мы хотим добавить миниатюру для каждого элемента. Если мы перейдем по URL-адресу канала RSS и затем выберем «Просмотр источника», мы увидим следующее: <blip: thumbnail_src> NETTUTS-WordPressForDesigners8774-306.jpg </ blip: thumbnail_src>

Так что же нам делать, когда SimplePie не распознает уникальное пространство имен, такое как «blip»? Решением является создание нового класса, который расширяет класс элементов SimplePie.

Новый класс

Вернитесь в папку «включенные» и добавьте новый файл с именем: simplepie_blip.inc

Не беспокойтесь, если вы не знакомы с этим расширением файла. Мы просто будем использовать PHP. Нам нужен способ сослаться на это «пустое» пространство имен. Вернитесь в канал RSS и еще раз просмотрите источник. Прокрутите вверх и найдите что-то вроде этого:

Скопируйте это значение в буфер обмена. Затем вставьте следующий код в новый файл .inc.

<?php
 
define(«SIMPLE_NAMESPACE_BLIP», «http://blip.tv/dtd/blip/1.0»);
 
class SimplePie_Item_Blip extends SimplePie_Item
{
…
}

Это просто класс

Все, что мы здесь строим, — это очень простой класс, который расширяет класс элементов SimplePie. В верхней части нашего кода мы определяем константу и делаем ее равной URL, который вы только что скопировали. Затем мы создаем новый класс — имя может быть любым. Важно убедиться, что вы пишете «extends SimplePie_Item». Это даст нам доступ к необходимым свойствам и методам из родительского класса.

Что мы хотим?

Давайте сначала выясним, какие значения нам нужно получить. Посмотрите еще раз на исходный код RSS-канала.

Для этого простого (r) урока мы возьмем только три тега.

<blip: thumbnail_src> : содержит название нашего миниатюры.
<blip: embedLookup> : содержит URL, который позволит нам встроить видео на нашу страницу.
<blip: puredescription> : содержит описание видео.

Давайте начнем с создания нашего метода thumbnail_src. Создайте новый метод в фигурных скобках.

function get_thumbnail_src()
{
    $data = $this->get_item_tags(SIMPLE_NAMESPACE_BLIP, ‘thumbnail_src’);
    return $data[0][‘data’];
}

Вы можете называть метод как хотите; просто убедитесь, что это легко понять. Мы начнем с создания новой переменной с именем $ data. SimplePie предлагает метод с именем «get_item_tags». Помните, мы можем использовать это, потому что мы расширяем класс элемента. В скобках мы вставляем нашу константу «SIMPLE_NAMESPACE_BLIP», а затем добавляем имя искомого тега. В этом случае нам нужен тег «<blip: thumbnail_src>».

Что вернуть?

Немного сложно описать массив, который мы будем возвращать. Я рекомендую вам просмотреть скринкаст, чтобы лучше понять. Для простоты, просто примите, что для доступа к точному значению мы должны найти [0] [‘data’] в нашем массиве $ data.

Это на самом деле все, что требуется. Теперь мы можем начать использовать «get_thumbnail_src ()» так же, как и «get_title ()». Давайте вернемся к index.php и добавим этот новый метод.

Найдите тег изображения в .entry div.

<div class=»entry»>
    <a href=»» title=»»>
        <img src=»» alt=»<?php $item->get_title(); ?>» />
    </a>
</div>

get_thumbnail_src ()

Когда мы вызываем наш метод «get_thumbnail_src ()», он возвращает имя файла, то есть «NETTUTS-WordPressForDesigners8774-306.jpg». Это просто название изображения; нам все еще нужен полный путь. К счастью, это легко. Все изображения Blip будут храниться здесь: «http://a.images.blip.tv/ enjfilename}».

В атрибуте источника нашего изображения добавьте:

<img src=»http://a.images.blip.tv/<?php echo $item->get_thumbnail_src(); ?>» alt=»<?php $item->get_title(); ?>» />

Видите, как легко было использовать наш собственный метод? Теперь вернемся к нашему расширенному файлу класса и создадим два других метода. Я не буду проходить через это, потому что они идут по тому же пути.

// end get_thumbnail_src function.
 
function get_pure_description()
{
    $data = $this->get_item_tags(SIMPLE_NAMESPACE_BLIP, ‘puredescription’);
    return $data[0][‘data’];
}
 
function get_embed_id()
{
    $data = $this->get_item_tags(SIMPLE_NAMESPACE_BLIP, ’embedLookup’);
    return $data[0][‘data’];
}

Важно помнить, что теги «puredescription» и «embedLookup» чувствительны к регистру. Проще всего скопировать текст прямо из источника RSS-канала.

Посмотрите, сможете ли вы самостоятельно разместить эти методы на своих местах. В качестве обновления возвращаемые значения наших методов должны выглядеть следующим образом:

get_thumbnail_src () : NETTUTS-WordPressForDesigners8774-306.jpg
get_pure_description () : «Это видео, которое научит бла-бла …»
get_embed_id : grg378cLj7EM

После вставки этих методов вы должны получить что-то похожее на следующее:

<div class=»entry»>
    <a href=»http://blip.tv/play/<?php echo $item->get_embed_id();?>» title=»<?php echo $item->get_pure_description();?>»>
        <img src=»http://a.images.blip.tv/<?php echo $item->get_thumbnail_src(); ?>» alt=»<?php $item->get_title(); ?>» />
    </a>
</div>

Надеюсь, все это имеет смысл. Если нет, просмотрите скринкаст. На этом этапе ваша страница должна выглядеть примерно так:

Шаг 5: CSS

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

Шаг 6: JQuery

Просто чтобы повеселиться, я решил, что когда пользователь нажимает на одно из изображений, должен появиться всплывающий видеоплеер. Давайте использовать jQuery для обеспечения этой функциональности.

$(‘.entry a’).click(function() {
    var url = this.href;
    var embedString = ‘<embed src=»‘ + url + ‘» type=»application/x-shockwave-flash» width=»640″ height=»480″ allowscriptaccess=»always» allowfullscreen=»true»></embed>’;
     
    $(‘<div id=»video»>’)
      .append(embedString)
      .append(‘<p>X</p>’)
      .css({
        left: $(window).width() / 2 — 320,
        top: ’50px’ })
      .appendTo(‘body’)
      .children(‘p’).click(function() { $(this).parent().remove(); });
       
      return false;
});

Анализ

$(‘.entry a’).click(function() {

Когда щелкнет тег привязки в нашем .entry div, запустите функцию.

var url = this.href;
var embedString = ‘<embed src=»‘ + url + ‘» type=»application/x-shockwave-flash» width=»640″ height=»480″ allowscriptaccess=»always» allowfullscreen=»true»></embed>’;

Создайте переменную с именем «url» и сделайте ее равной href тега привязки, по которому щелкнули. Помните, что эта ссылка содержит ссылку для вставки. Затем создайте тег для встраивания. По правде говоря, мы могли бы сделать что-то более эффективное здесь. Это код, который предоставляет blip.tv, так что пока его будет достаточно. Возможно, вы захотите в будущем взглянуть на что-то более дружественное к «валидатору».

$(‘<div id=»video»>’)
  .append(embedString)
  .append(‘<p>X</p>’)
  .css({
    left: $(window).width() / 2 — 320,
    top: ’50px’ })
  .appendTo(‘body’)
  .children(‘p’).click(function() { $(this).parent().remove(); });

Создайте новый элемент div.
Вставьте тег embed, который мы только что создали (представленный переменной «embedString».).
Добавьте тег абзаца, содержащий букву X. Это позволит пользователю выйти из видео.
Установите расположение нашего видео. Этот код просто гарантирует, что он центрирован внутри контейнера div.
Добавьте наш новый элемент div к тегу body. Он не будет отображаться внизу страницы, потому что мы использовали CSS, чтобы позиционировать его абсолютно. Просмотрите файл CSS для получения дополнительной информации.
Найдите тот тег P — который содержит букву «X». При щелчке по этому элементу найдите элемент #video и удалите его со страницы. Это код, который избавляется от видео.

полный

Запустите страницу в своем браузере, нажмите на изображение, и вы увидите, что видео всплывает отлично. Если у пользователя отключен Javascript, он или она будут просто перенаправлены на новую страницу, содержащую встроенное видео.

Я надеюсь, что это помогло вам лучше понять возможности SimplePie. Хороших выходных … но не перед копанием этого урока. 🙂

Подпишитесь на RSS-канал NETTUTS, чтобы узнать о ежедневных новостях и статьях о веб-разработке.