Это хорошо понимают в редакции глянцевого интернет-журнала о гаджетах для гиков 4geeks.ru, для которого я сделал пакет из четырёх виджетов, отображающих анонсы последних новостей:

1. Flash-виджет для сайтов и социальных сетей

Может вставляться в блоги на популярных платформах (LiveJournal, LiveInternet), обычные сайты и на FaceBook.com.

2. Статический виджет-картинка

Идеальный вариант для форумов и прочих сервисов, где вставка Flash невозможна.

3. Гаджет для Windows Vista

Изящная иконка на боковой панели по клику разворачивается в окно просмотра.

4. Виджет для для Mac OS X

В двух вариантах, адаптированных под разные версии операционной системы.

Получить любой из этих виджетов можно здесь: http://www.4geeks.ru/widget/

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

Как? Поделюсь парой идей.
Сразу предупрежу, что всё сказанное будет относится к магазинам, работающим с потребительскими товарами. Если вы продаёте электрогенераторы для буровых установок или минеральные удобрения, навряд ли виджеты вам помогут. А вот если бытовую, фото- и видео- технику, книги или даже компьютерные игры, стоит поразмыслить на эту тему.

Самое простое – сделать виджет для вставки в блог с информацией о товаре. Я вообще не понимаю, почему этого никто не делает: на Яндекс.Маркете такая функция есть уже с год, а в интернет-магазинах ещё ни разу не видел. С технической точки зрения это реализовать достаточно просто, никакая последующая поддержка не требуется, а пользы может принести достаточно много.
Как это выглядит? Просто кнопка на странице с описанием товара: «Код для вставки в блог», а при клике на неё появляется текстовое поле с кодом, который пользователь может скопировать себе. В коде может содержаться ссылка на изображение товара, название модели, название магазина и ссылка на страницу описания.

Например, приходит человек к вам на сайт и видит Фотоаппарат Своей Мечты. Купит он его или не купит – вопрос отдельный. Но ему в любом случае захочется поделиться впечатлением с друзьями.
Он видит код для вставки и копирует его в запись своего блога

Таким образом, вы получаете:

1. бесплатную рекламу по «сарафанному радио»
2. ссылку на свой сайт для SEO
3. новую «фишку» для пользователей, которой нет у конкурентов.

Причём теперь даже те посетители, которые у вас ничего не покупают, смогут принести пользу магазину, рекламируя его!

Способ посложнее – сделать на основе магазина вишлист (список желаний).

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

Ещё один вариант – партнёрская программа на виджетах. Как правило, магазин – владелец паринёрки дёт либо свой список товаров, чтобы партнёры разворачивали свои магазины, либо баннеры и партнёрские ссылки. А ведь можно давать ещё и виджеты для каждого товара, аналогично коду для вставки в блог.

Ну и наконец, интеграция с социальными сетями. Тут открываются действительно огромные возможности, потому что каждый пользователь соцсети – это не анонимный посетитель, а человек, о мы можем кое-что узнать: чем он интересуется, с кем дружит, чем интересуются его друзья, сколько ему лет и т.д. И на основе этого интернет-магазин уже может находить к нему индивидуальный подход.
Например, можно давать персональные рекомендации в выборе товара: на сайте книжного магазина пользователь вводит свой ник LiveJournal,  система делает запрос к социальной сети, получает список его интересов. И если он интересуется психологией, предлагает на выбор новинки из раздела «Психология», а если гладиолусами, то из раздела «Садоводство». Конечно же, предлагая для результатов ещё и код вставки в блог, чтобы новость о сервисе распространялась и дальше: как показывает моя практика, при правильном запуске, посещаемость сервиса для соцсети легко может достигать нескольких тысяч человек в сутки.

Как считаете, оправдают ли себя такие подходы или наткнутся на какие-нибудь «подводные камни»?

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

HTML+JavaScript+серверный язык (например, PHP).

Такая связка позволяет создавать очень гибкие и интерактивные виджеты, поведение которых может зависеть как от действий пользователя, так и, например, от контента страницы, на которой виджет размещается. Эти технологии используются, в частности, для показа контекстной рекламы.
При такой схеме JavaScript, как правило, отвечает за формирование внешнего вида виджета, а сервер – за ресурсоёмкие операции вроде обработки текста и вычислений (а часто ещё и за формирование JavaScript-а).
Распространяться такие виджеты могут везде, где разрешена вставка JavaScript: на сайтах, в автономных блогах, некоторых блогохостингах.

Плюсы:

• максимальная гибкость и интерактивность, можно реализовать самые смелые идеи

Минусы:

• трудоёмкость разработки
• при большой популярности виджета, особенно если он требует много ресурсов для обработки данных, может сильно возрастать нагрузка на сервер

Где можно использовать:

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

Flash или Silverlight (+ сервер)

С помощью Adobe Flash делаются самые красивые виджеты, и самые технически сложные: например, всем знакомая вставка видео с YouTube. Сейчас набирает обороты конкурент Flash – технология Microsoft Silverlight. И хотя виджетов на ней я пока не встречал, уверен, скоро они начнут появляться.
Распространяться такие виджеты могут везде, где разрешена вставка Flash, а в некоторых случаях эта технология является вообще единственным вариантом: например, только с её помощью можно создавать приложения Вконтакте.

Плюсы:

• большие возможности для дизайнеров
• облегчается реализация технически сложных функций

Минусы:

• трудоёмкость разработки
• виджеты часто получаются «тяжёлыми», медленно загружаются

Ещё одна прелесть flash-виджетов состоит в том, что существуют сервисы для их автоматической генерации. К сожалению, в Рунете я таких не нашёл, а западные использовать неудобно, потому что они ориентированы на другую часть Сети. Приведу лишь пару примеров:

• Sprout – мощный редактор. К сожалению, с февраля становится полностью платным и с русским языком не умеет работать абсолютно.
• Widgetbox – позволяет легко делать несколько типов виджетов. Например, вот я буквально парой кликов сделал виджет для показа RSS своего блога:

Но увы, интерфейс этого виджета не русифицирован, местами слетает кодировка, а механизм распространения «заточен» под западные социальные сети. Так что полноценно использовать его в Рунете не получится. Хотя, например, в качестве элемента дизайна блога (показывать в сайдбаре анонсы постов) или в качестве рекламы блога на других своих площадках – почему бы и нет.

HTML+JavaScript (формируются статически)

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

Тут, на мой взгляд, ничего особо интересного нет: добавляя JS, мы придаём немного больше интерактивности нашему виджету (переключение закладок, всяческие таймеры и всплывающие окошки), но при этом сильно ограничиваем его распространение. Дело в том, что многие сервисы хостинга блогов, и уж тем более форумы, в целях безопасности не разрешают пользователям вставлять JavaScript. Поэтому такие виджеты будут работать, в основном, на автономных блогах, личных сайтах или на каких-то определённых страницах (например, в профиле пользователя LiveJournal, но не в его постах). Да и чтобы сделать что-то завлекательное на одном только JavaScript и HTML, надо постараться.

У меня пока есть только одна идея, как это можно использовать: счётчики. Например, организуете вы конкурс, который должен начаться через 14 дней. Делаете виджет с надписью «До начала мегаконкурса осталось:  столько-то часов-минут-секунд», на котором тикает время в обратную сторону, вешаете у себя в блоге и предлагаете посетителям тоже повесить на своих блогах. Постоянно тикающий таймер будет подогревать аудиторию ничуть не хуже зажигательных постов, и вам для этого ничего не надо будет делать.

Микросайтинг

Очень интересная технология, которую нельзя не упомянуть. Интересная своей простотой, изяществом и «живучестью».

Придумал её Дамир Ramainen ainu Фахрутдинов, и началось всё с этого поста (по крайней мере, это первое упоминание, которое мне известно).

В чём «фишка». Микросайт – это маленький самостоятельный сайт, встраиваемый в код другого, «большого» сайта. Код его представляет собой только ссылки и картинки, чем и объясняется «живучесть»: такой сайт-виджет можно разместить мало того что на любом блоге, но даже в подписи на форуме, где кроме BB-кодов вставлять ничего не разрешается.

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

Плюсы:

• такой виджет может внедряться куда угодно, где можно вставлять картинки и ссылки
• контроль над виджетом в ваших руках: вы можете изменить дизайн или даже отключить показ виджета везде, где он уже установлен

Минусы:

• При клике по ссылке микросайта происходит перезагрузка страницы (есть варианты без перезагрузки, но они используют JavaScript)
• Улучшение дизайна – несколько более трудоёмкий процесс по сравнению с HTML

Где это можно использовать?

В первую очередь там, куда не доберутся другие динамические виджеты: на форумах, в комментариях, в постах на блогохостингах. Например, проявив немного фантазии, можно сделать интересную подпись для форума, голосование или даже вставку слайд-шоу!

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

Начнём со статического HTML.

Это просто HTML-код, который вставляется на страницу, и впоследствии уже не меняется. В таком виде, например, по блогам расходятся результаты тестов и анонсы новостей с новостных сайтов. Если вы видите на сайте текст «Код для вставки в блог», в 90% случаев это окажется статический HTML-виджет.

Дороги Москвы будут поливать горячими реагентами

Мэр Москвы Юрий Лужков предложил новое средство для борьбы с гололедицей на столичных магистралях. Как сообщил РБК заместитель руководителя Федеральной службы по надзору в сфере природопользования (Росприроднадзор) Олег Митволь, вопрос о применении антигололедных реагентов был рассмотрен на совещании в правительстве столицы. Ю.Лужков предложил применить в столице технологию подогрева жидких реагентов. По мнению градоначальника, эта технология гораздо действеннее и экономнее, чем традиционные средства. Для обработки магистралей…Читать далее > РБК. Москва

Плюсы:

• поддерживается всеми платформами: от сайтов до бесплатных блогохостингов и форумов;
• как правило, содержит прямо в коде ссылку на ваш сайт, что положительно сказывается с точки зрения SEO. Например, мой http://123lj.ru получил за 5 месяцев существования тИЦ 50 и PR 5 исключительно за счёт ссылок из виджетов в LiveJournal (причём, не все ссылки из виджетов ведут напрямую на этот домен: некоторые ведут на старый, где виджет жил вначале).
• самый «дешёвый» вариант с точки зрения разработки: на его реализацию требуется меньше всего времени.

Минусы:

• никакого интерактива
• контроль за виджетом полностью переходит в руки пользователя

Где можно применять:

• новостные сайты
• тесты и другие подобные сервисы, результатами работы которых пользователь может захотеть поделиться со знакомыми
• интернет-магазины
• любые другие сайты, предоставляющие информацию, которая со временем не перестаёт быть верной. Например, если у вас есть сайт о кино, можно сделать вставку кода с афишей и кратким обзором фильма: любители писать рецензии будут растаскивать их с удовольствием

Насчёт интернет-магазинов могу рассказать поучительный эпизод. Несколько лет назад, работая работая в одном из них, я предложил публиковать на сайте к каждому товару код для вставки в блог. Такого тогда никто на рынке не делал, руководство идею проигнорировало, коллеги только похихикали. А какое-то время спустя я обнаружил, что такая фишка появилась на Яндекс.Маркете (ссылка в правой колонке).

Sony-Ericsson XPERIA X1 — описание и цены на Яндекс.Маркете

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

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

Продолжение следует.

Давайте разберёмся.

Плюсы для владельцев сайтов-поставщиков виджетов

1. Дополнительный источник посетителей с других сайтов, разместивших виджет. Например, если вы управляете сайтом кинотеатра, сделайте информер с расписанием сеансов. Пользователи будут смотреть расписание на других сайтах, а за рецензиями и трейлерами приходить по ссылкам к вам.
2. Большая узнаваемость вашего сайта: его логотип красуется на виджете.
3. Имидж инновационной компании, которая заботится о пользователях и предлагает им самые современные услуги.
4. Пользователь остаётся с вами, путешествуя по просторам Сети, а в случае виджетов для рабочего стола – даже закрыв окно браузера.

Плюсы для владельцев сайтов, размещающих виджеты

5. Расширение функционала. Если у вас сайт об инвестициях, разместите сбоку информеры с курсами валют и акций, наиболее интересных вашим посетителям: тогда, возможно, им не придётся искать эти данные на каких-то других ресурсах.
6. При правильном подборе виджетов можно обычный сайт превратить в небольшой портал: пользователь будет получать всю нужную информацию, не покидая его.
7. И главное – простота внедрения. Для того чтобы разместить виджет, требуется обычно всего лишь скопировать кусок кода.

Плюсы для рекламодателей и маркетологов

С помощью виджетов можно продвигать ваши продукты, услуги и сайты. Это называется «виджет-маркетинг», и он может принимать самые разные формы: от брендирования игр до разработки виджетов по подбору товаров из вашего каталога. Какие здесь есть преимущества?

8. Вирусность. Виджеты легко переносятся с сайта на сайт, поэтому хорошо продуманный виджет моментально расходится по социальным сетям и блогам.
9. Низкая стоимость владения. Раз сделав виджет, вы можете перестать о нём думать: главное – оставьте сылку на него на видном месте, и пользователи сами будут его распространять.
10. Виджеты полезны пользователям и не вызывают раздражения, в отличие от баннеров. В глазах пользователя вы превращаетесь из продавца, который пытается что-то «впарить», в друга, который делает полезный подарок.

Плюсы для пользователей

11. Виджеты дают им новые возможности при работе с любимыми сайтами.
12. Позволяют получать самую важную информацию, не отвлекаясь на остальное. Например, чтобы посмотреть прогноз погоды на сайте, надо открыть браузер, набать адрес, дождаться загрузки баннеров и выделить блок прогноза из нагромождения рекламных ссылок. А чтобы посмотреть прогноз в десктоп-виджете, достаточно кликнуть на его значок мышью.
13. И наконец, виджеты – это просто весело.

Если попытаться дать общее определение тому, о чём будет идти речь на страницах блога, то можно сказать, что

Виджет

- это небольшой независимый программный модуль, работающий в некоторой среде (напр. сайте, браузере, мобильном телефоне) и исполняющий, как правило, одну определённую функцию.

Звучит заумно? Ничего страшного, сейчас станет понятнее.

Виджеты можно разделить на группы по среде, в которой они работают. Рассмотрим пока два вида: веб-виджеты и виджеты для рабочего стола.

Веб-виджет (web widget)

- это кусок кода, который может быть встроен пользователем в любую HTML страницу и использоваться без значительной модификации. Как правило, при создании веб-виджетов используются технологии DHTML, JavaScript и Adobe Flash

Вы когда-нибудь видели на страницах сайтов и блогов блоки, показывающие погоду, курсы валют, видеоролики с YouTube или результаты теста, пройденного владельцем блога? Наверняка видели, и даже использовали сами. Вот это и есть самые распространённые примеры веб-виджетов.
Веб-виджеты также иногда называют гаджетами, информерами, а на английском gadget, badge, module, webjit, capsule, snippet, mini или даже flake.

Веб-виджеты можно условно разделить на интерактивные (такие, с которыми пользователь может как-то взаимодействовать: например, отправлять SMS или искать маршрут на карте) и неинтерактивные (такие, содержимое и работа которых не зависит от действий пользователя, просматривающего страницу). Неинтерактивные виджеты ещё часто называют информерами.

Т. о.

Информер

- это неинтерактивный веб-виджет, т.е. такой, контент которого не зависит от действий пользователя.

Классический пример информера – погодный информер (на погоду в Москве может повлиять только Лужков перед парадом Победы):

Десктоп-виджеты (desktop widget) или виджеты для рабочего стола

- это небольшие инструменты (программы), выполняющие какую-то одну функцию и требующие для своей работы специальной среды – виджет-движка (widget engine)

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

Yahoo! Widgets на рабочем столе

При создании виджетов для рабочего стола используются самые разные технологии: от HTML и JavaScript до С++. Очень часто десктоп-виджеты используются для того чтобы показывать на рабочем столе информацию с какого-нибудь сайта (например, тот же прогноз погоды) без помощи браузера.

Примеры десктоп-виджетов:

• Виджеты Apple Dashboard (именно от них, как утверждается, ведут свою историю десктоп-виджеты)
• Yahoo! Widgets
• Гаджеты в Windows Vista
• Гаджеты Google Desktop
• Виджеты Operа
• Плазмоиды в Plasma (KDE)

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

Иллюстрации: juanpol, Taller Hikari