Фев 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 на своём сервере и сделать виджет более красивым

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