Подписка на новости сайта через e-mail, настройка сервиса Google Feedburner, создание формы подписки и счетчика читателей

Здравствуйте, уважаемые читатели блога Monetavinternete! На ранних этапах развития вашего сайта необходимо совершить работу,направленную на набор новых постоянных читателей и удержание старых, если таковые уже имеются. Большинство таких действий направлено на рекламу, особенно она полезна в социальных сетях (SMM и SMO), где количество пользователей просто огромно и найти людей, которым интересна тематика вашего ресурса, очень просто.

Создание и настройка подписки по электронной почте

Когда у вас появились постоянные читатели, нужно делать так, чтобы они о вас не забыли. Основным инструментом для достижения этой цели является частая публикация постов на интересные темы, но бывают такие случаи, когда многократно добавлять записи просто не получается. Пользователь заходит на сайт, а там ничего нового. Как следствие, он начинает постепенно забывать про вас. В такой ситуации поможет подписка по электронной почте (e-mail). Я считаю, что она должна присутствовать на каждом сайте или блоге.

Принцип работы подписки прост: вы вводите в соответствующем поле на сайте свой адрес и после этого вам на почту будет приходить информация о новых публикациях сайта в виде анонсов или всей публикации. Также в одной из прошлых новостей я писал о подписке на RSS ленту. В общем понимании, RSS-лента — это лента новостей, но в той статье я писал о подписке с помощью RSS-reader. Отличие в том, что все новости будут приходить не на почту, а в эту программу, благо таких программ в интернете много.

Проблема последнего способа заключается в том, что ридеры есть далеко не у всех пользователей, а большинство о них даже не знают.Зато у каждого есть электронная почта,а зачастую и не одна. Способов настроить подписку по e-mail довольно много, сегодня мы рассмотрим один из самых популярных — Google Feedburner. Как вы поняли, это сервис всем известного Гугла, так что бояться ничего не стоит.

Создание и настройка подписки по -mail через Google Feedburner

Отдельной регистрации в фидбернере не предусмотрено, поэтому нужно просто иметь google-аккаунт. Вот, собственно, сайт, где нужно ввести адрес своего сайта. Если у вас включена подписка на ленту комментариев, то вам предложат выбрать, какую ленту добавить в систему. И на последнем этапе вы должны ввести название для вашего фида (что будет написано в списке лент), и его адрес, у меня он выглядит вот так:

feeds.feedburner.com/Monetavinterneteru

После завершения регистрации вы попадете в свой фид-аккаунт. Рекомендую сразу включить русский язык: справа вверху находим «Languages», в появившемся окне выбираем русский. На глвной странице аккаунта видим 4 основных вкладки:

2014-06-16_10-16-58

 

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

Настройка новостной ленты в Feedburner — Оптимизируй

Вкладка «Оптимизируй» содержит очень важные настройки. Первые два пункта позволяют посмотреть внешний вид вашей новостной ленты (фида), т.е. что увидят подписчики на электронной почте, и увидеть XML-код фида. Не забывайте активировать функции и сохранять внесенные изменения.

2014-06-25_0-07-40

Сервисы

  • Browser Friendly — настройка внешнего вида ленты. Тем оформления всего 2 — Classic и ClearFeed (на многих языках). Здесь же можно настроить показ различных RSS-читалок, настроить содержимое фида, написать небольшое сообщение и включить перенаправление (полезная функция при переносе фида на новый адрес).
  • SmartCast — настройка подкастинга в ваших фидах. Обычно используется, если вы хотите выводить в ленту аудио и видео элементы.
  • SmartFeed — обеспечивает совместимость разных форм фидов и ридеров. Обязательно включите данную функцию. Обратите внимание, она не будет работать при активации предыдущей функции.
  • FeedFlare — настройка строчки внизу каждой статьи в фиде. Функций довольно много, но мне хватает счетчика комментариев.

Link Splicer

Здесь вы можете настроить вывод ссылок в фиде из предложенного списка сервисов закладок. Я эту функцию не активировал, т.к. сегодня мало людей используют перечисленные сервисы (в основном зарубежные).

Photo Splicer

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

Geotag Your Feed

При активации данной функции, вы должны будете ввести широту и долготу вашего города. Никаких внешних изменений фида вы не увидите. Эта функция вставляет теги geo:lat и geo:long (хотя я их не увидел в исходном коде страницы фида).

Feed Image Burner

Эта услуга позволяет вывести в правом верхнем углу выбранную вами картинку (логотип сайта, например). Не забудьте добавить ссылку на ваш сайт.

2014-06-25_1-08-57

Title/Description Burner

В этом разделе настраиваем заголовок и описание фида. Заголовок отображается на странице фида, а вот описания нет даже в исходном коде.

Convert Format Burner

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

Summary Burner

Если вы хотите выводить в фиде анонсы статей (пару первых абзацев), то у вас два выхода: использовать данную функцию или настроить это в вашей CMS (основные настройки вордпресс). Рекомендую второе, т.к. можно ограничить анонс до любого момента.

Настройка новостной ленты в Feedburner - Публикуй

Следующей идет вкладка «Публикуй». Здесь находятся настройки внешнего вида подписки на фид.

Аниматор заголовков

С помощью этой функции вы сможете создать баннер, в котором будут отображаться последние 5 записей в вашей rss-ленте. Также можно вписать название сайта (или любой другой текст) и включить отображение даты постов. Шаблонов здесь 10 — несколько размеров баннеров с белым/черным фоном, простой текстовый баннер (email signature), классическая тема с логотипом фидбернера (classic), тема, меняющаяся в зависимости от сезона (seasonal), и баннер со своим собственным фоном (provide your own background).

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

Buzz Boost

Эта функция позволяет настроить публикацию вашей ленты на других ресурсах. На странице функции вы настраиваете количество записей, их структуру и информацию об авторе. Затем получаете код для вставки на сайт. У этой функции есть одна интересная особенность — при внесении в ней любых изменений, контент в вашей ленте обновляется. Если вы сделали какие-либо изменения в ленте (например, вывод анонсов вместо полных статей), то можете нажать на кнопку «Сохранить» на странице функции, чтобы не ждать принятия изменений.

Настройка формы подписки по электронной почте

В этом разделе настраиваем подписку по e-mail. Эту информацию разберем более детально, т.к. форма подписки нужна практически каждому сайту.

Subscription Management

Сначала активируем услугу. Затем необходимо выбрать язык и вставить полученный код в любое место сайта. Язык прописывается в самом коде и изменения, внесенные на странице функции, будут применены только после обновления кода.

Форму подписки можно редактировать и стилизовать под дизайн вашего сайта. Вот ее стандартный вид (без применения стилей):

2014-06-28_19-50-48

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

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Monetavinterneteru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" name="email"/></p>
<input type="hidden" value="Monetavinterneteru" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

Я хотел, чтобы форма занимал минимум места — всего 1 строку и была более или менее привлекательной. Для начала уберем строчку со ссылкой на FeedBurner:

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

Уже меньше места и минус одна сквозная ссылка с сайта. Затем поставим все элементы в одну строку, путем удаления  всех тегов абзаца <p>. Осталось вот что:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Monetavinterneteru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
Enter your email address:
<input type="text" name="email"/>
<input type="hidden" value="Monetavinterneteru" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Subscribe" />
</form>

Все равно получается немного не красиво и не помещается в боковую панель:

2014-06-28_20-23-30

Теперь отредактируем теги <input>. С помощью атрибутов value вставляем желаемый текст внутри текстовой формы и меняем его на русский в кнопке. Затем с помощью атрибута onfocus делаем так, чтобы при нажатии на форму текст пропадал. А текст onblur восстанавливает фразу «Введите ваш E-mail» во время нажатия в другую область при пустой форме. Вот такой код в итоге у меня получился:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Monetavinterneteru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input name="email" type="text" value=" Введите Ваш E-mail" onfocus="if (this.value == ' Введите Ваш E-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = ' Введите Ваш E-mail';}">
<input type="hidden" value="Monetavinterneteru" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Подписаться" />
</form>

И форма: 2014-06-28_20-38-33

А после вставки на блог она приобрела вот такой вид (кликабельно):

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

Вернемся к странице функции. Помимо форм, вы можете использовать ссылку подписки по е-мейл. После нажатия пользователя перенаправит на страницу, где нужно будет ввести адрес почты и проверочный код. Ниже будет приведена информация о количестве подписчиков. Также в этом разделе можно посмотреть и скачать в csv-формате их e-mail адреса.

Communication Preferences

Эта функция позволяет редактировать сообщение письма-подтверждения подписки, которое приходит пользователям. В оригинале письмо на английском, поэтому можете просто переписать его на русский язык. Не забудьте добавить код ссылки для подтверждения —  ${confirmlink}.

Email Branding

В этом разделе настраиваем внешний вид содержания письма - заголовок, логотип, размер, цвет и тип шрифтов в письме.

Delivery Options

Настройки времени доставки писем. Выбираете свой часовой пояс и промежуток времени (для справки, am — до полудня, pm — после полудня). Жаль, что нельзя установить свои временные рамки.

PingShot

Эта функция будет отправлять информацию о публикации новых постов пинг-службам. Просто включите ее.

FeedCount

Это счетчик подписчиков. Просто выберите тип счетчика (анимированный или статический), цвет фона, текста и вставьте полученный код в любое место сайта. Как и в случае с формой подписки, внесенные изменение появятся только при обнолвении кода, т.к. тип и цвета прописываются непосредственно в нем:

 

Socialize

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

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

Также в начало или конец каждого твита можно добавить произвольный текст. Будет это дело выглядеть вот так:

2014-06-28_21-48-40

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

В разделе «Item selection» можно настроить максимальное количество твитов в сутки и их порядок публикации (в зависимости от даты или положения в rss-ленте). Также можно установить фильтр для публикаций. Вводите слово, выбираете место расположения, и в твиттер будут переданы только посты с этим словом.

Помимо твиттера, вы можете привязать другие аккаунты например, фейсбук. Для этого в самом начале кликаем на « Manage connections» и в появившемся окне из списка выбираем нужную систему:2014-06-28_22-35-02

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

Chicklet Chooser

С помощью этой услуги вы можете получить HTML-код кнопки для подписки на рсс-ленту. Есть выбор из 3-ех вариантов - стандартные RSS-иконки, подписка сразу через сервис для чтения и иконка с логотипом фидбернера. Я все же опять порекомендую поискать в интернете или нарисовать  самому RSS-иконку, которая будет аккуратно и привлекательно смотреться на вашем сайте.

Creative Commons

Эта функция призвана защищать авторские права. После активации, правда, ничего не произошло. Изменения только в XML-коде фида — добавилось пару строчек. Защита прав заключается в том, что при копировании материалов, пользователи должны будут проставить ссылку на ваш ресурс.

Password Protector

Нечто вроде «подписки для избранных». При включении этой функции, подписку смогут оформить лишь те, у кого есть логин и пароль, который вы указали. Это спасает от спам-подписок, но крайне неудобно при наборе новых читателей.

Noindex

Здесь можно отключить индексацию фида поисковиками и запретить его использование в Yahoo! Pipes.

Решай проблемы

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

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

Всего комментариев: 5 Комментировать

  1. Константин /

    Здравствуйте! Спасибо за статью. Не сталкивались с проблемой, что BrowserFriendly включен, ClearFeed (Russian) выставлен, но фид отображается по-разному в разных браузерах? Вот мой фид, с которым такое приключилось feeds.feedburner.com/k-gayduk

  2. AlonaEco /

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

    1. Andrey / Автор записи

      Для этого можно использовать плагины, например Ozh' Better Feed. В настройках выбираете обрезание «Cut the Feed on „Read more“ links ()» и готово.

  3. seoonly.ru /

    У вас число подписчиков в фидбернере тоже постоянно скачет?

    1. Andrey / Автор записи

      Да, есть такое. Думаю, из-за того, что многие пользуются агрегаторами новостных лент.

Оставить ответ