Blogger-плагин Simple Counters

Январь 6, 2010 | minimus
Рубрика: Виджеты (Blogger)

Simple Counters Написал новый плагин для WordPress и, чтобы не обделить Blogger-блоггеров, представляю его аналог для Blogger, разработанный на базе моего jQuery плагина Simple Counters. Итак, Simple Counters для Blogger-блога. Плагин выполнен в виде бейджика-информера. Информер выводит количество подписчиков на FeedBurner и последователей на Twitter.

Плагин полностью настраиваемый. С помощью пользовательских параметров плагина можно настроить цвет шрифта, цвета и вектор направления градиента фона, цвета и/или темы подсказок, иконки для FeedBurner и Twitter, как для бейджика, так и для подсказок, позиционирование бейджика на экране браузера и т.д. и т.п.

Плагин тестировался на следующих браузерах:

Mozilla FireFox 3.0 .. 3.5
Google Chrome 3.0.195.38
Apple Safari 4.0
Opera 10.10
Microsoft Internet Explorer 6..8

Работающий пример плагина можно посмотреть на моём тестовом Blogger-блоге «Блогосфера«.

Установка

Разместить файлы плагина на хостинге, который Вы используете для хранения файлов для Вашего Blogger-блога, например на FileAve.

Вставить следующий код в секцию header XML-шаблона (Панель инструментов->Дизайн->Изменить HTML):

^?View Code XML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script src='http://YOUR_FILE_HOST/jquery.qtip-1.0.0-rc3.min.js' type='text/javascript'/>
<script type='text/javascript'>
  var scUserOptions = {
    position: 'right',
    delta: 0,
    dgv: 'vertical',
    feedBurner: {
      id: 'minimus',
      imgUrl: 'http://YOUR_FILE_HOST/feedburner.png',
      hint: 'Подпишитесь на рассылку сайта <strong><data:blog.title/></strong> для получения последних новостей и изменений сайта!',
      hintImg: 'http://YOUR_FILE_HOST/feedburner-hint.png'
    },
    twitter: {
      id: 'minimus',
      imgUrl: 'http://YOUR_FILE_HOST/twitter.png',
      hint: 'Совместно используйте и узнавайте то, что происходит прямо сейчас на сайте <strong><data:blog.title/></strong>!<br/>Присоединяйтесь ко мне на Twitter!',
      hintImg: 'http://YOUR_FILE_HOST/twitter-hint.png'
    }
  };
</script>
<script src='http://YOUR_FILE_HOST/excanvas.js' type='text/javascript'/>
<script src='http://YOUR_FILE_HOST/sc.js' type='text/javascript'/>

Не забудьте заменить YOUR_FILE_HOST на Ваш реальный хостинг …

Настройка

Значение пользовательских параметров плагина (scUserOptions):

position – right или left, вывод бейджика справа или слева в окне браузера.
delta – цифровое значение в пикселах. Отрицательное значение – смещение бейджика вверх относительно средней линии экрана браузера, положительное – вниз на заданное количество пиксел.
dgv – направление вектора градиента фона. horizontal – справа налево, vertical – сверху вниз.
color – начальный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#1c82d0′).
colorTo – конечный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#145181′).
borderColor – Цвет полупрозрачной (40%) окантовки бейджика. Шесть шестнадцатиричных цифр (‘#676767′).

FeedBurner:

id – Ваш ID на FeedBurner
imgUrl – URL изображения для области FeedBurner бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
hint – Текст или HTML-текст для подсказки FeedBurner
hintImg – URL изображения для подсказки FeedBurner. 40х40 пиксел, прозрачный фон, PNG.

Twitter:

id – Ваш ID на Twitter
imgUrl – URL изображения для области Twitter бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
hint – Текст или HTML-текст для подсказки Twitter
hintImg – URL изображения для подсказки Twitter. 40х40 пиксел, прозрачный фон, PNG.

Внимание! В отличие от WordPress плагина, Blogger плагин не кэширует результаты запросов и выдаёт текущие значения. Это значит, что раз в сутки, во время пересчёта значений FeedBurner‘ом, будут выдаваться нулевые значения!