Волшебная кнопка подписки через FeedBurner

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

Одно небольшое усовершенствование: в оригинале отправка почты происходила через движок WP, в моём примере используется функция email доставки от Feedburner, но смысл не изменился.
Работает кнопка на скрипте jQuery, управляется стилями. И то и другое находится на бесплатном хостинге Wordpress, который по сути вечен, но для подстраховки можете воспользоваться своим хостингом.

Демо.
Посмотреть демо можно на специальном тестовом блоге.

А чтобы вы примерно представляли, о чём идёт речь и могли найти там эту фитюльку, три скриншота ↓

1) В свёрнутом виде (только кнопка):


2) В развёрнутом виде:


После ввода почтового адреса появится обычное фидбёрнеровское подтверждение:


Установка.
Требуется jQuery.

Весь код для Blogger и любого другого движка выглядит следующим образом:
<div id="bit" class="loggedout-follow-normal">

<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Открыть</span></a>
<div id="bitsubscribe">

<h3>
<center><label for="loggedout-follow-field">&ldquo;Blogger не для чайников&rdquo;</label></center></h3>
<label for="loggedout-follow-field">Доставка почтой</label>

<form style="border:0px solid #ccc;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=omg-linux/blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
Ввведите ваш email адрес:</p>
<p>
<input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="omg-linux/blogger" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Подписаться" /><p><br />
Почтальон <a href="http://feeds.feedburner.com/omg-linux/blogger" target="_blank" title="RSS Блоггер не для чайников">FeedBurner</a></p>
</form>
<div id='bsub-credit'>
<a href="http://blogger.omg-linux.ru/p/blog-page_7785.html" target="blank" title="Новости и подписки">Подробнее о подписках</a></div>

</div>
<!-- #bitsubscribe -->
</div>
<!-- #bit -->

<script type='text/javascript' src='http://s0.wp.com/wp-content/blog-plugins/loggedout-follow/widget.js'></script>
<link rel='stylesheet' id='loggedout-subscribe-css'  href='http://s1.wp.com/wp-content/blog-plugins/loggedout-follow/widget.css' type='text/css' media='all' />
Содержание html части (надписи и ссылки отредактируйте по своему вкусу или подставьте свои вместо моих):
В 10-ой 15-ой строках в uri="omg-linux/blogger" value="omg-linux/blogger" для Feedburner нужно указать наименование свое учётки. Узнать ее можно из строки адреса вашего фида (после домена и слеша). У меня это (выделено жирным): feeds.feedburner.com/omg-linux/blogger
В 27-ой 28-ой строках - ссылки на скрипт и стили.
Код в таком, готовом, виде можно поставить в html виджет Blogger. Разумнее конечно скрипт и стили перенести и вставить до тега </head> в шаблоне, чтобы они каждый раз не мозолили поисковикам глаза.

Ссылка по теме:
Как воровать элементы дизайна с других сайтов

1 комментарий: