Как настроить 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
Опубликовать в Одноклассники

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    The feed does not have subscriptions by email enabled

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

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

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

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

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

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

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

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

    The feed does not have subscriptions by email enabled

    из-за чего?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Comments are closed.