Обновил плагин Simple Counters для WordPress и решил выполнить давнишнее обещание по поводу обновления его аналога для Blogger. Для тех кто не в курсе что такое Simple Counters сообщаю – это плагин выполненный в виде бейджика-информера. Информер выводит количество подписчиков на FeedBurner и последователей (followers) на Twitter.
Плагин полностью настраиваемый. С помощью пользовательских параметров плагина можно настроить цвет шрифта, цвета и вектор направления градиента фона, цвета и/или темы подсказок, иконки для FeedBurner и Twitter, как для бейджика, так и для подсказок, позиционирование бейджика на экране браузера и т.д. и т.п.
Новое в версии 2.0
- Подсказки используют jQuery плагин qTip2 (в первой версии использовался qTip1)
- Настройка тем подсказок (в первой версии настройки отсутствовали)
- Настройка темы бейджика (стандартная, win7)
- Настройка цвета окантовки (только для стандартной темы)
- Настройка цвета шрифта
- Поддержка IE7 и IE8 (рисуется с помощью VML)
- ВСЁ рисуется с помощью canvas (современные браузеры) или VML (старички IE7, IE8)
Установка
Код устанавливается одним куском, непосредственно перед закрывающим тегом секции head (см. ниже):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='//www.w3.org/1999/xhtml' xmlns:b='//www.google.com/2005/gml/b' xmlns:data='//www.google.com/2005/gml/data' xmlns:expr='//www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> ... </head> <body> </body> </html> |
Код показанный ниже вставляйте в районе выделенной строки показанной в вышепреведённом коде.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'></script> <script type='text/javascript'>jQuery.noConflict();</script> <style> .ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}.ui-tooltip .ui-tooltip-tip{margin:0 auto;overflow:hidden;z-index:10;}.ui-tooltip .ui-tooltip-tip,.ui-tooltip .ui-tooltip-tip *{position:absolute;line-height:.1px!important;font-size:.1px!important;color:#123456;background:transparent;border:0 dashed transparent;}.ui-tooltip .ui-tooltip-tip canvas{top:0;left:0;}#qtip-overlay{position:fixed;left:-10000em;top:-10000em;}#qtip-overlay.blurs{cursor:pointer;}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:black;opacity:.7;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}/*!Light tooltip style */ .ui-tooltip-light .ui-tooltip-titlebar,.ui-tooltip-light .ui-tooltip-content{border-color:#E2E2E2;color:#454545;}.ui-tooltip-light .ui-tooltip-content{background-color:white;}.ui-tooltip-light .ui-tooltip-titlebar{background-color:#f1f1f1;}/*!Dark tooltip style */ .ui-tooltip-dark .ui-tooltip-titlebar,.ui-tooltip-dark .ui-tooltip-content{border-color:#303030;color:#f3f3f3;}.ui-tooltip-dark .ui-tooltip-content{background-color:#505050;}.ui-tooltip-dark .ui-tooltip-titlebar{background-color:#404040;}.ui-tooltip-dark .ui-tooltip-icon{border-color:#444;}.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}/*!Cream tooltip style */ .ui-tooltip-cream .ui-tooltip-titlebar,.ui-tooltip-cream .ui-tooltip-content{border-color:#F9E98E;color:#A27D35;}.ui-tooltip-cream .ui-tooltip-content{background-color:#FBF7AA;}.ui-tooltip-cream .ui-tooltip-titlebar{background-color:#F0DE7D;}.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{background-position:-82px 0;}/*!Red tooltip style */ .ui-tooltip-red .ui-tooltip-titlebar,.ui-tooltip-red .ui-tooltip-content{border-color:#D95252;color:#912323;}.ui-tooltip-red .ui-tooltip-content{background-color:#F78B83;}.ui-tooltip-red .ui-tooltip-titlebar{background-color:#F06D65;}.ui-tooltip-red .ui-state-default .ui-tooltip-icon{background-position:-102px 0;}.ui-tooltip-red .ui-tooltip-icon{border-color:#D95252;}.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{border-color:#D95252;}/*!Green tooltip style */ .ui-tooltip-green .ui-tooltip-titlebar,.ui-tooltip-green .ui-tooltip-content{border-color:#90D93F;color:#3F6219;}.ui-tooltip-green .ui-tooltip-content{background-color:#CAED9E;}.ui-tooltip-green .ui-tooltip-titlebar{background-color:#B0DE78;}.ui-tooltip-green .ui-state-default .ui-tooltip-icon{background-position:-42px 0;}/*!Blue tooltip style */ .ui-tooltip-blue .ui-tooltip-titlebar,.ui-tooltip-blue .ui-tooltip-content{border-color:#ADD9ED;color:#5E99BD;}.ui-tooltip-blue .ui-tooltip-content{background-color:#E5F6FE;}.ui-tooltip-blue .ui-tooltip-titlebar{background-color:#D0E9F5;}.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{background-position:-2px 0;}/*!Add shadows to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE6+,Safari 2+*/ .ui-tooltip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);}.ui-tooltip-shadow .ui-tooltip-titlebar,.ui-tooltip-shadow .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3)";_margin-bottom:-3px;.margin-bottom:-3px;}/*!Add rounded corners to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE9+,Safari 2+*/ .ui-tooltip-rounded,.ui-tooltip-rounded .ui-tooltip-content,.ui-tooltip-tipsy,.ui-tooltip-tipsy .ui-tooltip-content,.ui-tooltip-youtube,.ui-tooltip-youtube .ui-tooltip-content{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.ui-tooltip-rounded .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-titlebar{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.ui-tooltip-rounded .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-tipsy .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-youtube .ui-tooltip-titlebar+.ui-tooltip-content{-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}/*!Youtube tooltip style */ .ui-tooltip-youtube{-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;}.ui-tooltip-youtube .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,0.85);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border-color:#CCC;}.ui-tooltip-youtube .ui-tooltip-icon{border-color:#222;}.ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-jtools{background:#232323;background:rgba(0,0,0,0.7);background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333;}.ui-tooltip-jtools .ui-tooltip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";}.ui-tooltip-jtools .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";}.ui-tooltip-jtools .ui-tooltip-titlebar,.ui-tooltip-jtools .ui-tooltip-content{background:transparent;color:white;border:0 dashed transparent;}.ui-tooltip-jtools .ui-tooltip-icon{border-color:#555;}.ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{border-color:#333;}.ui-tooltip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,0.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,0.4);box-shadow:4px 4px 5px rgba(0,0,0,0.4);}.ui-tooltip-cluetip .ui-tooltip-titlebar{background-color:#87876A;color:white;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-content{background-color:#D9D9C2;color:#111;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-icon{border-color:#808064;}.ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{border-color:#696952;color:#696952;}.ui-tooltip-tipsy{border:0;}.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,.87);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border:0 transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:bold;line-height:16px;text-shadow:0 1px black;}.ui-tooltip-tipsy .ui-tooltip-titlebar{padding:6px 35px 0 10;}.ui-tooltip-tipsy .ui-tooltip-content{padding:6px 10;}.ui-tooltip-tipsy .ui-tooltip-icon{border-color:#222;text-shadow:none;}.ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-tipped .ui-tooltip-titlebar,.ui-tooltip-tipped .ui-tooltip-content{border:3px solid #959FA9;filter:none;-ms-filter:none;}.ui-tooltip-tipped .ui-tooltip-titlebar{background:#3A79B8;background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";color:white;font-weight:normal;font-family:serif;border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-tipped .ui-tooltip-content{background-color:#F9F9F9;color:#454545;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-tipped .ui-tooltip-icon{border:2px solid #285589;background:#285589;}.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{background-color:#FBFBFB;color:#555;}.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{filter:none;-ms-filter:none;} </style> <style> .ui-tooltip-custom .ui-tooltip-titlebar, .ui-tooltip-custom .ui-tooltip-content{ border-color: #145181 !important; color: #ffffff !important; } .ui-tooltip-custom .ui-tooltip-content{ background-color: #1c82d0 !important; } .ui-tooltip-custom .ui-tooltip-titlebar{ background-color: #1c82d0 !important; } </style> <script type='text/javascript'> //<![CDATA[ var scOptions = { position: "right", delta: 0, fontColor: "#ffffff", color: "#1c82d0", colorTo: "#145181", borderColor: "#676767", borderStyle: "win7", dgv: "vertical", hints: "themed", feedBurner:{ id: "minimus", imgUrl: "//simple-counters.googlecode.com/svn/tags/2.0/img/feedburner.png", count: -1, hint: "Подпишитесь на рассылку сайта <strong><data:blog.title/></strong> для получения последних новостей и изменений сайта!", hintImg: "//simple-counters.googlecode.com/svn/tags/2.0/img/feedburner-hint.png", str: ["читатель", "читателя", "читателей"] }, twitter:{ id: "minimus", imgUrl: "//simple-counters.googlecode.com/svn/tags/2.0/img/twitter.png", count: -1, hint: "Совместно используйте и узнавайте то, что происходит прямо сейчас на сайте <strong><data:blog.title/></strong>!<br/>Присоединяйтесь ко мне на Twitter!", hintImg: "//simple-counters.googlecode.com/svn/tags/2.0/img/twitter-hint.png", useAvatar: true, str: ["спутник", "спутника", "спутников"] }, plurals: "(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)", hintStyle:"ui-tooltip-custom" }; //]]> </script> <script type='text/javascript' src='//simple-counters.googlecode.com/svn/tags/2.0/jquery.qtip.min.js'></script> <script type='text/javascript' src='//simple-counters.googlecode.com/svn/tags/2.0/sc.min.js'></script> |
Минимальные изменения в коде, которые необходимо сделать перед вставкой в шаблон:
- Если Ваш шаблон или вставленные Вами коды используют jQuery, удалите первые две строки (выделены в коде). Если Вы не поняли предыдущую фразу, ничего менять не надо – оставьте как есть.
- Обязательно измените ID Feedburner и Twitter на свои (строки 33 и 41, выделены в коде), в противном случае будут показываться мои данные!
Настройка параметров
Параметры, задаваемые пользователем (scOptions):
- position – right или left, вывод бейджика справа или слева в окне браузера.
- delta – цифровое значение в пикселах. Отрицательное значение – смещение бейджика вверх относительно средней линии экрана браузера, положительное – вниз на заданное количество пиксел.
- dgv – направление вектора градиента фона. horizontal – справа налево, vertical – сверху вниз.
- color – начальный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#1c82d0′).
- colorTo – конечный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#145181′).
- borderColor – Цвет полупрозрачной (40%) окантовки бейджика. Шесть шестнадцатиричных цифр (‘#676767′).
- borderStyle – Стиль окантовки бейджика. Строковая переменная: “default” или “win7”.
- fontColor – цвет шрифта бейджика (“#ffffff”).
- hints – не трогайте этот параметр – “уши” WordPress плагина (“themed”).
- plurals – Формула задающая правила обработки форм множественного числа. По-умолчанию задана формула для русского языка (“(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)”), для английского будет выглядеть так: “(n != 1)”. Все формулы для различных язаков можно найти на сайте sourceforge.net.
- hintStyle – стиль подсказки. По-умолчанию “ui-tooltip-custom”. Может быть: ui-tooltip-custom, ui-tooltip-plain, ui-tooltip-light, ui-tooltip-dark, ui-tooltip-red, ui-tooltip-green, ui-tooltip-blue.
FeedBurner:
- id – Ваш ID на FeedBurner
- imgUrl – URL изображения для области FeedBurner бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
- hint – Текст или HTML-текст для подсказки FeedBurner
- hintImg – URL изображения для подсказки FeedBurner. 40х40 пиксел, прозрачный фон, PNG.
- str – массив строк для вывода в соответствии с требуемой формой множественного числа. Для русского языка состоит из трёх элементов ([“читатель”, “читателя”, “читателей”]).
Twitter:
- id – Ваш ID на Twitter
- imgUrl – URL изображения для области Twitter бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
- hint – Текст или HTML-текст для подсказки Twitter
- hintImg – URL изображения для подсказки Twitter. 40х40 пиксел, прозрачный фон, PNG.
- useAvatar – логическая переменная, если true – использовать в качестве изображения для подсказки аватар из аккаунта Twitter, в противном случае (false) – использовать изображение заданное в переменной hintImg.
- str – массив строк для вывода в соответствии с требуемой формой множественного числа. Для русского языка состоит из трёх элементов ([“спутник”, “спутника”, “спутников”])
Внимание! В отличие от плагина для WordPress, этот плагин не кеширует результаты и, поэтому, раз в сутки, при пересчёте статистики FeedBurner’ом, будет выдаваться 0 подписчиков!.
Внимание! Для правильной работы счётчика FeedBurner необходимо включить Awareness API на вкладке Публикуй в Вашем аккаунте FeedBurner!
Скачать
Никаких изменений путей файлов в коде делать не надо. Однако, если по какой-то причине Вы хотите загружать файлы со своего ресурса, Вы можете скачать исходные файлы плагина и разместить их там, где Вам это нужно.
Simple Counters 2.0 для Blogger (80,8 КиБ, 1 058 скачиваний)
Бейджик-информер Simple Counters для Blogger-блога. Версия 2.0
Вы так же можете скачать плагин с сайта Google Codes.
Simple Counters на сайте Google Codes.
© 2012 – 2014, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Возможно ли как то сделать так, чтобы скрипт подгружался с другого сайта? Просто работает почему-то только если скрипт написан в коде стариницы.
Вы скачали весь плагин или вставили код из статьи? Если из статьи, то всё должно работать. Или Вы что-то другое имеете в виду?
Я имею в виду код из статьи, я пытался выдернуть от туда скрипт где надо менять id твиттера и feedburner’а и закинуть его на свой сервер. при этом css оставил как у вас в теле страницы. Но так скрипт почему-то не хочет работать.
Мне не совсем понятна Ваша проблема – Ваши ники на Twitter и FeedBurner тайной не являются … Их можно легко узнать подписавшись на Ваш блог или на Twitter’е …
Можно ли оставить только FeedBurner, a Twitter убрать ? Или иконка twitter-a все равно будет присутствовать в информере?
Нет. Только оба аккаунта …
Можете мне помоч?
Я вставил код, сделал id, но у меня ничего не показывается, просто синий фон, ни птички ни огня фб. Строчки не удалял, тк подключил к блогу Jq. Думал что плохо подключил, удалял этиже две строчки, так после вставки у меня вообще ничего не плавало, как ничего и не ставил. В чем может быть проблема?
URL?
Уже разобрался) Спасибо за виджет)
Спасибо за плагин! Очень полезная вещь, только почему-то пропала кнопка твиттера… все было нормально и вдруг исчезла(( в чем может быть причина?
Изменился URL доступа к данным Twitter API – испраавлено. Теперь другая проблема – FeedBurner Awareness API …
И что с этим можно сделать?
Пока не знаю! Facebook для Blogger, к сожалению, не подходит – слишком много будет секретной информации в открытом доступе. Google+ пока не даёт доступа к статистике по кругам … Надо что-то придумывать …
Хорошо бы пока придумываете иметь заглушку – например вручную указать циферку так чтобы иконка, подсказка и ссылка остались – чтобы пользователи могли подписываться как и раньше. А то сейчас пустой квардат и нет возможности подписаться по RSS
Это без проблем 😉 Посмотрите код для вставки, строка 35 count: -1 Замените -1 на любое нужное Вам число …
отлично! спасибо.
кстати,заметил что во второй версии скрипта data:blog.title не работает. этот тэг так и остается в тексте документа. при том что аналогичный тэг в заголовке страницы корректно заменяется за значение заголовка. не подскажете – что нужно исправить?
Пока не подскажу – у меня вообще не работает. А ведь работал … Разберусь – отпишусь.