Внимание! Вышла новая статья для тех, кто хочет установить форму подписки на рассылку в Джастклике или Смартреспондере.
4 красивые формы + видеоурок по установке смотрите здесь.
Здравствуйте, друзья!
Буквально на днях настроил на своем WordPress блоге email-подписку через сервис Feedburner. Честно говоря, делать этого я не собирался. Было лень разбираться, да и смысла особого я в том Фидбернере не видел.
У меня уже стояла форма подписки на email от Smartresponder, и, казалось бы, зачем ставить что-то еще?
Тем не менее, как выяснилось, у Смартреспондера есть один недостаток: он не умеет уведомлять подписчиков о новых статьях на блоге в автоматическом режиме (по крайней мере, я такой опции там не нашел). Только, если рассылку зарядить статьями наперед.
А что делать, если наперед заряжать нечем, да и не зачем? Вот тут то и оно. Придется тогда отправлять людям уведомления вручную. А это, согласитесь, не очень удобно.
Поэтому вдобавок к подписке от Смартреспондера я решил настроить еще и Фидбернер, который как раз таки и сделан для того, чтобы автоматически сообщать подписчикам о новых статьях на блоге.
Чуть позже оказалось, что настраивается Фидбернер элементарно. Буквально за пять минут и без специальных плагинов. Правда, это только в случае с email-подпиской.
В случае с RSS я не знаю, так как не пробовал.
Ну, а чтобы моя подписная форма бросалась в глаза (иначе, какой от нее толк?), я решил еще немного поковыряться в интернете и в итоге отыскал специальный код, который преобразует стандартную форму в весьма оригинальную.
Вот, как она выглядит.
Хотите разобраться, как настроить Фидбернер и поставить себе на блог такую же форму подписки? Специально для того, чтобы показать вам, как это делается, я записал видеоурок, который вы можете посмотреть ниже.
Чтобы все было видно хорошо, рекомендую смотреть видео в высоком качестве и полном экране. Если видео подтормаживает, дайте ему немного подгрузиться.
Код формы подписки расположен под видео.
Перейти к настройке Фидбернера вы можете по адресу feedburner.google.com.
[youtube_sc url=»http://www.youtube.com/watch?v=bgyxgP48vkE&feature=youtu.be» width=»500″ iv_load_policy=»3″ rel=»0″ showinfo=»0″ showsearch=»0″]
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;}
После успешной настройки Фидбернера я прошелся по более-менее крупным блогам и еще раз убедился, что не зря потратил время: на всех блогах есть свои формы подписки.
Так что ставьте это дело и себе. А если что-то будет не получаться, пишите в комментариях, постараюсь помочь, чем смогу.
С уважением, Константин Руднев
20.09.2012 на 10:17
Константин, хочу выразить Вам огромную благодарность за такой подробный урок! Теперь наконец-то у меня красивая форма подписки. Спасибо!
20.09.2012 на 11:56
Очень рад, что понравилось=)
05.10.2012 на 21:13
Здравствуйте, у меня проблема с кодировкой
06.10.2012 на 00:06
Кодировку нужно во всех редактируемых файлах, где есть слова на русском, указывать в utf-8 без BOM
28.10.2012 на 20:46
Константин,подскажите как настроить форму подписки для виджета.
28.10.2012 на 21:00
Здравствуйте, нужно первый код вставить в текстовый виджет и разместить в соответствующей колонке.
Только эта форма вряд ли подойдет — она широкая, будет некрасиво, я думаю. Нужно другие поискать
30.10.2012 на 16:20
Отличная статья! Спасибо! Я вот только хотела спросить, куда нужно вставить код FeedBurner, чтобы рассылка находилась в конце каждой статьи. К сожалению, пока у меня это не получается :( Может с Вашей помощью получится =)
30.10.2012 на 17:07
Нужно вставить либо в самом начале comments.php либо лучше в single.php — туда, где заканчивается пост
31.10.2012 на 20:19
Странные дела творятся:
Ставлю код в конце single.php (перед последним закрывающим тегом) — форма подписки сдвигает все виджеты и становится на первое место. Текст статьи при этом располагается поверх формы.
Ставлю код после последнего тега — форма подписки отображается на том же месте (как в первом случае), но при этом высота ее настолько маленькая, что форма опознается только по цвету. Виджеты сиротливо выстраиваются в колонку после формы отправки комментария.
30.10.2012 на 23:09
Класс! То, что нужно! Только собирался искать, как такую форму сделать, а тут уже все готово и разжевано.
Спасибо!
Пока не сделаю такую у себя — эта страница на панели «избранного».
31.10.2012 на 21:35
Константин, при настройке формы вынужден был сделать себе комментарии в css — какой блок за какую часть формы отвечает.
Никогда не учил английского и определял это опытным путем — изменением ширины, цвета, размеров шрифта и т.п.
Для таких «специалистов», как я, было бы очень удобно, если в исходный код, размещенный выше, добавить комментарии типа:
/* тело формы */
#mbt-sub-box {
…..
/* окно ввода мыла */
#mbt-sub-box input {
…..
31.10.2012 на 22:20
Ну что тут сказать? Видимо форма не универсальна для всех шаблонов.
По поводу css не знаю, я использовал готовый блок.
По поводу вставки кода в single php — тут надо не в конец вставлять, а в том месте файла, который отвечает за конец поста. Где-нибудь после ‘Edit this entry’ или до если есть такой
31.10.2012 на 22:38
Спасибо!!! Форма встала на место! :-D
Поставил между и
Ну и до шаблона все же как-нибудь надо добраться и довести его до ума. Или подобрать подходящий.
31.10.2012 на 22:59
теги скрылись…
вставил между __ и __
07.11.2012 на 16:05
Спасибо Вам за полезный урок! Форму подписки настроил,а изменить фон невозможно,цвет не меняется при другом коде цвета.
07.11.2012 на 16:38
Меняется всё. Я добивался даже отсутствия фона. Честно признаться, такой эффект я получил не намеренно, но всё же убедился, что все цвета благополучно меняются. Проблемой было только подобрать более-менее сочетающиеся цвета.
13.12.2012 на 18:41
Здравствуйте, Костя! Спасибо Вам за этот урок! Только вот мне бы хотелось, чтобы форма подписки была расположена в сайдбаре. Как это можно устроить, не подскажите? А можно ли еще расположить ее только после некоторых определенных постов? Спасибо!
13.12.2012 на 19:36
Здравствуйте Елена.
Расположить можно, но только не эту форму: она большая и не влезет, хотя если размер в CSS как-то задать, то может и получиться. Попробуйте изменить размер везде, где указано «width», Уменьшите его.
По поводу отдельных постов не знаю =)
02.01.2013 на 13:04
все бы ничего да только русский текст квадратиками и в нотебад вставлял и сохронял в кодировке utf-8 без BOM *CRAZY* вообщем никак
02.01.2013 на 19:09
Текст нужно не изменить на utf-8 без BOM, а «преобразовать» в utf-8 без BOM. Лучше сначала выделите весь текст в файле и преобразуйте. После этого вставляйте код и свой текст пишите на русском.
17.01.2013 на 14:17
Никак не получается регистрация в FeedBurner.
Пытался обратиться в службу поддержки но получил: » Справочный центр в настоящее время недоступен на вашем языке.»
08.02.2013 на 10:30
как поменять вот эту надпись «Enter your email address:»
08.02.2013 на 12:34
В коде посмотреть надо. Откройте notepad и проверьте эту фразу
10.02.2013 на 10:05
Костя, все сделала, как описано, все так понятно, вроде бы Вами описано.
Цвет поменяла, как Вы указали, поставила оранжевый, а отображается фон белый, а заголовок красный… Непонимаю, почему…
И как можно отрегулировать отступ на странице, какими средствами? У меня форма прижалась к кнопкам соцсетей, некрасиво…
Можете подсказать ответы на мои вопросы? Буду очень благодарна =) .
10.02.2013 на 17:25
отступ можно задать тегом /br, только его нужно взять с двух сторон в эти ковычки (на клавиатуре обычно это кнопки б и ю) а вот с цветом не знаю, нужно самому экспериментировать, потому что в разных браузерах будет показываться по разному. Если вы в Опере, то все должно быть нормально, если в других браузерах, то возможны отклонения. Кстати сайт очень красивый=)
13.02.2013 на 23:12
Здравствуйте. Фон моей подписки почему-то белого цвета, а не такой как у вас. С чем это может быть связано?
13.02.2013 на 23:56
в разных браузерах показывается по разному
20.02.2013 на 17:17
FeedBurner вроде как закрывается и новые сайты уже не добавляются. Google купил и убил очередной сервис.
21.03.2013 на 10:28
Здравствуйте! Сделал все как написано, но каракули появились. Переделал кодировку на Utf 8, после вместо каракулей, появились вопросы. Почему может такое быть? Спасибо!
21.03.2013 на 12:03
Кодировка utf8 без bom нужна
28.03.2013 на 16:47
Здравствуйте! Я делала форму подписки на обновления сайта по вашему уроку и коды брала так же с вашего сайта. Но почему то форма получилась некрасивая и еще и не работает.Не смогли бы Вы помочь разобраться, в чем дело? Мне бы хотелось тоже такую симпатичную форму подписки, наподобие вашей?
=)
28.03.2013 на 17:41
возможно проблемы с фидбернером, вроде говорят, что он не работает. А с отображением формы вообще не понятно, признаюсь честно, в разных бразурах и ра разных сайтах по разному. Нужно допиливать код в css под свои нужды
09.04.2013 на 16:52
Фидбанер уже не работает. А как можно сделать форму подписки например для смартреспондера?
09.04.2013 на 20:55
Постараюсь в ближайшее время заняться этим вопросом
16.04.2013 на 14:56
Жаль, что в статье не приведены картинки самих форма. Когда ищешь КРАСИВУЮ форму, прежде всего хочется воочию ее увидеть, и если она понравится тогда уж и статью читать.
16.04.2013 на 16:20
эта форма болтается у меня в конце каждого поста=)
11.05.2013 на 14:03
Отличный урок, Костя =) Именно такую форму я и хотела. Получилось всё с первого раза, несказанно рада, спасибо!
14.05.2013 на 20:50
Узнавайте О Новых Статьях По Почте :-!
Вам нравится такой вариант написания фразы? Каждое слово с большой буквы. Уважаемый, это русский язык, а не аборигенский.
27.05.2013 на 19:28
Просто класс :P только что когда подписываешься на английском выскакивает( :(
04.06.2013 на 20:54
Это черная подписка под постом? Мне такая не нравиться, я хочу красивую картинку в сайт баре. =)
18.06.2013 на 15:35
Модифицировала ваш код под свой дизайн)) долго игралась с подбором цвета. Если кому надо, могу сбросить )) а то часа три гугления выявили, что ваш код наиболее актуальный.
22.07.2013 на 22:09
Добрый день, добрые люди!
Подскажите, пожалуйста, как изменить язык, когда подписываешься, с английского на русский.
Заранее благодарен!
12.09.2013 на 14:25
Здравствуйте.
Скажите, а можно дополнить форму подписки?
Вставить в «Подписаться» ссылку на скачивание с задержкой 5 сек.
12.09.2013 на 15:22
все можно, но я не знаю как
13.10.2013 на 02:07
Константин, хочу такую форму подписки и специально искал через поисковик… Сегодня воскресенье — буду отдыхать. А на днях займусь и Ваша статья очень пригодится — беру в закладки.
Подписался на обновления…
Удачи. 8)
10.11.2013 на 17:20
Установил, настроил на блоге в сайдбаре по адресу: http://liwihelp.ru. Спасибо за подробную инструкцию!
30.11.2013 на 02:01
Спасибо, Константин, тоже уже давно собиралась подключить фидбернер и подписку на новости блога, но не знала, как, теперь все понятно, очень доступно рассказано и показано — без вопросов. Еще раз благодарю =)
18.12.2013 на 13:01
Спасибо, тезка, за классную статью. Поставил себе на блог форму — выглядит шикарно. Удачи и процветания!
03.03.2014 на 15:31
Ребят, настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :
The feed does not have subscriptions by email enabled
09.03.2014 на 02:39
Добрый день.Очень полезная статья.Вот только маленький вопросик:на bloggerе можно эту форму поставить?
Заранее благодарен
09.03.2014 на 15:21
Точно такую же вряд ли
09.03.2014 на 23:13
Спасибо за ответ.Печально :(
10.03.2014 на 19:05
Получилось!!!!Точно такую же. =)
30.03.2014 на 11:24
Костя, спасибо огромное, за подробный урок! *IN LOVE* *IN LOVE* Буду сейчас пробовать преображать свою форму подписки и вставлять ее в статьи. А то она у меня только в сайдбаре стоит.
Еще хотелось бы узнать, как можно вставить картинку в форму подписки, не подскажите ?
30.03.2014 на 13:34
можно сделать, но для этого надо поковыряться в css
15.04.2014 на 15:18
А где можно посмотреть конечный результат описанной выше формы?
15.04.2014 на 17:19
внизу под статьей
05.05.2014 на 20:35
Здравствуйте!
Огромное спасибо за урок — единственный после которого у меня что-то получилось!
Немного поменяла цвета и все отлично!
Единственный вопросик — в хроме, где я делала подписку на сайте все отображается нормально.
А в другом браузере, то есть там где я на сайте как посетитель, формы нет. В чем может быть проблемка?
Заранее спасибо!
06.05.2014 на 01:12
у меня в браузерах также форма отображается по-разному. Тут есть свои косяки, увы, я пока сам не разобрался
24.07.2014 на 10:12
Спасибо большое за форму, Константин! Видеоурок понятный и полезный! Всё получилось! Только вот вопрос, как поменять цвет именно кнопки подписаться, а то когда задаёшь другой цвет, меняется цвет окна «введите емейл» и одновременно цвет кнопки подписаться?
Какая часть кода отвечает именно за цвет кнопки «подписаться»?
24.07.2014 на 10:14
Увидел, что тут пишут, что фидбёрнер закрывается и не работает! Чушь! Уже как год закрывают! И всё работает, пока..
24.07.2014 на 11:56
Я настроил подписку, все нормально отображается. Ну вот когда ввожу туда свою почту у меня при подписке пишет :
The feed does not have subscriptions by email enabled
из-за чего?
27.07.2014 на 14:34
Я тоже только пару дней назад вернул форму подписки на сайт, убрал после того как пошли слухи об его закрытии.
29.07.2014 на 16:58
Я думаю, что в ближайшее время фид не уберут. В любом случае всех подписчиков можно переместить на смартреспондер или джаст клик!
25.11.2014 на 21:18
Спасибо за форму подписки ;)
17.12.2014 на 09:46
Спасибо за урок. Я бы еще хотела картинку в форме подписки, не могли бы вы показать как это осуществить?
17.12.2014 на 18:09
к сожалению, пока нет — не хватает знаний
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.»
в кавычках, где по идее должно быть написано на что ты подписываешься ничего нет. Где я обшибся, не подскажете? Спасибо
30.01.2015 на 21:08
Спасибо. Получилось сделать более привлекательную форму в конце статьи.
Не подскажите, как сделать так, чтобы после статьи шли сразу кнопки соц сетей, потом форма подписки, потом похожие статьи?
30.01.2015 на 22:31
с помощью плагина можно кнопки поставить, остальное — это просто разместить последовательно в single.php
31.01.2015 на 06:21
В моей теме на вордпрессе нет singl.php. Надо поискать в других файликах на досуге =)
А смайлики под комментариями это какой то плагин?
31.01.2015 на 19:02
single.php есть в каждой теме вордпресс. Остальное гугл в помощь
11.03.2015 на 01:04
Здравствуйте! Объясните, почему в FeedBurner не отображается количество подписчиков, то-есть, при добавления нового подписчика в FeedBurner отображается постоянно ноль подписчиков.
23.03.2015 на 15:12
Спасибо за урок! Только вот на прошлом блоге когда устанавливал фид, забыл пароль аккаунта Google и все подписчики остались там, а восстановить не получается.
10.04.2015 на 19:49
Спасибо за информацию! Будем пробовать!))
21.08.2015 на 21:48
Спасибо за урок, постараюсь сделать подписную форму по вашему методу, а то моя пока еще простенькая.
23.10.2015 на 22:05
У тебя все хорошо показано и рассказано,но это все хорошо если есть своя страничка,а если ее нет,что делать тогда?
08.06.2016 на 23:26
Нашли решение этой проблемы? :(
16.07.2016 на 22:25
Спасибо, у меня всё получилось.
13.05.2017 на 17:59
Дело в том, что далеко не все посетители знакомы с ридерами, а электронная почта это банально и просто даже для полнейших чайников. Поэтому настраиваем возможность получения новостей через E-mail, ну прям таки в обязательном порядке. Итак, для начала нам необходимо будет открыть вкладку Публикуй и выбрать в левой колонке пункт под названием Подписки по электронной почте . Не пойму почему счетчик фидбернер показывает среднее число подписчиков а не общее. Как установить общее число подписавшихся?