Рейтинг-виджет от Graddit

2011-11-11
    Инструкция для пользователей Tumblr здесь.

    Graddit представляет рейтинг-виджет, который вы легко сможете добавить на страницы своего сайта. Код виджета можно получить на странице рейтингов. У рейтингов гибкие настройки, но обо всём по порядку.

    На странице выбора виджета для демонстрации возможностей есть несколько рейтингов с предустановленными настройками, код которых вы сможете тут же скопировать и использовать в блоге. Среди них: рейтинги со звёздами в виде картинкок, рейтнги с символьными звёздами и просто с произвольными символами, рейтинги с отзывами, рейтинги вида +/-. Код специально подготовлен для использования в шаблонах Blogger, но есть и код в "сыром" виде:


    Если по какой-то причине вас не устраивает поведение или вид рейтингов по умолчанию, то вы можете по своему вкусу изменить параметры виджета. Вот некоторые из них (на примере общего кода)

<div id='rate' class='rate'>{[["&#9734;","&#9733;"]]}</div>

Этот элемент div содердит информацию о символах, которые будут использованы при отображении рейтинга: "&#9734;" соответствует незакрашенной звезде, "&#9733;" — закрашенной. id элемента важен, он передаётся на сервер (см. ниже).

<div id='stats'></div>

Этот элемент div будет содержать текст с количеством голосов. Его id также передаётся на сервер, но этот div может и отсутствовать, вместо него можно использовать предыдущий (rate) div.

<script type='text/javascript' src='http://www.graddit.com/rate/ rus/ 5/mjov07w?id=rate&stats=stats'></script>
обязательная часть, которую не стоит менять язык: rus или eng количество звёзд уникальный идентификатор рейтинга id элемента, куда будет помещён рейтинг id элемента, куда будет помещён текст (количество голосов)

Конечно, это не все возможные параметры. О некоторых речь пойдёт ниже, о других читайте следующие посты. Всё это касается внешнего вида и некоторых аспектов поведения виджета, но если вы хотите всё кардинально изменить, то специально для этого есть ещё один параметр: ...&callback=my_function_name

В этом случае после отображения рейтинга будет вызвана ваша JS функция my_function_name со следующими параметрами:
"key"уникальный идентификатор рейтинга
"id"id элемента div, в который будет помещён виджет
"stats"id элемента div, в который будет помещён текст (количество голосов)
"average"средний рейтинг
"amount"количество звёзд
"votes"количество голосов
"data"расшифровка голосов
"views"количество просмотров

Таким образом, вы обладаете полным контролем над виджетом.


Как добавить рейтинг-виджет в Blogger
  1. Выберите виджет, позже вам нужно будет скопировать код из закладки Blogger.
  2. В настройках блога перейдите на закладку Дизайн в старом интерфейсе Blogger; в новом интерфесе это пункт Template. Сохраните старый шаблон (кнопка Backup/Restore). Нажмите "Изменить HTML" и поставьте галочку напротив "Расширить шаблоны виджета":
    Старый интерфейс BloggerНовый интерфейс
  3. Сделать резервную копию шаблона можно и сейчас — просто выделите весь текст шаблона, скопируйте и сохраните в файле. В коде шаблона найдите строку "<data:post.body/>" и вставьте после неё код виджета. Если строка "<data:post.body/>" присутствует больше, чем в одном месте, и вы не уверены, куда именно вставить код виджета, то можно поэкспериментировать: вставить, например, "!!!", сохранить шаблон и проверить, угадали вы с местом или нет. Чтобы рейтинг отделить от текста парой пустых строк, вставьте перед ним <br/><br/>. Получится что-то вроде:
  4. В секцию <head>...</head> вашей страницы добавьте стили graddit:
    <link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
  5. Сохраните шаблон и убедитесь, что рейтинг появился под всеми вашими постами. Если вы не хотите, чтобы рейтинг был виден на главной странице блога, а появлялся только при открытии постов, в коде виджета замените
    "<b:if cond='data:blog.pageType != &quot;static_page&quot;'>"
    на
    "<b:if cond='data:blog.pageType == &quot;item&quot;'>"

    Справа сверху на главной странице отображается пульс рейтингов — последние записи на различных сайтах и блогах, за которые голосуют, облако меток наиболее читаемых постов и картинки страниц, на которых недавно проголосовали люди.

    Сервис также предоставляет статистику голосований, а ещё есть личный кабинет — очень полезная штука, где можно настроить виджеты лучших и похожих постов, но об этом речь пойдёт позже.

    Ещё немного про поведение виджета. Наведя (и подержав пару секунд) курсор мыши на виджет можно получить расшифровку голосов:

Это можно отключить — удалите параметры ...&info= и ...&info_delay= из кода виджета. Вы можете контролировать время задержки появления расшифровки при помощи параметра info_delay, значение которого — количество секунд, до появления информации. Вы можете полностью контролировать всплывающее окно при помощи стилей, в т.ч. удалять нежелательные элементы. Для этого, правда, придётся где-то разместить аналог файла graddit.css и поддерживать его самостоятельно.



Ниже — наглядный пример, как это будет выглядеть в блоге.
И ещё один пример здесь: http://blogger.omg-linux.ru/2011/11/reitingi-dlya-bloga.html
Рейтинг-виджет от Graddit, 4.72 out of 5 based on 50 ratings

Оцени и поделись
{[['']]}


Ещё больше полезного:

Интеграция сервиса Fruitful Bookmarks с сайтом на примере блог-площадки Blogger (blogspot.com)

2011-10-19
    Забегая вперёд, заметим, что результат интеграции вы можете увидеть на этом блоге: появились дополнительные элементы управления слева и справа на странице.
    При помощи ссылок слева (↓ и ↑) посетители могут сохранять и восстанавливать позицию просмотра блога. Конечно, это лишь часть функционала, предоставляемого полноценным хранилищем Fruitful Bookmarks, но зато она работает без этого самого хранилища, пользователям (и даже владельцу сайта или блога) не нужно его создавать. Сделать это предельно просто: нужно взять второй скрипт со страницы http://www.fruitfulbookmarks.com/#site, немного модифицировать, а именно, заменить все символы & на &amp; (всего их 4), так как Blogger экранирует эти символы в шаблонах, и добавить его в шаблон блога, например, в самом конце перед закрывающимся тегом </body>.

    Элементы справа помогают вашим посетителям сообщать об ошибках и опечатках, найденных в тексте, а вам — отслеживать эту информацию и исправлять найденные недочёты. Для получения панели управления опечатками следуйте инструкции из предыдущего поста: http://fruitfulbookmarks-ru.blogspot.com/2011/10/blog-post.html, модифицируйте стили по собственному желанию и получите удобный инструмент уведомления об ошибках и опечатках в вашем блоге на blogspot.com.

Оцени и поделись
{[['']]}


Ещё больше полезного:

Отслеживание ошибок и опечаток в текстах на вашем сайте или блоге

2011-10-11

    Посетители вашего сайта или блога могут помогать вам с исправлением ошибок, которые, к сожалению, иногда появляются в текстах. Опечатки, неточности, пропущенные знаки препинания — всё это будет найдено пользователями и с помощью нового сервиса Fruitful Bookmarks запротоколировано для последующего исправления. Для этого необходимо сделать следующее:

  1. перейти на сайт Fruitful Bookmarks;
  2. создать новое хранилище, вам понадобится идентификатор (ID, состоящий из 10 знаков) этого хранилища для последующих шагов;
  3. добавить в код HTML ваших страниц стили и элементы для управления правками (смотрите пример ниже).


    Пример того, как могут выглядеть стили элементов управления правками (имена должны совпадать):
div.ffbs_correction_main {
position: fixed;
top: 40px;
right: 1px;
width: 240px;
height: 33px;
border: 1px solid #20cc20;
z-index: 9999;
background: #ffe0e0;
padding-left: 2px;
padding-right: 2px;
overflow: auto;
opacity: 0.8;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 10px;
}

span.ffbs_moreless {
border-bottom: 1px dashed black;
font-size: 8px;
}

span.ffbs_moreless:hover {
cursor: pointer;
}

span.ffbs_lookup {
border-bottom: 1px dashed black;
font-size: 10px;
}

span.ffbs_lookup:hover {
cursor: pointer;
}

span.ffbs_highlight {
color: red;
background: #d0d0d0;
border: 1px dotted #0099cc;
}

    Пример загрузки элементов управления правками:
    <script src='http://www.fruitfulbookmarks.com/correction/init/ID ВАШЕГО ХРАНИЛИЩА/rus/collapse'></script>

    Немного подробнее об адресе http://www.fruitfulbookmarks.com/correction/init/ID ВАШЕГО ХРАНИЛИЩА/rus/collapse:
  • ID ВАШЕГО ХРАНИЛИЩА — этот тот самый 10-символьный идентификатор недавно созданного вами хранилища;
  • rus — язык элементов управления и сообщений. Здесь два возможных варианта: rus и eng;
  • collapse говорит о том, что элементы управления изначально будут отображаться в коротком виде, т.е. без отображения самих правок. Другая возможная опция — expand;

    Чтобы добавить правку, пользователю необходимо выделить текст, содержащий ошибки, нажать Ctrl+Enter и в открывшемся окне предложить исправленный вариант. После обновления страницы правка отобразится в "окне" управления правками, раскрыв которое администратор ресурса сможет перейти к проблемному месту в тексте или удалить правку.
    Пример работы вы можете посмотреть прямо сейчас — управление правками находится справа от этого сообщения.

    О выявленных ошибках в работе правок сообщайте в комментариях.

    P.S. И немного ошибок — вдруг в тексте сверху их нет.

Оцени и поделись
{[['']]}


Ещё больше полезного:

Обновление букмарклетов

2011-07-18
В код букмарклетов внесены небольшие изменения, позволяющие улучшить поведение сервиса в некоторых ситуациях. В связи с этим рекомендуем обновить букмарклеты - просто зайдите в хранилище и перетащите букмарклеты на панель браузера.

Оцени и поделись
{[['']]}


Ещё больше полезного:

Новые возможности: цитирование

2011-06-05
Появилась возможность создавать цитаты. Простой пример: перейдите по ссылке http://www.fruitfulbookmarks.com/quote/02b756eb-8fe1-11e0-8360-25775ea19ffa, страница откроется на определённом месте, где вы увидите подчёркнутый текст — это и есть цитата. Создать такую цитату для произвольной веб страницы вам поможет новый букмарклет "abc", который можно найти на сайте Fruitful Bookmarks (слева). Перетащите его на панель браузера, затем откройте нужную страницу в нужном месте, выделите небольшой фрагмент текста и кликните на букмарклет. В открывшемся сообщении скопируйте ссылку, эту ссылку теперь можно передать собеседнику, не объясняя, что и где искать. Это можно комбинировать с сервисами сокращения ссылок, например, так: http://tinyurl.com/3d53tn2.

Оцени и поделись
{[['']]}


Ещё больше полезного:

Изменения в коде для сайтов

2011-05-15
Для избежания проблем, связанных с кешированием, в код для внедрения в сайты были внесены небольшие изменения. Заодно на всех страницах сайта www.fruitfulbookmarks.com в левом верхнем углу были добавлены элементы для сохранения/восстановления позиции — для демонстрации того, как это может выглядеть на вашем сайте.

Оцени и поделись
{[['']]}


Ещё больше полезного:

Fruitfulbookmarks — онлайн закладки с сохранением позиции просмотра

2011-05-02
    Сервисов онлайн закладок много, и все они предоставляют примерно одинаковый набор функций, предложить что-то новое, кажется, уже невозможно. Тем не менее в проекте Fruitful Bookmarks есть кое-что уникальное, а именно, функция сохранения и восстановления позиции просмотра. Работает не только с обычными страницами, но и с изображениями. Стандартные возможности тоже присутствуют. На данный момент пользователи могут:
  • сохранять страницы в закладки в один клик (при помощи букмарклетов), при этом сохраняется позиция страницы, а позже так же в один клик можно эту позицию восстановить;
  • каталогизировать сохранённые закладки. В вашем распоряжении ajax-интерфейс;
  • делиться своими закладками с другими пользователями;
  • создавать более одного хранилища закладок;
  • владельцы сайтов могут интегрировать сервис со своими страницами;
  • и всё это без необходимости регистрации.
    Немного о механизмах работы. Чтобы пользоваться сервисом, вам не нужно регистрироваться, вы просто создаёте хранилище закладок и перетаскиваете предложенные букмарклеты на панель браузера (здесь могут возникнуть нюансы, например в Internet Explorer придётся сначала сохранить букмарклеты в "Избранное", а затем уже перенести их на панель браузера, а Opera вовсе не работает с этим типом букмарклетов). Далее всё просто: нажмите "↓", чтобы сохранить страницу (и позицию), а позже — "↑", чтобы восстановить. Есть и другие возможности, а также некоторые ограничения. Подробности — в разделе помощи.
    Обо всех новых функциях, а так же об исправлениях, мы будем писать сообщения в этом блоге. Плодотворной вам работы.

Оцени и поделись
{[['']]}


Ещё больше полезного: