Как сделать красивую форму подписки с помощью сервиса feedburner?

Приветствую, друзья! Ранее мы обсуждали сервис рассылок MailChimp и особенности работы с ним. МэйлЧимп, конечно, классный и супер функциональный, но кому-то он может показаться чересчур сложным и навороченным. Поэтому сегодня я расскажу про замечательный сервис feedburner, который гораздо проще и понятнее в использовании. Из этой статьи вы узнаете, какие возможности он дает и как сделать базовые настройки, в том числе о создании формы подписки для вашего блога. А на десерт вас ждет бонус: подробное руководство по настройке оформления формы, рассказ о том, как из примитивного серого виджета сделать «конфетку». Примерно такую:Форма подписки, Feedburner

Что такое FeedBurner

FeedBurner — один из самых популярных сервисов, предоставляющих rss-услуги. К его возможностям можно отнести:

  • Возможность добавления кнопки «play» для подкастеров;
  • Исправление ошибок rss-потока;
  • Ведение статистики подписчиков;
  • Наличие формы подписки по электронной почте;
  • Дополнительные фишки (например, улучшенная совместимость с программами для чтения rss).

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

Как настроить feedburner

Для настройки rss-ленты от feedburner идем на эту страницу.

В поле «Зажигай фид» вводим адрес своего фида. В WordPress-блоге при грамотно настроенных постоянных ссылках он обычно имеет следующий вид: имя_вашего_сайта.ru/feed/. Жмем «Next» и на следующей странице вводим название и адрес фида: можно сочинить свое или оставить предложенное системой. Снова жмем «Next» до тех пор, пока не попадем на страницу с заголовком «Ваш фид готов к выпуску в свет. Что теперь?»

А дальше отправляемся во вкладку «Оптимизируй» и активируем там опции «BrowserFriendly» и «SmartFeed» — они упростят подписку для пользователей и обеспечат максимальную совместимость. В настройках BrowserFriendly выбираем тему с пометкой Russian.

Вот, в принципе, и все настройки rss от feedburner. Осталось лишь оптимизировать подписку по почте и получить то, зачем пришли — заветную форму подписки.

Как установить форму подписки feedburner на сайт

Чтобы настроить форму подписки feedburner, надо перейти в раздел «Публикуй—>Подписки по электронной почте—>Subscription Management». Активируйте эту опцию и выберите язык. В поле, расположенном ниже сгенерируется ваш код формы подписки. Этот код — и есть то, что вы вставите к себе на сайт, например, в файл single.php или в подходящий виджет — туда, где должна быть форма подписки.

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

В разделе «Communication Preferences» указываем свой email для обратной связи и текст письма с подтверждением, которое придет новым подписчикам. Например, так:

Добрый день!

Вы только что оформили подписку на получение новых статей с сайта Blogstu.ru. Чтобы подтвердить подписку, перейдите по ссылке:

${confirmlink}

Теперь в разделе «Email Branding» настраиваем шрифт, его размер и цвет. Поле с темой письма можно оставить по умолчанию или вписать в нем ${latestItemTitle} , чтобы в ней отображался заголовок записи, анонс которой содержится в письме.

И, наконец, последний раздел — «Delivery Options». Здесь надо настроить часовой пояс и время, в которое будет осуществляться рассылка. По статистике, большинство людей проверяют почту в первой половине дня, поэтому оптимальным вариантом станет отправка с раннего утра до обеда.

На этом настройки почтовой рассылки завершены. Теперь можете вставить код формы подписки и взглянуть на результат. Рискну предположить, что внешний вид стандартной формы вас разочарует: серая, скучная, англоязычная да еще с левой ссылкой. Непорядок. Пока посетитель ее найдет — передумает подписываться. Поэтому уделите, пожалуйста, этому вопросу еще 5 минут: сейчас я подробно расскажу, как сделать форму подписки feedburner яркой и уникальной.

Как сделать красивую форму подписки feedburner?

Итак, давайте приведем нашу форму подписки в приличный вид. Вы не поверите, как это просто!

Шаг 1. Убираем из формы подписки все лишнее

Вот так выглядел код подписки изначально:

Что нужно исправить в любом случае, вне зависимости от того, будете ли вы добавлять графические элементы?

  • Первым делом, переведите заморский текст. Для этого исправьте «Enter your email address» на «Введите свой email», а «Subscribe» на «Подписаться».
  • Теперь избавьтесь от внешней ссылки. Просто удалите конструкцию
  • У меня в стандартном коде поле для ввода email оказалось не по центру, а съехало на бок. Поэтому я добавила <center></center>. Получилось так:
  • Если вы не планируете использовать картинку, добавьте текст, объясняющий, для чего данная форма предназначена. Например, <p> «Подпишитесь на новости сайта» </p>. Текст надо вставить перед <p>»Введите свой email»</p>. И все же, я рекомендую использовать изображение, так как визуальные элементы всегда более действенны.

После всех действий мой код будет выглядеть так (строчку «Подпишитесь  на новости» удалите, если будет картинка):

А сама форма примет такой вид:Форма подписки, Feedburner

Уже лучше, но не достаточно.

Шаг 2. Добавляем яркую картинку в форму подписки

Во-первых, удалите в первой строчке кода

Это уберет из формы рамку.

Финальным штрихом станет картинка, которая не только украсит ваш сайт, но и привлечет внимание потенциальных подписчиков.

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

Скачать картинку для формы подписки:

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

Итак, наша картинка готова. Теперь заливаем ее на сайт, используя «Медиафайлы—>Добавить новый». Открываем загруженное изображение и смотрим в поле «URL» путь к файлу. У меня это http://blogstu.ru/wp-content/uploads/2015/09/forma.jpg.

Осталось только добавить конструкцию

в код формы, заменив путь к файлу на свой и вставив нужные размеры (width и height).

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

На этом мои действия с кодом окончились, так как кнопка по умолчанию выглядела вполне симпатично. 

Ваш вариант вставьте в подходящее место на странице (с помощью раздела «Виджеты»—>»Текст» или напрямую в файлах темы), нажмите «Сохранить» и проверьте результат. Наверняка теперь форма подписки на вашем сайте не останется незамеченной. Кстати, если вопросы оформления вам действительно важны, обязательно почитайте статью о тегах div и их использовании. Там масса конкретных примеров и, возможно, некоторые из них пригодятся вам для совершенствования внешнего вида нынешней формы.

© 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

пять × 2 =