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


Здравствуйте, уважаемые друзья. Сегодня статья по вашим заявкам, на тему «Как редактировать код формы подписки 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%); /*Меняются цвета заливки*/
}

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

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

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

28 коммент. к статье “Как вставить форму подписки FeedBurner в статьи

  • Виктория Карпова

    Привет, Максим:) Приукрасил блог к Новому году? Здорово выглядит:) И форма под статьями классная получилась. Спасибо тебе за очередной полезный урок.

    • Максим Зайцев От автора

      Вика, привет. Да, немного приукрасил, хочется праздника 🙂 Форму в качестве примера для урока готовил, а потом так понравилась, что решил оставить. Вика, спасибо за поддержку!

    • Максим Зайцев От автора

      Андрей, всегда пожалуйста. Спасибо за тёплые пожелания. Желаю успешного применения знаний на практике, хорошего настроения и успехов во всём.

  • Василий

    У меня похожий код, только немного различается. Мне его с какого-то сайта спионерили.

    • Максим Зайцев От автора

      Вася, привет. На самом деле код формы подписки на сервисе FeedBurner у всех одинаков, за исключение ссылки на RSS-канал. Поэтому не обязательно — спионерили, а позаимствовали 😉 Такова нынешняя ситуация в интернете.

  • Tatyana

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

    • Максим Зайцев От автора

      Татьяна, спасибо большое за классный отзыв. И я желаю вам успехов и хорошего настроения!

  • артем

    Здравствуй, Максим! Тоже пытаюсь научиться сверстать форму подписки в html и css. экспериментирую с двумя темами. в одной из них без проблем подогнал в css форму фидбернера под картинку, в другой же форма подписки встала «криво» (поле ввода имэйла и кнопка съехали) и никакое изменение параметров в css на нее влияния не оказывают. не подскажешь, что в шаблоне может блокировать стили, которые я сам задаю?

    • Максим Зайцев От автора

      Артём, привет. Судя из твоего описания, то проблема в классах и идентификаторах. То есть идентификатор главнее класса. Попробуй измени свои классы на идентификаторы и результат изменится в твою пользу. 😉 Желаю удачи!

      • артем

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

        • Максим Зайцев От автора

          Артем, обрати внимание на стили float и overfow. Я не вижу форму, но походу причина в них. Либо margim и padding так заданы. В любом случае проблема в позиционировании.

          • артем

            вот посмотри, пожалуйста, как выглядит форма в 3-х вариантах на этом шаблоне: _http://shop.elenablog.ru/zayac-bolelshhik-xk-ska/

          • Максим Зайцев От автора

            Артём, вставь вот эти стили в поле для эмайла style=»margin: 14px 0 0 420px; border: none; background: none;» Также сюда стоит добавить свойство float:left а для кнопки right.
            А вообще вся проблема в том, что родительский идентификатор #content и от этого у тебя все трудности. В стилях тебе нужно прописывать #content, polemail input и далее стили. Или напрямую для каждого поля стили прямо в html добавлять.

          • артем

            Как вставить форму подписки FeedBurner в статью в общем понятно. но в моем случае, даже голый код в html (из твоего поста) без использования стилей не позволяет поставить окно для ввода адреса и кнопку рядом. пробовал на других шаблонах вставлять этот код из статьи (без стилей) — вообще никаких проблем — окно и кнопка стоят как надо в одну линию. вообще этот шаблон злостный какой-то, намучился я с ним порядочно прежде чем настроил более или менее. и вот новый «сюрприз» от него.

          • артем

            Максим, извини за назойливость, по прежнему пытаюсь внедрить форму подписки на блог. результаты такие — в сайдбар подписка со стилями встает без проблем, можешь убедиться (в никнэйме ссылка на блог). Когда вставляю html-код в файл single.php, чтобы форма отображалась в каждой статье, то стили почему-то не применяются к полю ввода мэйл, а кнопка отображается нормально. ну и позиционирование нарушено. не подскажешь, почему для элемента поля ввода стили не работают в данном случае внутри поста? по ads клацк)).

          • Максим Зайцев От автора

            Тут тоже нужно добавить свойства float:left для поля ввода емайла, и float:right для кнопки. А через margin задать нужное положение. Если не понятно объяснил, извини, сегодня тяжёлый день.

          • артем

            спасибо, float:left и float:right расставили поле и кнопку по местам, но внешний вид поля мейла не меняется, изменение параметров: border-radius: 7px; /*Закругление углов формы*/ и border: 2px solid #25A6FF; /*Стиль бордюра*/ почему-то никакого влияния не оказывают.

          • Максим Зайцев От автора

            Стиль рамки перекрывают стили из #content input, которые находятся в style.css на 139 строке. Можно их там подправить. А можно стили прямо в поле input вставлять, как я показывал в прошлом комменте. И всё будет как надо.

      • артем

        Максим, ты просто Мега-голова, спасибо огромное за помощь! Заработало! Подправил стили в 139 строке. Не хватает, к сожалению, мне грамотности в этом вопросе. Может подскажешь, что почитать на тему стилей, чтобы быть немного «в теме»?!))

        • Максим Зайцев От автора

          Артём, спасибо за добрые слова. Рад, что всё получилось. По стилям я советую всем бесплатный курс Евгения Попова http://1zaicev.ru/link/css (ссылка партнёрская). Именно в этом курсе, ты увидишь, как пользоваться расширение для firefox и как смотреть и анализировать код на лету. Хотя сейчас это можно делать и без этого расширения. Из курса поймёшь принцип, а дальше всё легко.

          • артем

            благодарю, Максим, качнул, буду изучать, выбивать из себя чайника!))

          • Максим Зайцев От автора

            Желаю удачи! И не забывай, заходи в гости. 😉

  • артем

    попробовал внедрить и html-код из этой статьи, но все равно поле ввода мэйл и кнопка подписки не выстраиваются рядом друг с другом: поле — вверху слева, а кнопка внизу по центру.

  • Витос

    Приветствую, Вас! Статья для меня полезная и актуальная. Недавно настраивал форму подписки от фидбернер и установив форму она в коде прописалась, а по факту не работает я ее тестировал. Больших знаний в HTML у меня нет, боюсь вообще делов натворить… Попробую Вашим методом. Спасибо.

    • Максим Зайцев От автора

      Добрый день, Витос. Попробуйте, должно получиться. Если будут вопросы, не стесняйтесь, задавайте. Желаю удачи!

  • Станислав

    Вот бы такую же форму как сейчас у вас стоит…крутая прям) Может поделитесь?

    • Максим Зайцев От автора

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