Как сделать форму подписки на обновления с помощью FeedBurner: инструкция в картинках

Как сделать форму подписки на обновления с помощью FeedBurner: инструкция в картинках

Как сделать форму подписки по e-mail
Здравствуйте, дорогие читатели блога! Сегодня вы узнаете, как очень просто можно сделать форму подписки через e-mail на обновления блога или сайта с помощью сервиса FeedBurner. То есть когда на сайте будет появляться новая статья, подписчики будут узнавать об этом – им придет электронное письмо на почтовый ящик.

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

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

Все объяснения сделаны на примере WordPress, потому что мой блог работает на этом движке. Если у вас тоже ВордПресс, то инструкция подойдет вам полностью, а если другая CMS – то используйте только ту часть инструкции, которая касается настройки FeedBurner. А работа в админке движка у вас будет своей.

Содержание:

Как зайти на FeedBurner

В интернете есть специальные сервисы, которые помогают собирать базу подписчиков, оформлять рассылку и предоставляют другие возможности. Эти сервисы платные, а новичкам для начала стоит потренироваться на бесплатных интернет-сервисах. Например, на FeedBurner от компании Google можно сделать форму e-mail подписки бесплатно. Вообще этот сервис предназначен для работы RSS-потоками, чтобы подписчики могли читать новости сайта с помощью любых программ, поддерживающих RSS. Но этот же сервис можно применять для того, чтобы подписчики получали уведомление о новых статьях сайта на электронную почту.

Сервис FeedBurner доступен по адресу https://feedburner.google.com/
Он принадлежит компании Google, поэтому для использования этого сервиса сначала нужно создать себе аккаунт в Гугле. Создайте аккаунт и переходите по ссылке, указанной выше. Появится вот такое окно:

Вход в FeedBurner
Здесь нужно авторизоваться, то есть ввести свою электронную почту и пароль. После этого откроется Google FeedBurner:

Выбор языка в FeedBurner
Здесь все на английском, поэтому надо щелкнуть в правом верхнем углу Languages.

Выбираем русский язык
Тут просто выбираем русский.

Как «зажечь» фид

Зажигаем фид
Теперь интерфейс отображается на русском языке. В поле Зажигай фид надо ввести адрес своего сайта или блога и нажать кнопку Next.

Источник фида
Если у вас один источник фида, то такое окошко у вас не отобразится. У меня оказалось два источника, поэтому я выбираю первый, который Лента (просто Лента, НЕ касающаяся комментариев).

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

Закладка «Оптимизируй»

Оптимизируй
Теперь нужно перейти на закладку Оптимизируй. На этой закладке нам понадобятся следующие пункты:

  • BrowserFriendly;
  • Feed Image Burner;
  • Summary Burner.

А теперь об этих пунктах по порядку:

Browser Friendly
Сначала в левом меню щелкаем на BrowserFriendly, здесь в поле Тема выбираем ClearFeed (Russian) и нажимаем Сохранить.

Картинка для фида
Теперь в левом меню щелкаем на Feed Image Burner. Здесь можно выбрать изображение-логотип для своего фида. Если вы хотите задать изображение, то нажмите Активировать. Картинка здесь задается с помощью URL-адреса, то есть она должна быть загружена на ваш сайт.

Для этого надо перейти в панель администратора WordPress:

Добавляем картинку
Здесь в левом меню следует выбрать пункт Медиафайлы, нажать на кнопку Добавить новый, а затем на кнопку Выберите файлы. Нужно выбрать картинку размером не более 144 пикселя в высоту или ширину. У загруженного файла надо скопировать URL:

URL картинки
Теперь возвращаемся к Feed Image Burner и заполняем поля:

Настройка картинки
В поле Image Source из выпадающего списка выбираем Specify custom image URL. А в следующем поле вставляем только что скопированную ссылку на URL картинки. В поле Image Title можно ввести любой текст, который будет показан читателю, если картинку не удалось отобразить. Я вписал logo. В поле Link нужно указать адрес своего сайта, и тогда картинка будет содержать ссылку на ваш сайт. После всех этих действий нажимаем Сохранить.

Теперь в левом меню надо щелкнуть на Summary Burner:

Summary Burner
Здесь в поле Maximum Length нужно указать количество символов, которые будут отображаться в фиде. Этот параметр требуется указывать в случае, если у вас в фид попадает вся статья. Но я рекомендую изменить настройки своего сайта так, чтобы в фид попадал только анонс статьи. Далее я покажу, как это делается. А сейчас в поле Teaser надо ввести текст, который будет видеть читатель после анонса, например, такой: «Чтобы прочитать статью полностью, щелкните по заголовку». Затем нужно нажать на кнопку Активировать (если сервис неактивен) либо Сохранить (если сервис активен).

А вот что необходимо сделать, чтобы отображались только анонсы. Нужно опять зайти в админку своего сайта или блога на WordPress, в левом меню выбрать Настройки – Чтение. Найти пункт Для каждой статьи в RSS-ленте отображать, выбрать Анонс и сохранить изменения:

Анонс

Закладка «Публикуй»

После этого возвращаемся в FeedBurner, переходим на закладку Публикуй и в левом меню выбираем Подписки по электронной почте:

Публикуй
Эту услугу нужно активировать, просто нажав на кнопку Активировать. Появятся дополнительные поля и надписи:

Подписка по e-mail
В поле Language выбираем Русский язык. Также нужно поставить галочку возле Отправлять мне письмо, когда человек отписывается от рассылки.

Еще на этой странице есть HTML-код формы подписки. Он нам позже пригодится, чтобы поставить эту форму на свой блог.

А пока продолжим настройку. В левом меню надо выбрать Communication Preferences:

Настройка подписки
В поле Email “Relpay-To” Adress нужно указать свой почтовый ящик, на который вы хотите получать письма от подписчиков. Если ваш подписчик, получив анонс статьи, захочет написать вам ответ и нажмет кнопку «Ответить», то именно этот почтовый ящик и отобразиться в строке «Кому».

В Теле письма надо написать сообщение для подписчика, чтобы он подтвердил подписку по e-mail. У меня написано следующее:

Приветствую вас, уважаемый читатель!
Вы только что оформили подписку на получение новых статей с блога «Креатив-Позитив». Для того чтобы подтвердить подписку, пожалуйста, перейдите по ссылке:
${confirmlink}
(Если ссылка не открывается по щелчку, то скопируйте ее в адресную строку браузера и нажмите "Enter")

Когда нужные поля заполнены, надо нажать Сохранить. Далее переходим в левом меню на пункт Email Branding:

Картинка в письме
В поле Тема/Название письма нужно указать ${latestItemTitle}

Это означает, что в качестве темы письма будет использоваться заголовок новой статьи вашего блога или сайта.

Далее, в поле URL логотипа надо указать URL-адрес картинки, которая будет логотипом. Можно использовать тот же самый адрес, который мы указывали в пункте Feed Image Burner (хотя здесь уже разрешен размер картинки 200 на 200 пикселей). При желании здесь можно отредактировать шрифт и размер текста. После всех изменений нажимаем Сохранить.

После этого следует перейти в левом меню на пункт Delivery Options и настроить время отправки писем. Я выбрал Часовой пояс – Москва, а время доставки – 9–11 часов утра. Выбирайте на свое усмотрение:

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

Счетчик

Как сделать форму e-mail подписки

Когда основные настройки подписки по электронной почте уже сделаны, нужно вернуться к пункту Subscription Management  и скопировать HTML-код формы подписки:

Код формы подписки
Этот код нужно будет разместить на блоге или сайте. Удобнее всего располагать его в сайдбаре (боковом меню сайта). Для этого опять переходим в админку WordPress и в меню выбираем Внешний вид – Виджеты:

Виджеты
Здесь надо щелкнуть надпись HTML-код, выбрать Главная боковая колонка и нажать Добавить виджет:

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

Код формы подписки по e-mail
Вот так на данном этапе будет выглядеть форма подписки на сайте:

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

Для этого сначала требуется сделать небольшой подготовительный этап: выбрать пункт Внешний вид – Редактор и щелкнуть на файл Таблица стилей:

Таблица стилей
Я использую дочернюю тему, поэтому на картинке вы видите, что у меня отображается только 2 файла темы. В Таблице стилей нужно добавить новый класс smalltext1, задав для него размер шрифта поменьше (88%) и серый цвет. То есть в самом конце просто дописать такой код:

.smalltext1 {
font-size: 88%;
color: #505050;
}

После этого надо снова вернуться к виджетам (в меню Внешний вид – Виджеты), чтобы редактировать Содержимое:

Редактирование кода
Вот такой код я вставил в Содержимое:

<form style="background-color: #EDF4FF;border:1px solid #ccc;padding:10px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=*******', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><strong>Хотите получать обновления блога по электронной почте?</strong><br /> Введите свой e-mail:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="*******" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Подписаться на обновления" /><div class="smalltext1">*Нажимая на кнопку «Подписаться на обновления», я даю согласие на рассылку, обработку персональных данных и соглашаюсь с <a title="Политика конфиденциальности" href="" target="_blank" rel="noopener">Политикой конфиденциальности</a>.</div></form>

Обратите внимание, что в вышеуказанном коде я обозначил звездочками адрес моего фида. Вам нужно вставить СВОИ данные. Чтобы вам было понятно, что именно в своем HTML-коде необходимо поменять, посмотрите на следующую картинку:

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

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

После сохранения на вашем сайте отобразится вот такая форма подписки:

Красивая форма подписки
Кстати, класс smalltext1 нужен для того, чтобы текст после звездочки отображался мелким и серым.

Теперь, когда ваши читатели будут вводить свой e-mail и нажимать на кнопку Подписаться на обновления, они будут видеть такое окно от FeedBurner, в котором они будут вводить Captcha и завершать оформление запроса:

Запрос на подписку
Когда подписчики подтвердят подписку через ссылку в письме, они будут получать анонсы статей вашего блога или сайта. Примерно так будут выглядеть письма с анонсами:

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

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

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

*Нажимая на кнопку, вы соглашаетесь с Политикой конфиденциальности.