Написал новый плагин для 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. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Уважаемый, minimus, не нашёл, где скачать файлы excanvas.js и sc.js, для установки в код счётчика, буду очень благодарен, если скинете на почту ссылку для скачивания.
Что-то не сложилось при переустановке плагина … Всё исправил – можете скачивать …
Добрый день! Почему то не отображается скрипт, только в опере его видно и то твиттер не активный! не подскажите где копать?!
Дайте URL блога …
Вроде бы разобрался,только единственное: у меня пока 0 подписчиков,в твиттере показывает цифру 0 а в фиде ничего нет,так и должно быть?!Спасибо!
Ваш Feed должен быть tokay2011, а Вы поставили в параметрах tokaysat …
Ни так ни сяк не отображает(
Может в jqwery где-то ошибся, т.к. даже окно добавления не всплывает напротив картинки с фидом?!
Awareness API в FeedBurner включен?
Спасибо!все заработало!если не ошибаюсь в посте это не указано, новички не сразу разберутся;)
Я писал об этом в статье про аналогичный плагин для WordPress … Надо и здесь написать …
Здравствуйте. Поясните, пожалуйста, не очень опытному человеку, куда именно в шаблоне надо вставлять код? Где искать эту секцию header?
Разобрался со своим предыдущим вопросом с помощью другой публикации, где этот момент был разжёван.
Тепрь у меня другой вопрос: как изменить цвета счётчиков? параметры color нигде в коде не указаны!
В параметрах …
Так в том-то и дело, что в опубликованном коде плагина отсутствуют параметры цвета color, colorTo и borderColor. После параметра dgv в коде плагина сразу идёт параметр id FeedBurner. (((
Перепутал с WP плагином … В Blogger-плагине это пока не поддерживается …
Спасибо, щас поставлю себе: //techava.ru/
Подскажите, пожалуйста, что делать, если работает только в Google Chrome. Mozilla, Opera – отображается белое поле. Адрес блога – sanesterenko.blogspot.com
Для начала укажите в скрипте id Feedburner’а и Twitter’а …
Замечательный плагин… а как ещё к нему tweeter добавить?
Спасибо! Классная штучка!
спамеры задолбали
Таки да!