Универсальные рейтинги для блога

Коллекция рейтингов для блога пополнилась ещё одной интересной разработкой: рейтингами от Fruitful Bookmarks.
Это довольно крутой виджет: собирает статистику оценок постов и пишет в базу.
Виджет рейтингов будет работать на любом блоге, где возможно использование javascript.

Сервис предлагает пять вариантов виджета...

Классические звёзды:


Последовательность чисел:


Произвольный (разные картинки голосов: ноты, инь-ян и т.п., обновите страницу, чтобы увидеть следующие):


По моей просьбе разработчик Gene добавил четвёртый "плюсомёт" - стрелки:


Да/Нет (использует другие стили):


Html коды установки для любого блога (причём есть персонально для Blogger) представлены на странице разработки - all-rate.appspot.com/rus

Живое демо:

{[["☆","★"]]}


В блоггеровском коде не забудьте изменить надпись "Rate this posting: " на свою.

Виджет рейтингов имеет свои стили и очень легко настраивается под любой дизайн:
span.ffbs_star {
color: #808080; /*цвет обводки звёзд до голосования*/
font-size: 36px;
}
span.ffbs_star_set {
color: #32b9fb; /*цвет звёзд после голосования*/
font-size: 36px;
}
span.ffbs_star_vote {
color: #7bfb32; /*цвет звёзд при наведении курсора*/
font-size: 36px;
}
div.rate {
padding-left: 3px;
padding-right: 3px;
display: inline;
visibility: hidden;
text-shadow: 12px 5px 12px #8f8f8f;
filter: dropshadow(color=#8f8f8f, offx=12, offy=5);
}
В комментариях к css я написал, какой цвет (и стиль) за что отвечает, также я для разнообразия в демке добавил тень (text-shadow и filter: dropshadow).

Установка в Blogger
.
В коде "блоггеровского" рейтинга нужно изменить строку с:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
на
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Это нужно для того, чтобы виджет был виден только на внутренних страницах и не пестрил на главной.

После чего исправленный код скопировать в свой шаблон до или после <data:post.body/> (в зависмости от того, где нужны рейтинги: вверху или внизу статьи).

Затем в шаблоне находим тег ]]></b:skin> и вставляем до него выше рассмотренные стили.

Автору-разрабочику большой и жирный зачот за прекрасный виджет.

Обновление:
На сайте заработал "Пульс рейтингов", в котором отображаются последние "отплюсованные" посты с блогов, на которых установлен один из вышеописанных виджетов:


Появилась возможность выводить под рейтингом количество просмотров статьи/поста и среднее значение голоса:


Работает статистика по страницам сайта/блога с установленными рейтингами:


Появились графические звёзды:

Что означает возможность использования своих изображений.

Появились анимированные голоса (разные изображения):


Самое главное обновление - теперь при касании мышью голосов появляется виджет с результатами:


www.fruitfulbookmarks.com

Внимание! Сервис рейтингов переехал.
Подробности читайте в Graddit - новые рейтинги для блога.

Что ещё интересного?
Виджет рейтингов кинопоиска

32 комментария:

  1. Пишу на тему Blogger уже почти два года, но замечаю, что Ваш блог очень скоро обгонит мой по всем показателям!-)

    Красивый и лёгкий дизайн в сочетании с профессиональными, интересными статьями - у Вас большое будущее!

    Рад появлению такого качественного ресурса!

    ОтветитьУдалить
  2. Спасибо, очень приятно слышать :).
    В один прекрасный день надоело писать про операционки с железками, переключился на блоггер.
    У вас мощный блог с солидным стажем, мне до такого уровня ещё бежать и бежать).

    ОтветитьУдалить
  3. Спасибо за пост, замечу только, что "произвольный" не меняется каждый раз, он меняется только когда ты обновляешь страницу http://all-rate.appspot.com, чтобы продемонстрировать возможные варианты, но при копировании кода сам символ останется статичным.

    ОтветитьУдалить
  4. Недавно сделал плагин на jQuery для рейтинга в виде звезд. Возможно Вам будут интересно добавить его в свою коллекцию. Вот ссылка на подробное описание http://biznesguide.ru/coding/156.html

    ОтветитьУдалить
  5. Да, классные звёзды, уже давно присматриваюсь :).

    ОтветитьУдалить
  6. Сделал вывод title в статистике, смотрите функции callbackStats и callbackURL, чтобы понять, как обрабтывать данные, если вы хотите вставить статистику себе в блог.

    ОтветитьУдалить
  7. Даже выводятся дескрпишн с кейвордс?

    ОтветитьУдалить
  8. Очень интересная и полезная информация, беру себе на заметку.
    Автору спасибо за хорошую работу.

    Пыхтелкин

    ОтветитьУдалить
  9. Добавил возможность посмотреть расшифровку голосов, наведя курсор на звёзды. Некоторые подробности здесь: http://fruitfulbookmarks-ru.blogspot.com/2011/11/fruitful-bookmarks.html#upd2

    ОтветитьУдалить
  10. Ты всё-таки это сделал=).
    Пора мне писать новую статью.
    А тебе может придумать пару готовых решений для копипаста? Я уже давно понял, что народ жаждет простых схем: скопировал-вставил.
    Например, сделать отдельную страницу, где 3-4 кода, которые целиком человек может скопипастить (css конечно придётся оставить на сервере) и кнопка "другие виджеты рейтингов, подробности и настройки), ведущие на основную страницу рейтингов.

    ОтветитьУдалить
  11. Ага, сделал, ещё планирую на главную кроме пульса добавить побольше ссылок на недавно проплюсованные и новые страницы прикрутить, может, ещё в этой расшифровке по запросу пользователя выводить проплюсованные посты с этого же сайта. В общем, есть планы :)
    По поводу готовых решений - так у меня и так для каждого виджета на главной код для копи-паста есть, я уже не знаю, как проще приподнести.

    ОтветитьУдалить
  12. Я знаю, что есть (уже всё облазил), от такого изобилия глаза разбегаются. Представлю, что чувствует ordinary user.
    Я бы тоже замутил себе авторские звёзды, но традиция требует стрелок.
    Да, заметил, что для комментов появились рейтинги, это вообще идеально для блоггера.

    ОтветитьУдалить
  13. Замути авторские стрелки :)
    Я спрятал код, чтобы сразу не пугать пользователей. Подумаю, что можно ещё сделать.
    Смотрю, ты добавил стрелки к комментам - отлично, посмотрим, как это отразится на нагрузке.

    ОтветитьУдалить
  14. Да меня и эти устраивают. Ностальгия по Livestreet :-).
    Зачётная работа!

    "Я спрятал код, чтобы сразу не пугать пользователей."
    Ага вижу. Посмотри на страницу через оперу, может это только у меня такие глюки.

    ОтветитьУдалить
  15. Спасибо за код. Давно хотел сделать статистику на отдельные посты. Только вот с размером звёзд не разобрался, очень уж они большие. Подскажите, как уменьшить?

    ОтветитьУдалить
  16. И подскажите, как вывести статистику рейтинга на своём блоге?

    ОтветитьУдалить
  17. А ещё про оценку комментариев непонятно.. Её также как и обычную оценку ставить? Что-то неполучается.. А статистика на неё отдельная или можно в одной странице со статистикой к постам вывести? Хотелось бы, конечно, отдельно, чтобы на отдельную страницу можно было поставить.

    ОтветитьУдалить
  18. И я совместил код "Звёзды с картинками" и "Анимированные звёзды, разные изображения": взял картинки с первого и текст со второго, чтобы "оценка" тоже была. Только у меня теперь анимация неработает - звёзды постоянно одним цветом горят.. Наверное, стиль нужно заменить?

    Пример:
    http://mrmakerlive-mylive.blogspot.com/2012/01/blog-post_6599.html

    ОтветитьУдалить
  19. А и ещё хотелось бы какое-нибудь расширение на определение поста, например, оценки постов с файлами отличались от постов со статьями и комментариев. Если кто может помочь напишите пожалуйста в профиль или здесь.

    ОтветитьУдалить
  20. Подскажите, как уменьшить?
    Во всех пунктах css уменьшить параметр font-size.

    И подскажите, как вывести статистику рейтинга на своём блоге?
    На данный момент она только такого вида http://all-rate.appspot.com/ru/stats, отдельного виджета нет. Насколько мне известно...

    А ещё про оценку комментариев непонятно.. Её также как и обычную оценку ставить?
    Точно также. Пошаговая установка.

    А статистика на неё отдельная или можно в одной странице со статистикой к постам вывести?
    Считается она отдельно, т.е. цифры голосов не зависят от цифр голосов в посте. А вот вывод статистики списком пока только один (как я выше указал).

    Звёзды постоянно одним цветом горят
    Да, не хватает стилей при наведении. Найти их нужно в "Stars pictures
    (for Blogger)". Вроде, если не ошибаюсь, это span.ffbs_star_img_vote img (при наведении курсора) и span.ffbs_star_img_set img (после голосования).

    оценки постов с файлами отличались от постов со статьями и комментариев...
    Это как? У любого голосования можно изменить внешний вид полностью :-).
    Или как-то функционально?

    ОтветитьУдалить
  21. оценки постов с файлами отличались от постов со статьями и комментариев...
    Это как? У любого голосования можно изменить внешний вид полностью :-).
    Или как-то функционально?

    Ну к примеру, я хочу, на отдельной странице, вывести статистику:
    Программы
    Игры
    Видео
    Аудио
    Картинки
    Литература
    Пользователи
    Статьи
    Комментарии

    Это реально?

    ОтветитьУдалить
  22. Если бы можно было вести подсчёт голосов в определённой категории, тогда было бы реально.
    Но в блоггер нет категории, есть ярлыки. Насколько реально просчитать в 30 постах голоса, да и ещё по определённому признаку, я не знаю, вам лучше спросить разработчика.

    ОтветитьУдалить
  23. Да, давно я тут не появлялся. Был занят переездом сервиса на выделенный сервер - перестало хватать квот app engine, да и вообще свободы маловато. Что касается статистики и как вывести её по категориям. Сейчас этого сделать нельзя просто потому, что у меня нет категорий, эти данные принадлежат движку blogspot, и я не уверен, можно ли к ним получить доступ при помощи JS. Но идея мне нравится, я, пожалуй, займусь улучшением возможностей статистики в ближайшем будущем, и если даже категории автоматически получить не удастся, я сделаю возможной их передачу при вызове виджета. Ну и вообще, с выделенным сервером открываются новые горизонты :)
    Новый адрес: http://graddit.com, все запросы на старый адрес http://all-rate.appspot.com автоматически перенаправляются на новый адрес, ничего специально делать не надо. Все данные по голосам сохранены. Инструкцию на блоге скоро поправлю. Изменения: теперь не надо маяться со стилями, достаточно подключить один файл; также появился новый виджет с возможностью добавлять отзывы (проще один раз посмотреть, чем объяснять). Планов куча, буду отписываться по мере появления новостей. Жду отзывов, всем спасибо!

    ОтветитьУдалить
  24. Да, запихнуть все стили в один файл это разумный ход.
    Правда, у меня на блоге тоже самое: всё в одном файле, поэтому для меня - лишний геморой =).
    Вижу, появились отзывы. Значит по ним нужна статистика :).

    ОтветитьУдалить
  25. > всё в одном файле, поэтому для меня - лишний геморой
    А в чём может возникнуть проблема при подключении дополнительного css файла? Вероятность конфликтов мала, у всех стилей есть префикс. Да и старый метод тоже будет работать.
    Касательно статистики по отызвам - она сейчас выводится для каждого виджета отдельно (если подержать курсор над звёздами пару секунд), но в общей статистике, конечно, тоже не помешает. Пора уже, видимо, личный кабинет пользователя организовывать.

    ОтветитьУдалить
  26. Да я шучу. Разыщу я нужные стили и скопирую в свой файлик без проблем.
    С дополнительными файлами Яндекс Директ ругается (вдруг ещё приспичит мне). Абсурд конечно, но это так=).

    Я тоже подумал про личный кабинет=). Туда ещё добавить кол-во проиндексированнных страниц в Яндекс & Гугл, определители тИЦ/Pr и прочие сео-плюшки и т.д. и можно абонетку в 500 руб. годовых рубить.

    ОтветитьУдалить
  27. Спасибо, премного благодарна

    ОтветитьУдалить
  28. А ещё голосования: http://fruitfulbookmarks-ru.blogspot.com/2012/09/graddit_16.html. Чуть позже я сделаю их создание более, так сказать, дружественным к пользователям, а пока так.

    ОтветитьУдалить