Здравствуйте, мои дорогие читатели. Очень рад что вас с каждым днем становится больше! Значит я не зря пишу. 
Сегодня я решил рассказать о такой штуке как блок подписки, размещаемый на блоге. За последние несколько дней пара человек обратились ко мне с этим вопросом, и поэтому, чтобы уже каждому обратившемуся не писать код блока, я объясню в данном посте как их сделать и организовать.
Обычно размещают блок подписки в двух местах - в сайдбаре и после поста. Создание в обоих местах такого блока аналогичны, поэтому о первом я подробно расскажу, а второй уже по аналогии более кратко.
Блок подписки в сайдбаре
Для начала давайте определимся с тем, используется ли у вас в теме виджеты. Если да, то можно просто через админ-панель вписать код блока (который будет ниже) и ничего больше, то есть пропускаете действия которые описаны ниже до кода блока.
Если же нет, то надо будет вручную добавлять в файл сайдбара (в WP это файл sidebar.php) блок. Для этого сначала посмотрим как у вас оформляются блоки в сайдбаре. Чтобы это узнать, перейдите на любую страницу блога, откройте исходный код страницы (правой кнопкой мыши на любое пустое место на странице, а там пункт "Исходный код страницы" или "Просмотр HTML-кода") и найдите код блока сайдбара. Будем брать в пример мой блог. Открываем исходный код главной страницы моего блога, ищем код одного из сайдбаров и видим, что блок в сайдбаре имеет следующий вид:
<h3>_ЗАГОЛОВОК-БЛОКА_</h3> <div class="textwidget"> _СОДЕРЖАНИЕ-БЛОКА_ </div>
Вот так, у нас есть заготовка для блока подписка. Остается только добавить нужные кнопки. Самые распространенные кнопки - RSS, Twitter, FriendFeed, Яндекс Лента и Google Reader. Поэтому рассмотрим только их коды.
Для начала загружаем кнопки на свой хостинг. Давайте договоримся, что загрузите вы их в папку images вашей темы, так будет проще. 😉 Загрузили? Запомните или запишите имя файла каждой из кнопок, они понадобятся.
Кнопку RSS вставить проще простого. Для этого необходима лишь ссылка на вашу RSS-ленту и имя файла изображения. А код следующий:
<noindex><a href="_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex>
Аналогичный код имеем и для Twitter:
<noindex><a href="_ССЫЛКА-НА-TWITTER_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex>
А также и для FriendFeed:
<noindex><a href="_ССЫЛКА-НА-FRIENDFEED_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex>
Теперь код для Яндекс.Лента. Здесь уже немного по другому сделаем. Теперь вам необходимо изменить только ту часть, где написано _ССЫЛКА НА ЛЕНТУ_ и добавить имя файла кнопки. А код для кнопки такой:
<noindex><a href="http://lenta.yandex.ru/settings.xml?name=feed&url=_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex>
Также поступаем и с Google Reader:
<noindex><a href="http://www.google.com/reader/view/feed/_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex>
Соединяем всё вместе и получаем такой код:
<h3>Подписка</h3> <div class="textwidget"> <noindex><a href="_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="_ССЫЛКА-НА-TWITTER_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="_ССЫЛКА-НА-FRIENDFEED_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="http://lenta.yandex.ru/settings.xml?name=feed&url=_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="http://www.google.com/reader/view/feed/_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> </div>
Но это ещё не всё. Ещё одним из элементов такого блока является подписка на рассылку по электронной почте. Такой элемент ставят, если пользуются лентой, прожженной через FeedBurner (а ею большинство, если не все, блогеров пользуется). Итак, если мы определились, что ставим этот элемент, то поехали.
Для начала мы выделим имя ленты из ссылка на ленту FeedBurner. Возьмем в пример мою ссылку:
http://feeds.feedburner.com/nutwin
Здесь nutwin (то есть то, что идет после первого слэша - окончания домена) - это и есть имя ленты в FeedBurner. Запомните или запишите его, оно нам понадобиться дальше. Теперь берём готовый код для формы подписки по e-mail из настроек самого FeedBurner. Это следующий код, в котором нужно заменить _ИМЯ-FEEDBURNER_ на ваше:
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=_ИМЯ-FEEDBURNER_', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="text" style="width:140px" name="email" value="Введите Ваш Email" onfocus="if(this.value=='Введите Ваш Email'){this.value='';}" onblur="if(this.value==''){this.value='Введите Ваш Email';}"/> <input type="hidden" value="_ИМЯ-FEEDBURNER_" name="uri"/> <input type="hidden" name="loc" value="ru_RU"/> <input type="submit" value="Подписаться" /> </form>
Итак, всё готово, осталось только всё собрать в единое целое:
<h3>Подписка</h3> <div class="textwidget"> <noindex><a href="_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="_ССЫЛКА-НА-TWITTER_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="_ССЫЛКА-НА-FRIENDFEED_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="http://lenta.yandex.ru/settings.xml?name=feed&url=_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <noindex><a href="http://www.google.com/reader/view/feed/_ССЫЛКА-НА-ЛЕНТУ_" rel="nofollow" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/_ИМЯ-ФАЙЛА_"></a></noindex> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=_ИМЯ-FEEDBURNER_', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type="text" style="width:140px" name="email" value="Введите Ваш Email" onfocus="if(this.value=='Введите Ваш Email'){this.value='';}" onblur="if(this.value==''){this.value='Введите Ваш Email';}"/> <input type="hidden" value="_ИМЯ-FEEDBURNER_" name="uri"/> <input type="hidden" name="loc" value="ru_RU"/> <input type="submit" value="Подписаться" /> </form> </div>
Ну вот и всё, блок подписки для сайдбара ГОТОВ! Остается его только добавить в нужный файл в нужное вам место и готово. Здесь уже всё зависит от верстки вашего сайта и поэтому не могу описать куда именно ставить этот код. Могу сказать лишь одно. Сейчас обычно верстальщики для сайдбара используют id/класс sidebar. То есть ищите строку:
<div id="sidebar"> или <div class="sidebar">
Вот на эти строки и стоит ориентироваться. Но возможно у вас другая вёрстка.
Вот один из примеров блока подписки в сайдбаре, сделанного по вышеописанному принципу и коду:
Блок подписки после поста
Создание блока подписки после поста аналогично вышеописанному способу. Поэтому всё в кратце. Только в этот раз необходимо редактировать страницу поста (в WP это файл single.php).
Ищем какой-либо стиль для блока подписки, также пишем текст нужный для блока и добавляем код блока подписки на страницу поста. Например, код моего блока подписки такой:
<div class="postinfo2"> Вы можете моментально получать новые записи в полном варианте с "Блога сайтостроителя". Для этого стоит подписаться на <noindex><a href="http://feeds.feedburner.com/nutwin" rel="nofollow">RSS-ленту</a></noindex> блога или на <noindex><a href="http://feedburner.google.com/fb/a/mailverify?uri=nutwin&loc=ru_RU" rel="nofollow">E-Mail рассылку</a></noindex> по следующей форме: <form style="border:none;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=nutwin', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">E-Mail: <input type="text" style="width:140px" name="email"/> <input type="hidden" value="nutwin" name="uri"/> <input type="hidden" name="loc" value="ru_RU"/> <input type="submit" value="Подписаться" /></form> Также предлагаю вам <noindex><a href="http://twitter.com/SergeyFeschukov" rel="nofollow">проследовать в Twitter</a></noindex>, где вы сможете, кроме новых записей с этого блога, получать ссылки на интересные и полезные записи других блогеров. </div>
Можете взять его, поставить свой стиль, свой текст, свои ссылки и добавить. Один из примеров куда можно добавить это место в файле single.php для WP после строки
<?php the_content('...'); ?>
Один из примеров такого блока:
В том случае, если нет такого стиля, чтобы как-то выделить блок подписки, тогда можно сделать его своими руками. Для этого создаем отдельный класс для блока, например, subscribe. Тогда ваш блок будет иметь код вида:
<div class="subscribe"> _ТЕКСТ-БЛОКА-ПОДПИСКИ_ </div>
Затем открываем ваш файл стилей (в WP это файл style.css) и в любое место файла (самый верный вариант, в самый конец файла) добавляем стиль. Например, следующий код:
.subscribe { background: #CDB594; padding: 20px; margin: 0 0 20px 0; }
Блок подписки после поста ГОТОВ!
И ещё парочка полезных ссылок по теме:
- htmlbook.ru - огромный информационный и полезный сайт, в котором вы можете найти подробное описание и примеры к каждому html-тегу, а также стилевым свойствам css (раздел CSS);
- iconspedia.com - сайт с большой коллекцией иконок, в том числе есть раздел Internet Icons, в котором как раз можно найти иконки для блока подписки, а также для кнопок закладок.
На этом, я думаю, можно закончить. Приятного и теплого лета Вам! 😉
Часто мучают меня с вопросом "какое кино посмотреть?", поэтому я заранее ищу самые ожидаемые новинки кино, записываю их даты выхода и ставлю напоминания, чтобы не забыть сходить на эти фильмы.
Самые удобные ворота, естественно, автоматические, которые открываются и закрываются с пульта. Поэтому установка ворот цены на что не кусаются даже, является почти первым шагом в обустройстве своего загородного участка.
Биржа ссылок Mainlink
Биржа ссылок Sape
Биржа статей Miralinks
Биржа статей Пресс-релизы.рф
Вечные ссылки GetGoodLinks
Вечные ссылки GoGetLinks
Продвижение сайтов с SeoWizard
Реклама в блогах RotaPost
9 комментариев
Молодца! Хорошо расписал. даже я понял.
П.С. Я один из тех людей, которые обращались с подобной просьбой. Спасибо, Сергей!
Поздравляю тебя с наступающим днем рождения! Успехов тебе в блогосфере!
Спасибо что принял участие в акции http://blogozoom.ru/novaya-akciya-zoom
П.С. Поздравил на один день раньше, так как завтра могу остаться без инета
Supaman, спасибо за поздравление.
Акция, кстати, хорошая. Много полезного подсказал, некоторые советами воспользовался, а парочку ещё собираюсь использовать.
Отлично написано. Полно и в тоже время кратко.
Отличный пример для многих блоггеров-вэб-дизайнеров, которые сами умеют, но не могут это объяснить другим.
noindex не нужен — Яндекс уже давно понимает nofollow.
@ Безумный программист, я в курсе, просто в привычку вошло.
А вообще некоторые биржи ещё не ладят с nofollow и приходится использовать noindex. Я так, чтобы уже проблем не было, добавил. Да и он ничего не портит своим присутствием.
Отличный пост! Только у меня возник одни вопрос: Как сделать рамочку, как у вас, для блога подписки в конце поста?
@ Александр, это надо баловаться со стилями. Всё зависит от того, какую рамочку вы хотите сделать. Как раз для этого и дал ссылку в конце поста на htmlbook, точнее на раздел CSS, чтобы вы могли посмотреть что можно делать с блоком (div) subscribe.
У себя в блоге реализовал такую штуку. Благодарю за заметку.