Счётчик подписчиков для Feedburner своими руками

В прошлой заметке, которую я запостил ради истории (глобальный лаг одного из сервисов гугл не каждый день увидишь), в центре внимания находился, наверное, самый популярный из счётчиков, которые используют блогеры, - FeeedBurner Counter.

Установить счётчик очень легко: надо в админке забрать код и вставить в 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+'&nbsp;'+((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'а по тем же правилам, что и два последних шага установки.

По мотивам этой статьи.

Комментариев нет:

Отправка комментария