Похоже, вы новичок на сайте.
Чтобы быстрее понять, о чём здесь идёт речь, советую почитать:
что такое виджеты,
чем они хороши
и каковы их перспективы.
Это сообщение показывается только один раз. Такие же ссылки вы можете найти в правой колонке, в блоке "Рекомендую прочесть"
Фев 8

yahoo! pipesСегодня я покажу, как самому за 15 минут сделать простой веб-виджет, расскажу, как его можно использовать, а заодно познакомлю вас с интересным сервисом Yahoo! Pipes. Создание этого виджета потребует минимальных знаний веб-технологий: хватит начального уровня HTML и JavaScript.

Если говорить в общем, Yahoo! Pipes — это сервис для получения и обработки данных с веб-сайтов. Создаём новую «трубу», задаём источник данных (например, URL RSS-ленты), указываем, что с этими данными надо делать (фильтровать, преобразовывать), а на выходе получаем результат. Причём всё это делается с помощью простого графического интерфейса. В технические подробность углубляться не буду: благо, в Рунете об этом уже много написано. Самое интересное для нас — это то, что Yahoo! Pipes позволяет получить результат не только в виде RSS или JSON, но и в виде практически готового виджета.

Итак, поехали!

1. Заводим «трубу».
В качестве источника данных я взял RSS с последними сообщениями сайта HDR-мания (в основном, там фотографии). Выбираем последние 3 сообщения из RSS, удаляем из них ссылку «Читать далее» (а то смотрится некрасиво), сохраняем и получаем на выходе вот такую ленту.

2. Над лентой есть ссылка «Get as a Badge». Жмём её и получаем код:

<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"146acb8efde123f556220485401fdece","_btype":"list",
"width":"150","height":"260"}</script>

Если его вставить на страницу, получится что-то такое:

Интересно, но пока некрасиво.

3. Оборачиваем код в div и прописываем стили:

<div id="yp_widget" style="border: 1px dotted black; padding: 2px; background-color: white; width: 155px; font-size: 12px" align="center">
<style>.gt, .gts {visibility:hidden}</style>
<script src="http://pipes.yahoo.com/js/listbadge.js">
{"pipe_id":"146acb8efde123f556220485401fdece","_btype":"list",
"width":"150","height":"260"}
</script>
</div>

Выглядеть это будет так:

Уже неплохо, такой виджет можно уже помещать в сайдбар или на страницу. Но вам не кажется: чего-то не хватает?
Правильно, этот виджет можете поставить себе только вы, потому что знаете код. Сделаем так, чтобы ваши пользователи могли копировать виджет себе.

4. Создадим страницу с кодом и поместим ссылку на неё в виджет:

<div id="yp_widget" style="border: 1px dotted black; padding: 2px; background-color: white; width: 155px; font-size: 12px;" align="center">
<style>.gt, .gts {visibility:hidden}</style>
<script src="http://pipes.yahoo.com/js/listbadge.js">
{"pipe_id":"146acb8efde123f556220485401fdece","_btype":"list",
"width":"150","height":"260"}
</script>
<a onclick="window.open('http://widgetok.ru/wp-content/uploads/widgets/widget_sample_code.html','new','width=300,height=300,toolbar=0,
resizable=0,status=0'); return false;" href="#">Код для вставки</a>
</div>

Вуаля: наш веб-виджет готов!

Код для вставки

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

Выводы.

Плюсы подхода, который я только что описал:

  • виждет делается очень быстро и его создание требует минимума навыков
  • вся работа с данными производится на серверах Yahoo!, вам нужно хостить только одну страницу с кодом

Минусы:

  • вы оказываетесь «завязаны» на чужой сервис
  • сложно изменять внешний вид виджета
  • код строится с помощью JavaScript, поэтому ссылки внутри виджета индексироваться поисковиками не будут

Для чего его можно использовать:

  • для трансляции любого вашего контента. Главное — он должен быть достаточно интересен пользователям, чтобы они «растаскивали» виджет.

Кстати, если рядом со ссылкой «Код для вставки» поставить ссылку на ваш сайт, она вполне успешно проиндексируется.

Когда можно использовать:

  • когда нет ресурсов, чтобы создать что-нибудь получше. Например, если брать результат работы «трубы» в «сыром» виде, а не в виде бэджа, можно оборачивать его в HTML на своём сервере и сделать виджет более красивым
Share Button
Комментарии (11)

Что вы об этом думаете?

Поделились мыслями: 11

  • Ну, использовать можно не только для трансляции своего контента, но и для фильтрации чужого.
    Например, когда хочется мониторить отфильтрованный rss-поток на стартовую страницу iGoogle и т.п.

    А используя feed43.com можно ещё и отслеживать изменения на сайтах конкурентов, не использующих rss. :)

    Блог твой довольно интересный, продолжай!

    • Глеб:

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

      С помощью Y!P тоже можно сайты без RSS парсить. Сам не пробовал, но модуль там такой есть.

      Спасибо. :)

  • А можно тупой вопрос — как создать страницу с кодом?

    • Глеб:

      Просто создайте на своём хостинге файл с расширением, например, .html, оформите страницу так, как захочется, и разместите на ней текстовую область с кодом виджета.
      Может, это можно сделать как-то средствами WordPress, но по-моему, проще «руками».

  • Slider:

    Можно еще скормить ему RSS новостной ленты, а результат вставить в пустую веб-страницу с фоном желаемого цвета, которую затем поставить фоном Active Desktop и просматривать новостною сводку прямо на десктопе. Получится?

    • Глеб:

      Думаю, да. Я Active Desktop в своё время не проникся, поэтому почти не работал с ним.

  • Что я об этом думаю? Хм… Думаю, что Yahoo! Pipes в своё время как-то просмотрел. Благодарю за экскурс.

    Сам виджет не особо оригинален. ВордПресс делает всё тоже (трансляция любого RSS) штатными средствами, как мне кажется.

    офф:И, кстати, у HDR-фотографии нет будущего. Это мертворождённый жанр технофото.

    • Глеб:

      Рад, что заметка оказалась полезной.

      А причём тут WordPress? Прелесть этого решения в его универсальности: забирать данные можно из любой RSS, а вставлять на любую страницу.

      Насчёт HDR вы слишком категоричны.

      • При чём ВордПресс? Да, уже начал догонять, перечитав половину этого блога. Просто у меня все сайты на нём. Инертность мышления. Сейчас начну заново думать про них.

        Что же до HDR… оно не настоящее. Даже лучшие образцы. Эрзац. Как еда в фастфудах.

        Про вёрстку. В десятой Опере окно ввода комментария (в котором сейчас пишу) выходит за границы div class=padded примерно пикселей на десять. Это как раз неактивная (и активная тоже) полоса прокрутки. Режет глаз.

        • Ясно с комментарием. Окно ответа сдвигается вместе с деревом дискуссии. А размер его остаётся постоянным. Тогда, наверное, лучше не трогать.

        • Глеб:

          Еда в фастфудах — это фотографии мыльницей. :) А в меру использованный HDR (без кислотных цветов) даёт более «настоящее» изображение, чем обычная фотография, потому что приближает ширину динамического диапазона изображения к той, которую видит наш глаз.

          Что же касается использования нереальных цветов, это как те фломастеры, которые на вкус и цвет разные. Я рассматриваю это как просто ещё один художественный приём. Если он используется «к месту», то придаёт фотографии выразительность. Если нет, портит.

Прокомментировать