Установить счётчик очень легко: надо в админке забрать код и вставить в html виджет/гаджет блогспота.
Кастомизации здесь кот наплакал. Юзер может сменить только цвет у прямоугольника и цифры, ну и ещё русифицировать надпись "readers", чем никто, собственно, не заморачивается.
Продвинутые юзеры платформы Wordpress выводят данные о подписчиках простым текстом, а затем обрабатывают стилями по вкусу.
Для Blogger тоже есть уловка, о которой мало кто догадывается.
Демо с текстовым выводом подписчиков feedburner и стилями (которые стырил по-быстрому у Dimox):
Установка:
1) jQuery
2) Скрипт, забирающий данные с FeedBurner:
<script type="text/javascript">$(function(){ var opts={fbId:'omg-linux/blogger',fbCount:-1,}; var fbCount=''; var fbUrl=''; function doFbCount(count){$("#count").append('<span id="fb-count"></span>'); $("#fb-count").html(+fbCount+' '+((fbCount==1)?'подписчик':'подписчиков'));} $(document).ready(function($){fbUrl='http://pipes.yahoo.com/pipes/pipe.run'; if(opts.fbCount==-1){$.getJSON(fbUrl+'?_id=b47b5cb1a615935b43858618ebe5ee32&uri='+opts.fbId+'&_render=json&_callback=?',function(data){fbCount=data.value.items[0].circulation;doFbCount(fbCount);});} }); })(jQuery)</script>Где в строке fbId:'omg-linux/blogger',fbCount:-1, нужно указать свой id в фидбёрнере.
У меня ссылка на ленту выглядит так:
http://feeds.feedburner.com/omg-linux/blogger
Соответственно, omg-linux/blogger - id моего фида.
Шаг №2 можно в скопировать в html/javascript виджет Blogger'а.
3) Код подключения:
<div id="count"></div>Для связи со скриптом используется id #count", который заодно можно обработать стилями, чтобы получился цветной счётчик в рамке (как на демо).
Шаг №3 тоже копируется в html/javascript виджет Blogger'а.
4) Стили, использованные в демо:
<style> #count { display: inline-block; overflow: hidden; padding: 3px; margin: 0 15px 15px 0; font: bold 11px/22px Arial, Tahoma, sans-serif; *display: inline; /* IE6, IE7 */ *zoom: 1; /* IE6, IE7 */ color: #FFF; background: #6bec4b; border: 1px solid #77d723; border-radius: 3px; box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15); } #fb-count { float: left; padding: 3px; margin: 1px 6px 0 1px; font-size: 13px; height: 17px; line-height: 18px; background: #98ec83; border: 1px solid #dbf6ca; border-right-color: #dbf6ca; border-bottom-color: #dbf6ca; } </style>#count - отвечает за общий прямоугольник
#count - за внутренний прямоугольник
Стили выносятся в отдельный файл на хостинг, либо копируются в html виджет Blogger'а по тем же правилам, что и два последних шага установки.
По мотивам этой статьи.
Комментариев нет:
Отправить комментарий