Написал новый плагин для 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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/> <script src='//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: '//YOUR_FILE_HOST/feedburner.png', hint: 'Подпишитесь на рассылку сайта <strong><data:blog.title/></strong> для получения последних новостей и изменений сайта!', hintImg: '//YOUR_FILE_HOST/feedburner-hint.png' }, twitter: { id: 'minimus', imgUrl: '//YOUR_FILE_HOST/twitter.png', hint: 'Совместно используйте и узнавайте то, что происходит прямо сейчас на сайте <strong><data:blog.title/></strong>!<br/>Присоединяйтесь ко мне на Twitter!', hintImg: '//YOUR_FILE_HOST/twitter-hint.png' } }; </script> <script src='//YOUR_FILE_HOST/excanvas.js' type='text/javascript'/> <script src='//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.
Скачать
© 2010 – 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Плохо, что в архиве нет картинок, приходится брать из плагина wordpress.
Oops! Моя ошибка! К вечеру добавлю …
Надо было б дописать, что включен FeedCount должен :)))
Не Feed Count, а Awareness API …
И еще вопрос
Для тебя
Blogger-плагин Simple Counters
и //feeds.feedburner.com/~fc/minimus?bg=99CCFF&fg=444444&anim=0
Показывает одинаковое число
Уменя же в первом случае 0 в другом 3
//feeds.feedburner.com/~fc/lesha?bg=99CCFF&fg=444444&anim=0
Проверь включен ли Awareness API …
Все равно 0 или это feed глючит
Попробуй посмотреть, что выдаётся здесь //pipes.yahoo.com/pipes/pipe.run?_id=b47b5cb1a615935b43858618ebe5ee32&_render=json&uri=minimus
Вместо minimus поставь свой ID
Это JSON – смотри значение circulation
0 :))
Тогда почему здесь //feeds.feedburner.com/~fc/lesha?bg=99CCFF&fg=444444&anim=0
3
Лана сча пойду разбираться как работать с Feed
Awareness API и Feed Count – это разные вещи. Если юзеры подписались сегодня, в Awareness API может появиться только завтра … 🙁
хм поставил виджет но почему то он ничего не отображает! что делать? помогите !
//dota-ru.blogspot.com
У Вас не задан аккаунт twitter … И ещё, сколько у Вас подписчиков на FeedBurner?
Здравствуйте, у меня такой вопрос, можете ли пивест html код с qtip для ссылок :)))
Не получается вставить
В секции header вставьте следующий код:
Всё!
Спасибо, за помощь!!!
А как сменить фон подсказки ?
Пока никак … Руки не доходят … 🙁
Спасибо!
Не работает почему-то . Если нажать “просмотр” в редакторе, то тогда видно только синию панельку. Если сохранить шаблон и загрузить блог, ничего не видно.
класс! давно искал такое – смотрится очень здорово. мне понравилось. автору спасибо огромное.
minimus, скажите, пожалуйста, как изменить цвет хинта? У вас на сайте он вроде как немного другой…
Заранее, большое спасибо.
К сожалению, на сегодняшний день, темы хинтов для blogger-плагина не поддерживаются. 🙁
Нельзя ли никак добавить ещё один сервис, например, «В Контакте»?
Я сейчас работаю над другим плагином. Когда закончу, буду рассматривать все предложения по этому плагину. 😉
Давно хотела прикрутить эту фишку.
Пишу инструкцию для полных чайников.
В Вашей инструкции по установке написано: Разместить файлы плагина на хостинге..
В какие именно папки загружать файлы? Все в папку Plagins или в папку со скриптами?
Будьте ласковы, напишите инструкцию по установке ДЛ.
Размещать можно в любой папке – там всего один файл скрипта и четыре файла изображений.
привет и спасибо за плагин!
а как можно уменьшить рамку , что бы был только твиттер?
удалила скрипт для фидбёрнера, но осталосъ свободное место…так не красиво 😉
заранее спасибо
Пока это невозможно, но в новой версии, я думаю, всё будет так как надо …
А не нельзя это адаптировать под phpbb3? Спасибо, за ранее.
Вставьте код в файл overall_header.php, если Вы используете тему prosilver, то этот файл находится в папке styles/prosilver/template. Вставьте код, где-нибудь в районе 38-ой строки и не забудьте использовать тег CDATA. 😉