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

feedburner400
Приветствую Вас уважаемые читатели моего блога! Из сегодняшней статьи Вы узнаете, как сделать форму подписки на обновление блога с помощью популярного сервиса FeedBurner, ну и разумеется научитесь устанавливать форму себе на блог WordPress. И самое интересное в этой статье то, что Вы не просто установите стандартную форму, а сделаете свою форму подписки  feedburner красивой, посмотрев на которую, сразу захочется подписаться и получать новые статьи прямо себе на почту. Кстати, основная задача формы подписки на обновление блога – это сбор контактов (email) посетителей, которым будут приходить автоматически и прямо на указанную почту ваши новые статьи. Таким образом, Вы будите собирать целевую аудиторию своего блога и постоянных читателей. Только представьте себе, что у Вас будет хотя бы 1000 подписчиков на обновление блога. Вы опубликовываете новую статью на блог и через некоторое время эта статья придёт всем подписчикам на почту. Конечно, не вся 1000 аудитория откроет письмо, не все ещё захотят читать, но 300-500 постоянных читателей точно перейдут на блог. А это уже прямой трафик и улучшение поведенческих факторов на сайте, рост позиции самой статьи в поисковой выдаче Яндекса и Google. И вот Вы уже на пол пути к титулу блоггер тысячник!

ВАЖНО! Чтобы ваши подписчики перешли к вам на блог, к ним должна придти не полная статья, а лишь её анонс или часть с ссылкой на ваш блог. Если у статьи будет цепляющий заголовок и мощное начало (анонс) статьи, то подписчик точно захочет прочитать статью полностью и кликнет по ссылке на ваш блог! Для того, чтобы ваши статьи приходили на почту не целиком, а лишь анонсом необходимо проделать определённые действие. Эти действия описаны ниже. Сначала, давайте установим саму форму подписки feedburner.

Пару слов о сервисе feedburner

Немножко про сам сервис feedburner. Этот сервис принадлежит компании Google. И чтобы в нём зарегистрироваться необходимо завести самую безопасную почту в интернете – Gmail, которая также принадлежит Google. Почему я назвал почту Gmail  самой безопасной, узнаете в этой статье. Зарегистрироваться в ней пару пустяков. Кстати, хочу ещё пару слов сказать про сам сервис feedburner. Это сервис рассылает по e-mail  статьи, которые вы пишите на блог, используя RSS ленту. Принцип такой: Вы написали пост в блог  — он попадает в RSS ленту – сервис feedburner отправляет письмо на email подписчика. Дело в том, что RSS ленту можно читать с помощью различных программ. Сам я никакие программы не использую, да и саму RSS ленту не читаю. Я предпочитаю вести свой e-mail адрес в определённую форму, подтвердить подписку, кликнув по специальной ссылке, которая придёт на почту и получать статьи понравившегося автора прямо на почту. Зацепила статья, тогда перехожу на блог и читаю её полностью. Вот и всё. Нам хорошо и автору статьи ещё лучше. Спасибо FeedBurner. Сервис также предоставляет возможность установить счётчик, который будет показывать количество ваших подписчиков. Но я не советую ставить этот счётчик себе на блог, пока у Вас не будет хотя бы 500 подписчиков. За этим показателем Вы сможете следить на сайте самого сервиса.

Делаем форму подписки на обновление блога, с помощью сервиса feedburner

Так, Вы зарегистрировали почту на Gmail. Теперь переходим по вот этой ссылке на сам сервис. http://feedburner.google.com/fb/a/myfeeds

Шаг 1. Если Google запрашивает авторизацию, то введите только что полученный ваш новый email  и пароль. После того как вы авторизовались вся информация на сервисе должна стать на русском языке. Если автоматически это не произошло, то в правом верхнем углу найдите раздел «Languages».

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

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

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

Шаг 2. После авторизации, вы должны видеть следующую страницу. Если Вы ещё не видите, то выберите раздел «Мои Фиды».

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

На этой странице необходимо вести адрес вашего стандартного фида. Если ваш блог на WordPress, то стандартным фидом будет:

— вашсайт.ру/feed

или может быть такой

 — вашсайт.ру/feed/rss

Мой адрес стандартного фида – infosovety.ru/feed

Вводим свой фид в форму «Зажигай фид прямо сейчас» и нажимаем на кнопку «Next».

 

4feed
Шаг 3. На следующей странице нужно придумать название фида и адрес, по которому будет доступен новый RSS канал, созданный через сервис FeedBurner.

5feedburner

Я на скриншоте указал адрес – infosovety. Это значит, что полный адрес на мой RSS канал будет выглядить так: http://feeds.feedburner.com/infosovety

6
Шаг 4. Если придумали, то жмём  на кнопку «Next» пока не попадёте вот на эту страницу.

7

Мы видим четыре страницы: Анализируй, Оптимизируй, Публикуй, Решай проблемы. Сначала, нажимаем на страницу «Оптимизируй». Затем выбираем сервис «BrowserFriendly» и в выпадающем списке ставим русский язык. Мы только что настроили отображение страницы нашего фида на русском языке.

фидбёрнер
Теперь необходимо активировать сервис «SmartFeed».

9ауу
Шаг 5. Так, в разделе «Оптимизируй» больше ничего делать не надо, теперь идём в раздел «Публикуй». В этом разделе мы как раз и получим нашу форму подписки на обновление Feedburner, которую позже мы установи на блог Wordpres. А пока нам необходимо активировать сервис «Подписки по электронной почте», чтобы читатели смогли подписываться, введя свой email.

10фид
После того как вы активируйте сервис «Подписки по электронной почте», будет доступен код формы подписки Feedburner, который нужно будет вставить на блог (виджет или в конце статьи). А также будет доступен код ссылки, которую можно предлагать своим читателям, чтобы они подписались, читая текст статьи.

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

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

11фид 12фф
Теперь копируем весь код формы подписки на обновление и размещаем его на своём блоге WordPress. Обычно, форму FeedBurner размещают в сайдбаре, используя виджеты в панели управления WordPress.

13фид в сайдбаре

Внимание! Перед тем как сохранить виджет, следует удалить ненужный кусок кода, который выводит ссылку на сервис FeedBurner. Это ссылка будет вести на сам сервис, через ваш блог. Если эта ссылка будет стоять на вашем блоге, то вы будите передавать вес главной страницы своего блога. Это уже дебри оптимизации блога на WordPress, и относится к поднятию Тиц сайта и PageRank. Просто уберите эту ссылку. Вашему блогу будет только лучше!

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
Сохраняем Виджет и обновляем страницу блога. Смотрим в сайдбар на нашу форму! По стандарту форма выглядит так:

Карт 14

Карт 15

Как видите, по стандарту, надписи  «Enter your email address» и «Subscribe» выводятся на английском языке. Чтобы это исправить нужно вернуться в раздел «Виджеты» в панели управления контентом WordPress и в коде заменить английские слова на русские. Вы можете ввести любые слова, я ввёл такие:

карт 16

Карт 17

 

В результате на блоге получилось вот так:

Карт 18

Вот теперь форма готова и работает. Можно начинать собирать свою базу подписчиков FeedBurner! Но как видим, наша форма подписки на обновление выглядит не очень красиво. Поэтому предлагаю Вам сделать красивую форму подписки Feedburner на WordPress!

Делаем красивую форму подписки FeedBurner!

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

Вот сам код красивой формы, в которой добавлены стили для кнопки «Подписаться» и для поля «Введите Email». Единственное, что вам необходимо сделать, это заменить определённую часть кода на свою. Чтобы Вам было понятно, что нужно заменить в коде, я написал фразу : «ВАШ КОД». Всего вам нужно будет заменить 2 куска кода на свои. Вам просто нужно подставить адрес фида, который вы придумали и всё! Вставляем этот код в саидбар таким же образом как и старый!

<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('ВАШ КОД', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p><font size="2">Хотите получать новые материалы первым? Введите ваш E-mail в форму ниже:</p>
</font><p><input type="text" style="width:259px;padding-left:5px;" name="email"/></p>
<input type="hidden" value="<ВАШ КОД>" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Получать новые материалы" style="padding:0px;width:220px" /></form>

Напоминание! Я на скриншоте указал адрес – infosovety. Вот мне нужно только вставить свой адрес infosovety вместо ВАШ КОД и всё. Вы такде в коде можете изменить название формы и название кнопки «Получать новые материалы».

карт 19

Ниже находится стили новой формы подписки. Этот код нужно вставить в файл «Таблица стилей» «style.css», который находится в ВНЕШНИЙ ВИД – РЕДАКТОР и в самом низу. Вставьте этот код в самом низу файла и сохраните.

.feedburner_input{
background: none repeat scroll 0 0 #EDEDED;
border: medium none;
box-shadow: -1px -1px 1px #AAAAAD;
color: #AFAFAF;
height: 30px;    box-shadow: -1px -1px 1px #AAAAAD;
— moz-box-shadow:-1px -1px 1px #AAAAAD;
— webkit-box-shadow:-1px -1px 1px #AAAAAD;
— khtml-box-shadow:-1px -1px 1px #AAAAAD;
outline: none; }

.feedburner_submit{
border: 1px solid #FFFFFD;
box-shadow: 1px 1px 5px #AAAAAC;
— moz-box-shadow:1px 1px 5px #AAAAAC;
— webkit-box-shadow:1px 1px 5px #AAAAAC;
— khtml-box-shadow:1px 1px 5px #AAAAAC;
background: #EAECEB;
background: -moz-linear-gradient (top, #ffffff 0%, #EAECEB 100%);
background: -webkit-gradient (linear, left top, left bottom, color-stop (0%,#ffffff), color-stop (100%,#EAECEB));
background: -webkit-linear-gradient (top, #ffffff 0%,#EAECEB 100%);
background: -o-linear-gradient (top, #ffffff 0%,#EAECEB 100%);
background: -ms-linear-gradient (top, #ffffff 0%,#EAECEB 100%);
filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#ffffff', endColorstr='#EAECEB',GradientType=0 );
background: linear-gradient (top, #ffffff 0%,#EAECEB 100%);
clear:both;}

ВНИМАНИЕ! Если форма не отображается после вставки кода из этой статьи, то скопируйте код КОД ФОРМЫ 2!

Всё! Можно проверить! И мы видим красивую форму подписки от сервиса FeedBurner на своём блоге WordPress! Если сама форма выпирает из сайдбара, то в коде сделайте меньший размер поля и всё будет красиво! Вы также можете добавить картинку в сайдбар (как у меня), чтобы форма подписки выглядела ещё притягивающей! Только прошу не брать мою картинку RSS, т.к. я её купил через Фото-Банк.

Карт 20

Карт 21

Итак, нам осталось лишь настроить анонсы писем, которые будут приходить нашим читателям на почту. Но это уже будет в следующей статье! Чтобы её не пропустить подпишитесь на обновление моего блога:)

И последнее, что следует отметить. Ходят слухи, что FeedBurner закрыли, скоро закроют, завтра закроют. Это слухи. Им не всегда можно верить. Тем более это уже говорят года полтора. И пока не закрылся! Для того, чтобы не потерять подписчиков можно использовать специальный приём! Приём заключается в том, что из Feedburner можно импортировать всех подписчиков и переместить их в базу подписчиков SmartResponder или JustClick. Таким образом, Вы не потеряете своих подписчиков. Вот такая получилась огромная статья. Я надеюсь, что она вам поможет создать красивую форму подписки на обновления своего сайта! Если что-то не понятно, то пишите все свои вопросы в комментариях!

Читайте 2 часть как сделать красивую форму подписки Feedburner после статьи?

С уважением, Никита Мельников!

43 thoughts on “Как сделать красивую форму подписки feedburner на WordPress?

  1. Привет!!)) Очень понравился ваш блог!)

    Статья очень полезная, мне пригодится!)

    Если FeedBurner не закроют, то я с радостью перейду на него!!))

    Я только из-за этих слухов поставил сразу Smartresponder!)

    1. Приветствую! Я очень рад, что мой блог Вам понравился, спасибо! В ближайшее время feedburner не закроется. но если это случится, то Вы об этом узнаете. Правильно, Smartresponder должен быть с самого начала существование блога. Просто FB отличается от SR тем, что он автоматически отправляет подписчика анонсы новых статей на блоге. Но в FB нельзя лично контактировать со своими подписчиками, отправлять им свои письма, в отличие от SR. Думаю, что две эти формы не помешают на блоге.

      1. Вот я поставил форму подписки от Smartresponder!)

        Подписались 12 человек, но за полгода ведения блога я ни разу не отправлял письмо!!))

        Поэтому меня привлекает FeedBurner, тем что он автоматически отправляет всем уведомления!!)))

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

          Так поставь и FeedBurner, размести форму в конце статьи, например!

          1. Smartresponder — святое! Он должен быть у всех, а FeedBurner попробую у себя реализовать...

  2. Здравствуйте, Никита! Я, так сказать, первоклассница. Спасибо за статью, пока её читала-вроде бы всё понятно.У меня сайт на WordPress. Подписчиков пока нет.Попробую поставить форму подписки, следуя Вашей инструкции ( хотя не уверена, что смогу это сделать). На Вашу рассылку подписалась.

    1. Попробуйте взять код из текстового документа. Я прикрепил его в статье.

      Строчка:

      ВНИМАНИЕ! Если форма не отображается после вставки кода из этой статьи, то скопируйте код КОД ФОРМЫ 2!

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

      1. А я добавил видео в пост и оно встало на место формы подписки и не удаляется, только вместе с самой формой... http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif

  4. Никита, форма подписки фида для меня прям больная тема. Научи меня плиз, как вставить картинку ЗА форму подписки, за те строчки, где вписываем маил и имя, очень хочу знать, как это делать, а никто не учит.) Просто у многих видела, и так красиво смотрится, вообщем, хочется. http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif

  5. Никита у Вас такая стоит на сайте, только поле для ввода адресса не работает. подписаться можно только если нажать на сам значок RSS. Я Вам об этом уже раньше писал.http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gifhttp://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif

  6. Классная статья, очень помогла, только я так и не смогла вставить код в статью. Спасибо.

  7. Никита, большое спасибо за статью! Три дня искала в инете как вставить подписку. Находила что-то, но то ли рассчитано на более умных (а я полный чайник) ничего не получалось. А сейчас получилось!!!!! Ура! Просто великолепно, очень доступно и подробно написано, Браво!

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

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