Внимание! Вышла новая статья для тех, кто хочет установить форму подписки на рассылку в Джастклике или Смартреспондере.
4 красивые формы + видеоурок по установке смотрите здесь.
Здравствуйте, друзья!
Буквально на днях настроил на своем WordPress блоге email-подписку через сервис Feedburner. Честно говоря, делать этого я не собирался. Было лень разбираться, да и смысла особого я в том Фидбернере не видел.
У меня уже стояла форма подписки на email от , и, казалось бы, зачем ставить что-то еще?
Тем не менее, как выяснилось, у Смартреспондера есть один недостаток: он не умеет уведомлять подписчиков о новых статьях на блоге в автоматическом режиме (по крайней мере, я такой опции там не нашел). Только, если рассылку зарядить статьями наперед.
А что делать, если наперед заряжать нечем, да и не зачем? Вот тут то и оно. Придется тогда отправлять людям уведомления вручную. А это, согласитесь, не очень удобно.
Поэтому вдобавок к подписке от Смартреспондера я решил настроить еще и Фидбернер, который как раз таки и сделан для того, чтобы автоматически сообщать подписчикам о новых статьях на блоге.
Чуть позже оказалось, что настраивается Фидбернер элементарно. Буквально за пять минут и без специальных плагинов. Правда, это только в случае с email-подпиской.
В случае с RSS я не знаю, так как не пробовал.
Ну, а чтобы моя подписная форма бросалась в глаза (иначе, какой от нее толк?), я решил еще немного поковыряться в интернете и в итоге отыскал специальный код, который преобразует стандартную форму в весьма оригинальную.
Вот, как она выглядит.
Хотите разобраться, как настроить Фидбернер и поставить себе на блог такую же форму подписки? Специально для того, чтобы показать вам, как это делается, я записал видеоурок, который вы можете посмотреть ниже.
Чтобы все было видно хорошо, рекомендую смотреть видео в высоком качестве и полном экране. Если видео подтормаживает, дайте ему немного подгрузиться.
Код формы подписки расположен под видео.
Перейти к настройке Фидбернера вы можете по адресу .
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&;#39;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input onfocus="if (this.value == "Введите Ваш Email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Введите Ваш Email...";}" 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;}
После успешной настройки Фидбернера я прошелся по более-менее крупным блогам и еще раз убедился, что не зря потратил время: на всех блогах есть свои формы подписки.
Так что ставьте это дело и себе. А если что-то будет не получаться, пишите в комментариях, постараюсь помочь, чем смогу.
С уважением, Константин Руднев
Константин, хочу выразить Вам огромную благодарность за такой подробный урок! Теперь наконец-то у меня красивая форма подписки. Спасибо!
Очень рад, что понравилось=)
Здравствуйте, у меня проблема с кодировкой
Кодировку нужно во всех редактируемых файлах, где есть слова на русском, указывать в utf-8 без BOM
Константин,подскажите как настроить форму подписки для виджета.
Здравствуйте, нужно первый код вставить в текстовый виджет и разместить в соответствующей колонке.
Только эта форма вряд ли подойдет — она широкая, будет некрасиво, я думаю. Нужно другие поискать
Отличная статья! Спасибо! Я вот только хотела спросить, куда нужно вставить код FeedBurner, чтобы рассылка находилась в конце каждой статьи. К сожалению, пока у меня это не получается
Может с Вашей помощью получится 
Нужно вставить либо в самом начале comments.php либо лучше в single.php — туда, где заканчивается пост
Странные дела творятся:
Ставлю код в конце single.php (перед последним закрывающим тегом) — форма подписки сдвигает все виджеты и становится на первое место. Текст статьи при этом располагается поверх формы.
Ставлю код после последнего тега — форма подписки отображается на том же месте (как в первом случае), но при этом высота ее настолько маленькая, что форма опознается только по цвету. Виджеты сиротливо выстраиваются в колонку после формы отправки комментария.
Класс! То, что нужно! Только собирался искать, как такую форму сделать, а тут уже все готово и разжевано.
Спасибо!
Пока не сделаю такую у себя — эта страница на панели «избранного».
Константин, при настройке формы вынужден был сделать себе комментарии в css — какой блок за какую часть формы отвечает.
Никогда не учил английского и определял это опытным путем — изменением ширины, цвета, размеров шрифта и т.п.
Для таких «специалистов», как я, было бы очень удобно, если в исходный код, размещенный выше, добавить комментарии типа:
/* тело формы */
#mbt-sub-box {
…..
/* окно ввода мыла */
#mbt-sub-box input {
…..
Ну что тут сказать? Видимо форма не универсальна для всех шаблонов.
По поводу css не знаю, я использовал готовый блок.
По поводу вставки кода в single php — тут надо не в конец вставлять, а в том месте файла, который отвечает за конец поста. Где-нибудь после ‘Edit this entry’ или до если есть такой
Спасибо!!! Форма встала на место!
Поставил между и
Ну и до шаблона все же как-нибудь надо добраться и довести его до ума. Или подобрать подходящий.
теги скрылись…
вставил между __ и __
Спасибо Вам за полезный урок! Форму подписки настроил,а изменить фон невозможно,цвет не меняется при другом коде цвета.
Меняется всё. Я добивался даже отсутствия фона. Честно признаться, такой эффект я получил не намеренно, но всё же убедился, что все цвета благополучно меняются. Проблемой было только подобрать более-менее сочетающиеся цвета.
Здравствуйте, Костя! Спасибо Вам за этот урок! Только вот мне бы хотелось, чтобы форма подписки была расположена в сайдбаре. Как это можно устроить, не подскажите? А можно ли еще расположить ее только после некоторых определенных постов? Спасибо!
Здравствуйте Елена.
Расположить можно, но только не эту форму: она большая и не влезет, хотя если размер в CSS как-то задать, то может и получиться. Попробуйте изменить размер везде, где указано «width», Уменьшите его.
По поводу отдельных постов не знаю
все бы ничего да только русский текст квадратиками и в нотебад вставлял и сохронял в кодировке utf-8 без BOM
вообщем никак
Текст нужно не изменить на utf-8 без BOM, а «преобразовать» в utf-8 без BOM. Лучше сначала выделите весь текст в файле и преобразуйте. После этого вставляйте код и свой текст пишите на русском.
Никак не получается регистрация в FeedBurner.
Пытался обратиться в службу поддержки но получил: » Справочный центр в настоящее время недоступен на вашем языке.»
как поменять вот эту надпись «Enter your email address:»
В коде посмотреть надо. Откройте notepad и проверьте эту фразу
Костя, все сделала, как описано, все так понятно, вроде бы Вами описано.
.
Цвет поменяла, как Вы указали, поставила оранжевый, а отображается фон белый, а заголовок красный… Непонимаю, почему…
И как можно отрегулировать отступ на странице, какими средствами? У меня форма прижалась к кнопкам соцсетей, некрасиво…
Можете подсказать ответы на мои вопросы? Буду очень благодарна
отступ можно задать тегом /br, только его нужно взять с двух сторон в эти ковычки (на клавиатуре обычно это кнопки б и ю) а вот с цветом не знаю, нужно самому экспериментировать, потому что в разных браузерах будет показываться по разному. Если вы в Опере, то все должно быть нормально, если в других браузерах, то возможны отклонения. Кстати сайт очень красивый=)
Здравствуйте. Фон моей подписки почему-то белого цвета, а не такой как у вас. С чем это может быть связано?
в разных браузерах показывается по разному
FeedBurner вроде как закрывается и новые сайты уже не добавляются. Google купил и убил очередной сервис.
Здравствуйте! Сделал все как написано, но каракули появились. Переделал кодировку на Utf 8, после вместо каракулей, появились вопросы. Почему может такое быть? Спасибо!
Кодировка utf8 без bom нужна
Здравствуйте! Я делала форму подписки на обновления сайта по вашему уроку и коды брала так же с вашего сайта. Но почему то форма получилась некрасивая и еще и не работает.Не смогли бы Вы помочь разобраться, в чем дело? Мне бы хотелось тоже такую симпатичную форму подписки, наподобие вашей?
возможно проблемы с фидбернером, вроде говорят, что он не работает. А с отображением формы вообще не понятно, признаюсь честно, в разных бразурах и ра разных сайтах по разному. Нужно допиливать код в css под свои нужды
Фидбанер уже не работает. А как можно сделать форму подписки например для смартреспондера?
Постараюсь в ближайшее время заняться этим вопросом
Жаль, что в статье не приведены картинки самих форма. Когда ищешь КРАСИВУЮ форму, прежде всего хочется воочию ее увидеть, и если она понравится тогда уж и статью читать.
эта форма болтается у меня в конце каждого поста=)
Отличный урок, Костя
Именно такую форму я и хотела. Получилось всё с первого раза, несказанно рада, спасибо!
Узнавайте О Новых Статьях По Почте
Вам нравится такой вариант написания фразы? Каждое слово с большой буквы. Уважаемый, это русский язык, а не аборигенский.
Просто класс
только что когда подписываешься на английском выскакивает( 
Это черная подписка под постом? Мне такая не нравиться, я хочу красивую картинку в сайт баре.
Модифицировала ваш код под свой дизайн)) долго игралась с подбором цвета. Если кому надо, могу сбросить )) а то часа три гугления выявили, что ваш код наиболее актуальный.
Добрый день, добрые люди!
Подскажите, пожалуйста, как изменить язык, когда подписываешься, с английского на русский.
Заранее благодарен!
Здравствуйте.
Скажите, а можно дополнить форму подписки?
Вставить в «Подписаться» ссылку на скачивание с задержкой 5 сек.
все можно, но я не знаю как
Константин, хочу такую форму подписки и специально искал через поисковик… Сегодня воскресенье — буду отдыхать. А на днях займусь и Ваша статья очень пригодится — беру в закладки.
Подписался на обновления…
Удачи.
Установил, настроил на блоге в сайдбаре по адресу: . Спасибо за подробную инструкцию!
Спасибо, Константин, тоже уже давно собиралась подключить фидбернер и подписку на новости блога, но не знала, как, теперь все понятно, очень доступно рассказано и показано — без вопросов. Еще раз благодарю
Спасибо, тезка, за классную статью. Поставил себе на блог форму — выглядит шикарно. Удачи и процветания!
Ребят, настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :
The feed does not have subscriptions by email enabled
Добрый день.Очень полезная статья.Вот только маленький вопросик:на bloggerе можно эту форму поставить?
Заранее благодарен
Точно такую же вряд ли
Спасибо за ответ.Печально
Получилось!!!!Точно такую же.
Костя, спасибо огромное, за подробный урок!
Буду сейчас пробовать преображать свою форму подписки и вставлять ее в статьи. А то она у меня только в сайдбаре стоит.
Еще хотелось бы узнать, как можно вставить картинку в форму подписки, не подскажите ?
можно сделать, но для этого надо поковыряться в css
А где можно посмотреть конечный результат описанной выше формы?
внизу под статьей
Здравствуйте!
Огромное спасибо за урок — единственный после которого у меня что-то получилось!
Немного поменяла цвета и все отлично!
Единственный вопросик — в хроме, где я делала подписку на сайте все отображается нормально.
А в другом браузере, то есть там где я на сайте как посетитель, формы нет. В чем может быть проблемка?
Заранее спасибо!
у меня в браузерах также форма отображается по-разному. Тут есть свои косяки, увы, я пока сам не разобрался
Спасибо большое за форму, Константин! Видеоурок понятный и полезный! Всё получилось! Только вот вопрос, как поменять цвет именно кнопки подписаться, а то когда задаёшь другой цвет, меняется цвет окна «введите емейл» и одновременно цвет кнопки подписаться?
Какая часть кода отвечает именно за цвет кнопки «подписаться»?
Увидел, что тут пишут, что фидбёрнер закрывается и не работает! Чушь! Уже как год закрывают! И всё работает, пока..
Я настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :
The feed does not have subscriptions by email enabled
из-за чего?
Я тоже только пару дней назад вернул форму подписки на сайт, убрал после того как пошли слухи об его закрытии.
Я думаю, что в ближайшее время фид не уберут. В любом случае всех подписчиков можно переместить на смартреспондер или джаст клик!
Спасибо за форму подписки
Спасибо за урок. Я бы еще хотела картинку в форме подписки, не могли бы вы показать как это осуществить?
к сожалению, пока нет — не хватает знаний
Все встало отлично, спасибо автору! Даже париться не стал, подправил CSS к цветам своего блога и все, окей! Спасибо!
Единственная фигня у меня в всплывающем окне подписки, никак не пойму — в тексте
«…will receive a verification message once you submit this form. FeedBurner activates your subscription to “” once you respond to this verification message.»
в кавычках, где по идее должно быть написано на что ты подписываешься ничего нет. Где я обшибся, не подскажете? Спасибо
Спасибо. Получилось сделать более привлекательную форму в конце статьи.
Не подскажите, как сделать так, чтобы после статьи шли сразу кнопки соц сетей, потом форма подписки, потом похожие статьи?
с помощью плагина можно кнопки поставить, остальное — это просто разместить последовательно в single.php
В моей теме на вордпрессе нет singl.php. Надо поискать в других файликах на досуге
А смайлики под комментариями это какой то плагин?
single.php есть в каждой теме вордпресс. Остальное гугл в помощь
Здравствуйте! Объясните, почему в FeedBurner не отображается количество подписчиков, то-есть, при добавления нового подписчика в FeedBurner отображается постоянно ноль подписчиков.
Спасибо за урок! Только вот на прошлом блоге когда устанавливал фид, забыл пароль аккаунта Google и все подписчики остались там, а восстановить не получается.
Спасибо за информацию! Будем пробовать!))
Спасибо за урок, постараюсь сделать подписную форму по вашему методу, а то моя пока еще простенькая.
У тебя все хорошо показано и рассказано,но это все хорошо если есть своя страничка,а если ее нет,что делать тогда?
Нашли решение этой проблемы?
Спасибо, у меня всё получилось.
Дело в том, что далеко не все посетители знакомы с ридерами, а электронная почта это банально и просто даже для полнейших чайников. Поэтому настраиваем возможность получения новостей через E-mail, ну прям таки в обязательном порядке. Итак, для начала нам необходимо будет открыть вкладку Публикуй и выбрать в левой колонке пункт под названием Подписки по электронной почте . Не пойму почему счетчик фидбернер показывает среднее число подписчиков а не общее. Как установить общее число подписавшихся?