Как вставить форму подписки FeedBurner в статьи

Здравствуйте, уважаемые друзья. Сегодня статья по вашим заявкам, на тему «Как редактировать код формы подписки FeedBurner и внедрить его в файл single.php». В этом вопросе, пожалуй, самое трудоёмкое — это настройка аккаунта в сервисе FeedBurner.

Вообще, если кто не в курсе – этот сервис позволяет организовать автоматическую рассылку анонсов на ваши новые статьи. И делается это на основе RSS ленты. Вам лишь один раз нужно всё настроить и в дальнейшем ваши подписчику будут получать новые материалы на почту, в автоматическом режиме.

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

И, хотя изначально вид формы очень убогий, вас это не должно пугать. Мы всё поправим. Главное, что у вас будет нужная ссылка, а сам код формы вы можете найти ниже в этой статье.

В качестве примера посмотрите на одну и ту же форму на моём блоге. Одна расположена в сайтбаре, а другая под каждой статьёй. Внешне формы различны, но функционал у них одинаков. В обеих формах посетитель подписывается на обновление моего блога.

Ну а теперь от слов к действию.

Редактирование формы подписки FeedBurner

Как я уже сказал, из вашей формы подписки, вам потребуется всего лишь ссылка на ваш RSS канал. А в качестве основы можете взять приведённый мной ниже код и заменить ссылки.

<div>
<form style="border:0;padding:3px;text-align:center;" 
action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=1zaicev/CBHh', 
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="poleform" name="email" 
onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" 
value="Введите Ваш e-mail" type="text">
<input class="submitform" value="Подписаться" type="submit">
<input value="1zaicev/CBHh" name="uri" type="hidden">
<input name="loc" value="ru_RU" type="hidden">
</form>
</div>

Ещё раз обращаю ваше внимание, используя код этой формы, вы должны изменить мою ссылку 1zaicev/CBHh на свою, в двух местах. Также, форма заключена в блок <div> для удобства вставки, если вам это не нужно, просто уберите эти теги.

Форма в таком виде, без стилей, будет выглядеть так:

Вставка кода формы подписки в исходный код сайта

Итак, как мы уже договорились ранее, форму подписки будем вставлять внизу каждой статьи. Значит нужно будет работать с исходным кодом файла, отвечающего за вывод статей. В WordPress этот файл single.php. Если у вас другая платформа, файл будет другой, но принцем вставки кода будет тот же. Только, учтите один момент, у нас у всех более или менее разные шаблоны и поэтому классы и стили блоков будут отличаться. На это нужно будет обратить внимание при поиске места для вставки формы.

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

Первым делом нужно определиться с местом под форму. В нашем случае это место под каждой статьёй. Так, она никому не мешает, но в то же время каждый посетитель может подписаться на обновление вашего сайта.

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

Нажимаем в браузере правую кнопку мышки в конце статьи и обращаем внимание на класс блока <div> в котором находится контент (статья).

В моём случае – это класс class="entry". Вот его-то мне и нужно искать в файле single.php. Для этого я открываю административную панель WP – «Внешний вид» — «Редактор» — «Одна запись (single.php)». И используя поиск CTRL+F, ищу класс «entry».

И сразу после закрытия блока ДИВ с контентом можно вставлять код формы. В моём случае сначала идут социальные кнопки, а затем форма подписки и выглядит это так:

Всё, форма вставлена, но ей ещё нужно придать стиль оформления в соответствии с дизайном вашего сайта.

Добавление стилей оформления для формы подписки

Для того чтобы можно было придать форме нужный дизайн, я добавил к полю ввода e-mail и кнопке классы оформления. И теперь можно смело в файле style.css добавлять нужные стили для придания форме приятного внешнего вида.

Для того чтобы получить форму вот такого вида:

Я добавил в файл style.css такие стили:

/*Поле ввода e-mail*/
 .poleform {
font: 17px Verdana, sans-serif; /*Стиль шрифта*/
width: 65%; /*Ширина поля ввода адреса*/
padding: 9px; /*Внутренний отступ в поле*/
border-radius: 7px; /*Закругление углов формы*/
border: 2px solid #25A6FF; /*Стиль бордюра*/
}

/*Кнопка*/
.submitform {
font: 17px Verdana, sans-serif; /*Стиль шрифта*/
color:#ffffff; /*Цвет шрифта*/
padding: 9px 12px; /*Внутренний отступ*/
margin: 0 0 0 15px; /*Внешний отступ слева*/
cursor: pointer; /*Смена курсора при наведении*/
border-color:#25A6FF; /*Стиль бордюра*/
border-radius: 7px; /*Закругление углов кнопки*/
background: linear-gradient(to top, #25A6FF 0%, #1c80c4 36%, #5DBAFF 100%); /*Градиентная заливка фона кнопки*/
}

/*Кнопка при наведении*/
.submitform:hover {
font: 17px Verdana, sans-serif;
color:#ffffff;
padding: 9px 12px;
margin: 0 0 0 15px;
cursor: pointer;
border-radius: 7px;
background: linear-gradient(to top, #5DBAFF 0%, #1c80c4 36%, #25A6FF 100%); /*Меняются цвета заливки*/
}

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

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

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

Для этого я присвоил класс блоку ДИВ, в который заключена форма, добавил фоновое изображение и подправил стили.

Рекомендую посмотрть видеоурок, в котором я показываю и момент красивого оформления формы.

А у меня на этом сегодня всё. Желаю успешного создания и внедрения форм подписки на ваших сайтах. До встречи в новых статьях.

С уважением, Максим Зайцев.