Как настроить Feedburner и установить красивую форму email-подписки

email-подписка на вордпрессВнимание! Вышла новая статья для тех, кто хочет установить форму подписки на рассылку в Джастклике или Смартреспондере.

4 красивые формы + видеоурок по установке смотрите здесь.

Здравствуйте, друзья!

Буквально на днях настроил на своем WordPress блоге email-подписку через сервис Feedburner. Честно говоря, делать этого я не собирался. Было лень разбираться, да и смысла особого я в том Фидбернере  не видел.

У меня уже стояла форма подписки на email от Smartresponder, и, казалось бы, зачем ставить что-то еще?

Тем не менее, как выяснилось, у Смартреспондера есть один недостаток: он не умеет уведомлять подписчиков о новых статьях на блоге в автоматическом режиме (по крайней мере, я такой опции там не нашел). Только, если рассылку зарядить статьями наперед.

А что делать, если наперед заряжать нечем, да и не зачем? Вот тут то и оно. Придется тогда отправлять людям уведомления вручную. А это, согласитесь, не очень удобно.

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

Чуть позже оказалось, что настраивается Фидбернер элементарно. Буквально за пять минут и без специальных плагинов. Правда, это только в случае с email-подпиской.

В случае с RSS я не знаю, так как не пробовал.

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

Вот, как она выглядит.

7Хотите разобраться, как настроить Фидбернер и поставить себе на блог такую же форму подписки? Специально для того, чтобы показать вам, как это делается, я записал видеоурок, который вы можете посмотреть ниже.

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

Код формы подписки расположен под видео.

Перейти к настройке Фидбернера вы можете по адресу feedburner.google.com.

1. Код для вставки в  файл темы single.php (в конце поста) или comments.php (в самом начале файла)

Префикс blogrudneva, расположенный в двух местах кода, нужно заменить на свой. Префикс – это то, что идет на конце адреса вашего фида. Например: http://feeds.feedburner.com/ blogrudneva. Не замените - форма будет работать не правильно!

<div id="mbt-sub-box">

<h1>Узнавайте О Новых Статьях По Почте</h1>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogrudneva&amp;;#39;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input onfocus="if (this.value == &quot;Введите Ваш Email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Введите Ваш Email...&quot;;}" type="text" name="email" value="Введите Ваш Email..." size="30" />

<input type="hidden" name="uri" value="blogrudneva" /> <input type="hidden" name="loc" value="en_US" />

<input type="submit" value="Подписаться" /></form></div>

2. Код для вставки в файл темы style.css (можно вставить в начале или конце файла)

За цвет фона формы отвечает вторая строчка кода:

background: #1A2638;

Цвет можно изменить на любой другой. Найти код подходящего цвета можно в цветах Яндекса.

#mbt-sub-box {
background: #1A2638;
color: #1A2638;
border: 1px solid #1A2638;
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: -moz-linear-gradient(top, #333, #1A2638);
}

#mbt-sub-box input {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1A2638));
border: medium none;
color: #1A2638;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 white;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#mbt-sub-box .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#369A18), to(#205F0D));
background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;
color: gray;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px black;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#mbt-sub-box h1 {
margin-top: 5px;
color: white;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px black;
line-height: 35px;

}

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

Так что ставьте это дело и себе. А если что-то будет не получаться, пишите в комментариях, постараюсь помочь, чем смогу.

С уважением, Константин Руднев

Поделитесь статьей

Опубликовать в LiveJournal
Опубликовать в Одноклассники

Что еще можно почитать?


80 комментариев

  1. 20.09.2012 в 10:17

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

  2. Костя Руднев
    20.09.2012 в 11:56

    Очень рад, что понравилось=)

  3. 05.10.2012 в 21:13

    Здравствуйте, у меня проблема с кодировкой

    • Костя Руднев
      06.10.2012 в 00:06

      Кодировку нужно во всех редактируемых файлах, где есть слова на русском, указывать в utf-8 без BOM

  4. 28.10.2012 в 20:46

    Константин,подскажите как настроить форму подписки для виджета.

    • Костя Руднев
      28.10.2012 в 21:00

      Здравствуйте, нужно первый код вставить в текстовый виджет и разместить в соответствующей колонке.

      Только эта форма вряд ли подойдет — она широкая, будет некрасиво, я думаю. Нужно другие поискать

  5. 30.10.2012 в 16:20

    Отличная статья! Спасибо! Я вот только хотела спросить, куда нужно вставить код FeedBurner, чтобы рассылка находилась в конце каждой статьи. К сожалению, пока у меня это не получается :( Может с Вашей помощью получится =)

    • Костя Руднев
      30.10.2012 в 17:07

      Нужно вставить либо в самом начале comments.php либо лучше в single.php — туда, где заканчивается пост

      • 31.10.2012 в 20:19

        Странные дела творятся:
        Ставлю код в конце single.php (перед последним закрывающим тегом) — форма подписки сдвигает все виджеты и становится на первое место. Текст статьи при этом располагается поверх формы.

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

  6. 30.10.2012 в 23:09

    Класс! То, что нужно! Только собирался искать, как такую форму сделать, а тут уже все готово и разжевано.
    Спасибо!
    Пока не сделаю такую у себя — эта страница на панели «избранного».

  7. 31.10.2012 в 21:35

    Константин, при настройке формы вынужден был сделать себе комментарии в css — какой блок за какую часть формы отвечает.
    Никогда не учил английского и определял это опытным путем — изменением ширины, цвета, размеров шрифта и т.п.
    Для таких «специалистов», как я, было бы очень удобно, если в исходный код, размещенный выше, добавить комментарии типа:
    /* тело формы */
    #mbt-sub-box {
    …..

    /* окно ввода мыла */
    #mbt-sub-box input {
    …..

    • Костя Руднев
      31.10.2012 в 22:20

      Ну что тут сказать? Видимо форма не универсальна для всех шаблонов.

      По поводу css не знаю, я использовал готовый блок.

      По поводу вставки кода в single php — тут надо не в конец вставлять, а в том месте файла, который отвечает за конец поста. Где-нибудь после ‘Edit this entry’ или до < ?php comments_template(); ?> если есть такой

      • 31.10.2012 в 22:38

        Спасибо!!! Форма встала на место! :-D
        Поставил между и

        Ну и до шаблона все же как-нибудь надо добраться и довести его до ума. Или подобрать подходящий.

  8. 31.10.2012 в 22:59

    теги скрылись…
    вставил между __ и __

  9. 07.11.2012 в 16:05

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

    • 07.11.2012 в 16:38

      Меняется всё. Я добивался даже отсутствия фона. Честно признаться, такой эффект я получил не намеренно, но всё же убедился, что все цвета благополучно меняются. Проблемой было только подобрать более-менее сочетающиеся цвета.

  10. Елена
    13.12.2012 в 18:41

    Здравствуйте, Костя! Спасибо Вам за этот урок! Только вот мне бы хотелось, чтобы форма подписки была расположена в сайдбаре. Как это можно устроить, не подскажите? А можно ли еще расположить ее только после некоторых определенных постов? Спасибо!

    • Костя Руднев
      13.12.2012 в 19:36

      Здравствуйте Елена.

      Расположить можно, но только не эту форму: она большая и не влезет, хотя если размер в CSS как-то задать, то может и получиться. Попробуйте изменить размер везде, где указано «width», Уменьшите его.

      По поводу отдельных постов не знаю =)

  11. 02.01.2013 в 13:04

    все бы ничего да только русский текст квадратиками и в нотебад вставлял и сохронял в кодировке utf-8 без BOM *CRAZY* вообщем никак

    • Костя Руднев
      02.01.2013 в 19:09

      Текст нужно не изменить на utf-8 без BOM, а «преобразовать» в utf-8 без BOM. Лучше сначала выделите весь текст в файле и преобразуйте. После этого вставляйте код и свой текст пишите на русском.

  12. 17.01.2013 в 14:17

    Никак не получается регистрация в FeedBurner.
    Пытался обратиться в службу поддержки но получил: » Справочный центр в настоящее время недоступен на вашем языке.»

  13. игорь
    08.02.2013 в 10:30

    как поменять вот эту надпись «Enter your email address:»

    • Костя Руднев
      08.02.2013 в 12:34

      В коде посмотреть надо. Откройте notepad и проверьте эту фразу

  14. 10.02.2013 в 10:05

    Костя, все сделала, как описано, все так понятно, вроде бы Вами описано.
    Цвет поменяла, как Вы указали, поставила оранжевый, а отображается фон белый, а заголовок красный… Непонимаю, почему…
    И как можно отрегулировать отступ на странице, какими средствами? У меня форма прижалась к кнопкам соцсетей, некрасиво…
    Можете подсказать ответы на мои вопросы? Буду очень благодарна =) .

    • Костя Руднев
      10.02.2013 в 17:25

      отступ можно задать тегом /br, только его нужно взять с двух сторон в эти ковычки (на клавиатуре обычно это кнопки б и ю) а вот с цветом не знаю, нужно самому экспериментировать, потому что в разных браузерах будет показываться по разному. Если вы в Опере, то все должно быть нормально, если в других браузерах, то возможны отклонения. Кстати сайт очень красивый=)

  15. Марина
    13.02.2013 в 23:12

    Здравствуйте. Фон моей подписки почему-то белого цвета, а не такой как у вас. С чем это может быть связано?

    • Костя Руднев
      13.02.2013 в 23:56

      в разных браузерах показывается по разному

  16. Валерий
    20.02.2013 в 17:17

    FeedBurner вроде как закрывается и новые сайты уже не добавляются. Google купил и убил очередной сервис.

  17. Здравствуйте! Сделал все как написано, но каракули появились. Переделал кодировку на Utf 8, после вместо каракулей, появились вопросы. Почему может такое быть? Спасибо!

    • Костя Руднев
      21.03.2013 в 12:03

      Кодировка utf8 без bom нужна

  18. 28.03.2013 в 16:47

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

    • Костя Руднев
      28.03.2013 в 17:41

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

  19. 09.04.2013 в 16:52

    Фидбанер уже не работает. А как можно сделать форму подписки например для смартреспондера?

    • Костя Руднев
      09.04.2013 в 20:55

      Постараюсь в ближайшее время заняться этим вопросом

  20. 16.04.2013 в 14:56

    Жаль, что в статье не приведены картинки самих форма. Когда ищешь КРАСИВУЮ форму, прежде всего хочется воочию ее увидеть, и если она понравится тогда уж и статью читать.

    • Костя Руднев
      16.04.2013 в 16:20

      эта форма болтается у меня в конце каждого поста=)

  21. 11.05.2013 в 14:03

    Отличный урок, Костя =) Именно такую форму я и хотела. Получилось всё с первого раза, несказанно рада, спасибо!

  22. Bahus
    14.05.2013 в 20:50

    Узнавайте О Новых Статьях По Почте :-!
    Вам нравится такой вариант написания фразы? Каждое слово с большой буквы. Уважаемый, это русский язык, а не аборигенский.

  23. 27.05.2013 в 19:28

    Просто класс :P только что когда подписываешься на английском выскакивает( :(

  24. 04.06.2013 в 20:54

    Это черная подписка под постом? Мне такая не нравиться, я хочу красивую картинку в сайт баре. =)

  25. 18.06.2013 в 15:35

    Модифицировала ваш код под свой дизайн)) долго игралась с подбором цвета. Если кому надо, могу сбросить )) а то часа три гугления выявили, что ваш код наиболее актуальный.

  26. 22.07.2013 в 22:09

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

  27. Саня
    12.09.2013 в 14:25

    Здравствуйте.
    Скажите, а можно дополнить форму подписки?
    Вставить в «Подписаться» ссылку на скачивание с задержкой 5 сек.

    • Костя Руднев
      12.09.2013 в 15:22

      все можно, но я не знаю как

  28. 13.10.2013 в 02:07

    Константин, хочу такую форму подписки и специально искал через поисковик… Сегодня воскресенье — буду отдыхать. А на днях займусь и Ваша статья очень пригодится — беру в закладки.
    Подписался на обновления…
    Удачи. 8)

  29. 10.11.2013 в 17:20

    Установил, настроил на блоге в сайдбаре по адресу: http://liwihelp.ru. Спасибо за подробную инструкцию!

  30. 30.11.2013 в 02:01

    Спасибо, Константин, тоже уже давно собиралась подключить фидбернер и подписку на новости блога, но не знала, как, теперь все понятно, очень доступно рассказано и показано — без вопросов. Еще раз благодарю =)

  31. 18.12.2013 в 13:01

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

  32. 03.03.2014 в 15:31

    Ребят, настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :

    The feed does not have subscriptions by email enabled

  33. 09.03.2014 в 02:39

    Добрый день.Очень полезная статья.Вот только маленький вопросик:на bloggerе можно эту форму поставить?
    Заранее благодарен

    • Костя Руднев
      09.03.2014 в 15:21

      Точно такую же вряд ли

  34. 09.03.2014 в 23:13

    Спасибо за ответ.Печально :(

  35. 10.03.2014 в 19:05

    Получилось!!!!Точно такую же. =)

  36. 30.03.2014 в 11:24

    Костя, спасибо огромное, за подробный урок! *IN LOVE* *IN LOVE* Буду сейчас пробовать преображать свою форму подписки и вставлять ее в статьи. А то она у меня только в сайдбаре стоит.
    Еще хотелось бы узнать, как можно вставить картинку в форму подписки, не подскажите ?

    • Костя Руднев
      30.03.2014 в 13:34

      можно сделать, но для этого надо поковыряться в css

  37. А где можно посмотреть конечный результат описанной выше формы?

    • Костя Руднев
      15.04.2014 в 17:19

      внизу под статьей

  38. 05.05.2014 в 20:35

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

    • Костя Руднев
      06.05.2014 в 01:12

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

  39. 24.07.2014 в 10:12

    Спасибо большое за форму, Константин! Видеоурок понятный и полезный! Всё получилось! Только вот вопрос, как поменять цвет именно кнопки подписаться, а то когда задаёшь другой цвет, меняется цвет окна «введите емейл» и одновременно цвет кнопки подписаться?
    Какая часть кода отвечает именно за цвет кнопки «подписаться»?

  40. 24.07.2014 в 10:14

    Увидел, что тут пишут, что фидбёрнер закрывается и не работает! Чушь! Уже как год закрывают! И всё работает, пока..

  41. 24.07.2014 в 11:56

    Я настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :

    The feed does not have subscriptions by email enabled

    из-за чего?

  42. 27.07.2014 в 14:34

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

  43. 29.07.2014 в 16:58

    Я думаю, что в ближайшее время фид не уберут. В любом случае всех подписчиков можно переместить на смартреспондер или джаст клик!

  44. 25.11.2014 в 21:18

    Спасибо за форму подписки ;)

  45. 17.12.2014 в 09:46

    Спасибо за урок. Я бы еще хотела картинку в форме подписки, не могли бы вы показать как это осуществить?

    • Костя Руднев
      17.12.2014 в 18:09

      к сожалению, пока нет — не хватает знаний

  46. 18.01.2015 в 18:37

    Все встало отлично, спасибо автору! Даже париться не стал, подправил CSS к цветам своего блога и все, окей! Спасибо!
    Единственная фигня у меня в всплывающем окне подписки, никак не пойму — в тексте

    «…will receive a verification message once you submit this form. FeedBurner activates your subscription to “” once you respond to this verification message.»

    в кавычках, где по идее должно быть написано на что ты подписываешься ничего нет. Где я обшибся, не подскажете? Спасибо

  47. 30.01.2015 в 21:08

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

    • Костя Руднев
      30.01.2015 в 22:31

      с помощью плагина можно кнопки поставить, остальное — это просто разместить последовательно в single.php

  48. 31.01.2015 в 06:21

    В моей теме на вордпрессе нет singl.php. Надо поискать в других файликах на досуге =)
    А смайлики под комментариями это какой то плагин?

    • Костя Руднев
      31.01.2015 в 19:02

      single.php есть в каждой теме вордпресс. Остальное гугл в помощь

  49. Павел
    11.03.2015 в 01:04

    Здравствуйте! Объясните, почему в FeedBurner не отображается количество подписчиков, то-есть, при добавления нового подписчика в FeedBurner отображается постоянно ноль подписчиков.

  50. 23.03.2015 в 15:12

    Спасибо за урок! Только вот на прошлом блоге когда устанавливал фид, забыл пароль аккаунта Google и все подписчики остались там, а восстановить не получается.

  51. 10.04.2015 в 19:49

    Спасибо за информацию! Будем пробовать!))

  52. 21.08.2015 в 21:48

    Спасибо за урок, постараюсь сделать подписную форму по вашему методу, а то моя пока еще простенькая.

  53. Юрий
    23.10.2015 в 22:05

    У тебя все хорошо показано и рассказано,но это все хорошо если есть своя страничка,а если ее нет,что делать тогда?

  54. 08.06.2016 в 23:26

    Нашли решение этой проблемы? :(

  55. 16.07.2016 в 22:25

    Спасибо, у меня всё получилось.

  56. 13.05.2017 в 17:59

    Дело в том, что далеко не все посетители знакомы с ридерами, а электронная почта это банально и просто даже для полнейших чайников. Поэтому настраиваем возможность получения новостей через E-mail, ну прям таки в обязательном порядке. Итак, для начала нам необходимо будет открыть вкладку Публикуй и выбрать в левой колонке пункт под названием Подписки по электронной почте . Не пойму почему счетчик фидбернер показывает среднее число подписчиков а не общее. Как установить общее число подписавшихся?

Комментировать


Konstantin Rudnev's Blog © 2013. All rights reserved
Ribbon Maker