Как сделать информер html
Информеры и виджеты для сайта
Многие владельцы для улучшения своего сайта устанавливают на него различные сторонние информеры или виджеты. Информер — это «информатор», который призван донести до посетителя дополнительную информацию.
Как правило, все CMS позволяют разместить на сайте информеры.
Информеры представляют собой небольшие, автоматически обновляющиеся кнопки или блоки, код которых вы устанавливаете на своем сайте. Графические возможности информера позволяют настроить его в соответствии со стилем вашего ресурса.
Обычно, информеры предоставляются бесплатно в обмен на установку обратной ссылки. Ссылка является частью информера.
Информеры выполняют на сайте две основные функций. Первая – они позволяют разнообразить текстовое содержание сайта, он становится более динамичным и практичным. Вторая функция заключается в том, на многих сайтах очень редко обновляется информация, а виджеты будут автоматически обновляться, предоставляя посетителю сайта свежую, полезную информацию, которая сможет его заинтересовать.
Чтобы установить информер на веб-ресурсе, вам необходимо выбрать его на проверенном источнике, настроить его в соответствии с вашими требованиями и дизайном сайта, сохранить предложенный html-код и вставить его на страницу сайта.
Правила установки информера:
Желательно, чтобы информер совпадал с тематикой сайта и дополнял его, а не «перебивал». Например, если вы продаете импортные товары, уместно будет разместить информер «курс валют», а если вы являетесь турбазой или гостиницей, то не помешает информер погоды на сайте.
Доверяйте только надежным источникам информеров, поскольку информеры из непроверенных источников могут содержать вирусы.
Не перегружайте свой сайт информерами — есть опасность расфокусировать внимание посетителей, отвлечь от основной информации. Переизбыток информеров чреват торможением загрузки основного контента.
Виды информеров:
Тематика виджетов весьма разнообразна: счетчик посетителей сайта, дата и время, онлайн-консультант, пробки на дорогах, новостные ленты, программы передач, информер курса валют, погоды и т. п. Выбирая информационный виджет для своего веб-ресурса, помните, что он, может повлиять на популярность вашего сайта среди определенных посетителей, которым эта информация будет интересна.
Информеры и виджеты курса валют
Информер курса валют будет полезен компаниям, у которых стоимость услуг или товаров привязана к курсу. Такие виджеты могут предоставить информацию о котировках на биржах, колебаниях цен. Валютные информеры можно брать на сайте investing.com, ExDex или forex-informers.
Информеры и виджеты погоды
Информер погоды на сайт следует размещать компаниям, которые предоставляют услуги по туризму, рыбалке, охоте и размещению гостей, например турбазы, гостевые дома и гостиницы. Возможно, такие информеры подойдут и магазинам, которые продают сезонные вещи, например оборудование для зимних видов спорта. Можно воспользоваться сервисами Gismeteo или Яндекс.Погода. Gismeteo. Они развернутые и краткие. Дают информацию о текущей погоде и прогноз на несколько дней.
Информеры и виджеты новостей
Информер новостей на сайте пригодятся тематическим сайтам, правда стоит размещать только ленты новостей той же или схожей тематики, что и ваш сайт. Практически все виджеты новостей позволяют размещать новости определенных категории: политика, финансы, культура, спорт и прочее. Вы без труда сможете подыскать подходящий для тематики вашего сайта новостной информер. Например, Яндекс.Новости или New2world.
Информер Яндекс.Расписания
Информер Яндекс.Расписания, будет полезен сайтам которые предоставляют услуги приезжим лицам, например гостиницам или гостевым домам, в прочем и туристическим сайтам данный информер будет весьма полезен.
Информеры и виджеты часов
Информер Яндекс.Часы поможет вашим клиентам ориентироваться во времени, или сопоставлять данные в зависимости от времени, это будет полезно если ваши услуги или доставка привязана ко времени, будь то доставка пиццы, или сервис такси. Так же есть следующие сервисы: ibooked.ru, 24webclock.com.
Виджеты «Поделиться» в социальных сетях
У Яндекса вообще много полезных информеров для сайта, кроме тех, которые мы уже разобрали. Один из них блок «поделиться» для социальных сетей, о нем можно почитать в статье «Кнопки социальных сетей».
Информеры и виджеты календаря
Информер календарь для сайта будет удобен посетителям сайта, если им нужно видеть какие-то даты, например, начала тура, экскурсии или начало/конец приема каких-либо документов. Очень удобный сервис календаря предлагает Google. Здесь они описывают инструкцию по размещению информера календарь на сайте.Так же есть следующие сервисы: chasikov.net.ru, calendar.yuretz.ru.
Информеры счетчиков посещаемости
У счетчиков посещаемости так же имеются информеры, на них отражены данные о посещаемости сайта, обычно их располагают в боковых колонках сайта или в подвале.
Чаще всего их устанавливают для потенциальных рекламодателей, чтобы они видели информацию о количестве посетителей сайта и просмотров страниц. Так же распространены виджеты показателей ТИЦ и PR, которые оповещают о популярности и цитируемости ресурса. Стоит понимать, что открывая эти данные для всех, их так же будут видеть и ваши конкуренты.
Информеры и виджеты социальных сетей
Виджеты социальных групп и сообществ сообщают посетителям сайта, что у вас есть сообщество и вы общаетесь с посетителями в рамках социальных сетей, так же это может быть полезно и для бизнеса, ведь если посетитель увидит в числе участников группы своих друзей, его доверие к вашему сайту и компании улучшится, и он более охотно станет вашим клиентом.
Онлайн-консультант для сайта
Как добавить информер или виджет на сайт?
Разберем пример установки информера Яндекс.Погода на сайте, созданном на базе конструктора Нубекс.
1. Заходите в сервис Яндекс.Погода, введите там название вашего города, выберите один из предложенных виджетов и в окне «Код информера» появится html-код. Сохраните его.
3. Нажимаете на кнопку «Источник» и в это окно вставляете сохраненный html-код. Не забудьте сохранить изменения.
4. Информер погоды появился на вашем сайте.
Информация к размышлению
Подумайте, может на вашем сайте один из описанных информеров помог бы вашим клиентам. Информер может оказаться очень полезной вещью, ведь он будет доносить до посетителя полезную информацию, и поможет ему сделать выбор в пользу вашей компании или предложения. Однако не стоит увлекаться и ставить на сайт все подряд, подумайте какие информеры или виджеты реально помогли бы вашим посетителям, а может и вам самим улучшить ваш сайт или бизнес.
Создание веб виджета для сторонних сайтов
Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях
Перед тем как продолжить ознакомление с данным материалом давайте немного поговорим о том, что такое виджет, где и для чего он используется.
Вы наверное видели на страницах сайтов такие элементы, как:
Таким образом, большинство из этих элементов на сайтах являются виджетами. Виджеты служат не только украшением, они несут в себя информационный контент, и служат дополнительным инструментом для расширения функциональности сайта.
На текущий момент большое количество сервисов предоставляют для сторонних сайтов свои виджеты, которые выполняют определенные функции. Во время установки виджета должны выполняться следующие требования:
Теперь давайте поставим для себя задачу.
Мы хотим создать виджет для сторонних сайтов, который будет отображать на их страницах, некий информационный блок с ссылками на наш сайт, т.е. создадим что то типо новостной ленты. При этом встраивание нашего виджета на страницы сайтов должно быть очень простым.
На данном сайте мной реализован виджет, который формирует в правой колонке список ссылок на материалы раздела Яндекс.Карты. В качестве демонстрации результата работы виджета Вы можете разместить на своем сайте следующий код:
скопируйте и вставьте следующий код на своем сайте
Подготавливаем файлы, необходимые для создания веб виджета
При создании веб виджета для сторонних сайтов, в качестве примера я буду использовать сайт с доменным именем yoursite.loc. Для более полного понимания материала на момент создания нашего виджета, что бы не путаться в путях давайте создадим и разместим новые файлы прямо в корень сайта yoursite.loc, там где расположен индексный файл.
Создадим в корне сайта 3 файла:
В нашем примере мы будем использовать статическую HTML разметку, так как нас интересует сам принцип создания веб виджетов. Вы же, уже при создании рабочего виджета напишете код для получения тех данных, что Вам необходимы
внесем минимум стилей
содержимое javascript файла на данные момент оставим пустым
Ознакомившись с механизмами работы веб виджетов мной было выявлено 2 метода встраивания их кода на страницы сайтов: используя элемент iframe и используя javascript.
Подключение виджета через iframe
Элемент iframe позволяет нам вставить один html-документ в другой html-документ, где в атрибуте src мы указываем путь к документу, который отобразиться во встроенном iframe. При этом css и js файлы, необходимо подключить в файле widget.php.
Таким образом для размещения веб виджета на сторонних сайтах через iframe необходимо разместить в нужном месте на html-страницы iframe примерно следующего содержания:
Подключение виджета через javascript
Рассмотрев более детально примеры подключения виджетов сторонних сайтов стало понятно, что их подключение также возможно осуществить средствами javascript.
Я приведу Вам пару примеров такого подключения виджетов:
Виджет для сообществ с соответствующей группой или официальной страницей ВКонтакте. Виджет позволяет подписаться на новости сообщества, не покидая страницы.
При подключении виджетов выполняются примерно следующие шаги:
Того же хотим добиться и мы с Вами. Мы хотим, что бы, установка нашего виджета была такой же простой. Так давайте попробуем сделать свою реализацию подключения нашего виджета и его инициализацию.
Составим код, который мы будем предоставлять для встраивания нашего виджета на страницу любого сайта.
Код подключения нашего виджета
Инициализация виджета через javascript
Пришло время поработать с нашим файлов widget.js. В нем мы создадим объект с свойствами и методами. Основным интересующим нас методом будет метод инициализации виджета init.
Так как подключение css стилей виджета осуществляется, в методе «addStyle» объекта «wrgsv», то из файла http://yoursite.loc/widget.php необходимо удалить подключение файла стилей «widget.css», которое мы добавили ранее при подключении виджета через iframe.
Код подключения нашего виджета с указанием нового идентификатора «new_id_box»
Ошибки во время выполнения кросс-доменного скриптинга
Во время инициализации виджета, а именно во время отправки ajax запроса на другой домен, в консоле браузера может возникнуть ошибка. К разных браузерах она звучит по разному. К примеру:
Обычно запрос XMLHttpRequest выполняет запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку. Возникновение данной ошибки вполне «нормальное явление», так как разработчики данного стандарта побеспокоились о контроле безопасности.
Для исправления данной ошибки необходимо внести изменения в заголовки ответа сервера и тем самым разрешить такой запрос для стороннего сайта. Это можно сделать как минимум следующими способами:
Как сделать информер html
Школа Продающих Сайтов
A5.ru: конструктор сайтов
Как добавить информер на сайт
Если у Вас есть сайт, то вполне возможно, Вы думаете о том, как сайт сделать более информативным, более функциональным и полезным для посетителей.
Одним из способов разнообразить информацию на сайте, оживить его, является добавление на его страницы свежих новостей.
У администратора не всегда есть возможность постоянно следить за появлением новой информации и добавлять ее на свой сайт. Поэтому, одним из возможных решений данной проблемы является добавление на сайт информеров.
Для того, чтобы установить информер к себе на сайт, необходимо скопировать html код информера, и добавить его на страницы своего сайта.
Если Вы воспользуетесь поисковой системой и попробуете поискать информеры в сети на разные темы, то наверняка обнаружите, что практически на любую тему можно найти информеры.
Это в первую очередь погодные информеры, информеры курса валют Центрального Банка и валютной биржи Forex, информеры новостей строительства, недвижимости, информеры праздников и так далее.
Для чего сайты, поставщики информеров, раздают свои новости через информеры?
Тут все очень просто, в html коде информера находится ссылка на сайт, который предлагает данный информер, поэтому получается, что раздавая информацию через HTML код, сайт продвигает себя в сети Интернет через ссылки.
Получается, что сайт, на который устанавливается информер, получает новости, свежую информацию, а сайт, с которого берется информация, получает на себя ссылку. Взаимно выгодные условия, так сказать.
Процедура добавления информера проста, Вы ищите в сети сайты, которые предоставляют html код информера по тематике, сходной с тематикой Вашего сайта.
Копируете HTML-код информера и добавляете его на свой сайт, вот и все.
На что следует обратить внимание при добавлении блока информера на страницы своего сайта?
1.В первую очередь, обратите внимание на дизайн информера. Будет лучше, если добавляемый на Ваш сайт информер гармонично впишется в дизайн Вашего сайта.
Кстати, сайты, которые поставляют качественные информеры, как правило, на своих станицах, позволяют пользователю гибкую систему настройки дизайна и размера информеров, с отображением его внешнего вида.
2.После установки информера на сайт, проверьте, насколько часто идет обновление новостей. Бывает, что новости в блоке информера вообще не обновляются.
Получается, что Ваш сайт ссылается на сайт постовщик информации, а тот новости вообще не обновляет. Откажитесь от такого информера.
3.Есть информеры, которые позволяют посетителям Вашего сайта производить какие-то полезные для себя действия.
Например, я устанавливал информеры на сайт автомобильной тематики, которые позволяют посетителю посчитать стоимость выбранного им автомобиля.
Но информер не работал, по клику на кнопку посчитать, посетитель перенаправлялся с моего сайта на сайт – поставщик информера.
Я отказался от использования такого информера.
Ну вот, собственно и все.
Как я уже отмечал выше, после подбора информера, нужно его HTML код, добавит на свой сайт.
Способы добавления HTML кода информера на сайт, зависят от того, на каком движке Ваш сайт работает.
Например, если Ваш сайт создан конструктором Яндекс.Народ, то процедура добавления информера на сайт точно такая же как и при добавлении счетчика, как это сделать, читайте и смотрите вот здесь.
Drupal Русскоязычное сообщество
Я гляжу, что-то многабукф получилось ;))) Для торопливых сразу ссылка на модуль, который позволяет сделать информер из новостей вашего сайта http://drupal.org/project/embed_widgets
В общем-то, идея сделать информер для моего сайта (тематика образование) зрела у меня давно. Потому что в моей сфере конечно, полно хороших сайтов, но сайтов школьников сделанных на юкозе куда больше 
Та же история с вузами, курсами и прочими. Им всем нужна ссылка, которую можно вставить и не мучиться, а то еще что такое рсс нужно понять.
Но на действие меня подтолкнула вот эта статья на серченжине: http://forum.searchengines.ru/showthread.php?t=185125 Её смысл в том, что организовав информер и добившись его размещения на десятках других сайтов, мы получим кучу бэков, повысится узнаваемость ресурса.
Однако виджетбокс делает информеры на базе флэша, поэтому ссылок на мой сайт не было, да и грузился информер долго 
Тогда я поискала на друпал.орге и нашла замечательный модуль http://drupal.org/project/embed_widgets Это новый модуль, его разработка ведется полным ходом. Без всяких дополнительных скриптов он может сделать информер из любой страницы или блока вашего друпал сайта и сдлеать ссылки для его вставки. Поддерживается жава-скрипт, айфрейм и гаджеты гугл.
Но! Эти все прелести только для 6ки (Еще одна причина обновиться. ) Для 5ки модуль очень сырой, правда обещается, что когда закончат разработку 6ой версии, его таки портируют на 5.
А если учесть что виджетбокс может из гуглгаджета превратить в любой другой виджет, то перспективы выходят очень хорошие!
Честно говоря, я планировала эту статью вчера, и собиралась окончить на этом моменте, но сегодня я нашла еще подборку интересных ссылок.
Во-первых, виджетбокс не один такой хорший, в буржуйнете таких сайтов несколько. Еще есть http://grazr.com, там тоже можно создать виджет. Но не так красиво и наглядно как в виджетбоксе.
Во-вторых, как оказалось также много сервисов по переделке из рсс в жава-скрипт. Вот подборка сервисов, не все заработали с моими рсс (проблемы с кодировкой, по-моему):
Делаем информер сами для самых новичков. Часть первая.
Я уже писал о том что такое rss и как это может помочь вам экономить свое время. Например тут и тут. В настоящее время большой проблемой является не то что информации нет. А то, что её слишком много. И надо пользоваться средствами, которые позволяют нам удобно и быстро её читать и анализировать.
Отличное применение подобного, например, это получать только ту информацию, которая вам интересна. И не тратить время на ненужные просмотры. В прошлой статье я написал как вытащить только нужную информацию с любой страницы какого либо сайта, а теперь давайте посмотрим как этим удобно воспользоваться. В начале этой статьи стоит информер. Информация о валютах берётся напрямую с сайта банка.
Хотите уметь так сделать без больших усилий?
Вначале, по прошлой статье, получаем rss поток (ещё его называют “фид”). Если он у вас уже есть, то ничего делать не надо.
И поехали… Заходим на сайт feedburner
Что даёт этот инструмент? Он позволяет работать с rss потоками. Мы можем их делать “совместимыми”, оперировать внешним видом, добавлять заголовки, обрезать текст, получать статистику, “довешивать” что-то для монетизации и т.п.
Главное, что нам надо в данном случае – он позволяет делать из потока информеры. Это такие маленькие блоки с информацией (например как в начале этой статьи)
Давайте посмотрим как создан этот блок.
Вначале просто создаём новый “фид” – просто копируем какой-то rss поток в строку ввода. Feedburner будет с ним работать в дальнейшем.
Предлагается ввести ссылку по которой будет доступен результат.
Нажали Next и получили готовый поток. Теперь его надо немного настроить под наши нужды. 
Мы можем задать, что нам интересна статистика по кликам и вообще хотим получать много всего статистически интересного.
Теперь надо включить “Дружественность” 🙂 Что это такое? Если пользователь нажмёт на ссылку с rss –
иногда можно получить просто вот такое окошко.
Гораздо удобнее получать его вот в таком виде. С возможностью подписаться, подключить к читалкам и т.п.
Теперь сделаем удобности, которые невидимы, но полезны. Включение этой опции (Activate) делает полученный поток “совместимым” с разными читалками, браузерами и т.п.
Т.е. неважно каким браузером пользуются читатели – они увидят всё так как вы задумывали, а не “искорёженным”.
Можно добавить опции для общения. Включаем или выключаем разные возможности. Как и любая другая возможность – начинает работать с момента нажатия Activate.
Мы можем для нашего потока задать отдельные заголовки и краткие описания. Если хотим – задаём и активируем возможность.
Важный момент. Если я не хочу чтобы в rss попали мои статьи целиком – я могу ограничить попадающий в rss поток информации. Например только 200 символов из статьи попадут в rss, если я активирую эту возможность.
А теперь интереснейшая возможность, к которой мы и шли – создание информера. Активируем, настраиваем
Например можем задать размер информера
И получить его в таком виде.
И вот информер готов 🙂 Осталось только вставить полученный код в любое место где вам будет удобно его наблюдать. Об этом чуть ниже.
А пока вернёмся к возможностям Feedburner
Если просто пробежаться по ссылкам слева – то вы увидите кучу полезных и интересных возможностей.Например возможность подписаться на этот фид по электронной почте.
Или получить маленькую кнопку, которая будет показывать сколько человек подписались на ваш фид.
Или сделать чтобы автоматически всё попавшее в фид транслировалось в, например, твиттер.
Или защитить паролем весь поток.
Или разместить в потоке рекламную ссылку 
В примере с картинки- в потоке автоматически будет размещаться реклама. В каждой 4-ой записи, в конце потока.
Но вернёмся к задаче, которую мы решаем. Надо вставить курс валют куда-то. Заходим на закладку Publicize и создаём новый информер
Если информер уже есть – можно использовать его
А теперь выбираем место куда будем его вставлять. В блог, в подпись к почте, … Или можно просто получить код. 
Если я вставлю код с картинки – то вместо него появится красивый информер… 
Например это может выглядеть вот так 🙂
Немного сумбурно, но надеюсь понятно как это делается. Вы можете формировать rss потоки, делать из них информеры, например, можно в такой информер собрать новости с любимого сайта и вы быстро сможете видеть только то, что вам интересно, не обходя каждое утро половину интернета 🙂
Я продолжу эту тему в следующей части.
Есл непонятно или не получается – спрашивайте.