Управление виджетами graddit при помощи callback функций

2012-06-24
    Мудрёный заголовок, но суть проста: по умолчанию виджеты отображаются в том месте страницы, где находится их контейнер, id которого вы передаёте на сервер. Но что, если, к примеру, вы хотите, чтобы виджет лучших постов появлялся при достижении читателем конца страницы (и исчезал при прокрутке вверх)? Для упрощения решения этой задачи виджеты поддерживают параметр callback; при помощи него вы можете передать управление вашему собственному скрипту после того, как код виджета отработал. Более того, в файле http://www.graddit.com/js/graddit-extras.js есть рабочий пример функции, которую вполне уже можно использовать. Итак, рассмотрим, как всё это работает на примере виджета лучших сообщений.

Вот код (он вставлен в это самое место поста):
<div id='callback_example' style='visibility: hidden; display: none; position: fixed; right: 10px; bottom: 10px;'>Лучшее:</div><script type="text/javascript" src="http://www.graddit.com/showtop/rus/8?id=callback_example&callback=gradditDisplayWidgetCallback"></script>

Код здесь, но виджета вы не увидите, потому что функция gradditDisplayWidgetCallback изменила поведение виджета. Теперь он будет появляться в нижнем правом углу, если вы прокрутите страницу вниз. И, соответственно, исчезать, если вы прокрутите страницу обратно вверх.

    Если вы хотите использовать javascript функцию из примера, то вам нужно подключить js файл в шаблоне ваших страниц, добавив туда такую строку:

<script type="text/javascript" src="http://www.graddit.com/js/graddit-extras.js"></script>

    Вот и всё, что вам нужно: подключить файл graddit-extras.js и указать callback функцию при вызове виджета. Файл graddit-extras.js время от времени будет пополняться новыми полезными функциями (следите за анонсами).

    Напомню, что внешний вид виджетов настраивается в панели управления.

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


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

Перевод виджета рейтингов graddit на любой язык

2012-06-24
Виджет рейтингов graddit поддерживает два языка: русский и английский. Это определяется параметром rus или eng при вызове виджета (подробнее здесь). Разумеется, это не совсем удобно, если ваши страницы написаны на другом языке, получается языковая каша, которая выглядит не очень красиво. Рассмотрим на примере самого популярного кода виджета (жёлтые звёзды) как можно решить проблему перевода. Код выглядит так:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>
    </b:if>
  </div> Нравится пост? 
  <div expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[[&#39;&lt;img src=&quot;http://img.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
  <script expr:src='&quot;http://graddit.com/rate/rus/5/&quot; + data:post.id + &quot;?stats=&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;id=&quot; + data:post.id + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&quot;' type='text/javascript'/>
</b:if>

Жирным выделен интересующий нас элемент div. Помимо указанного выше он может содержать следующие значение в data-атрибутах:
  • data-label-votes - текст для "голосов";
  • data-label-views - текст для "просмотров";
  • data-label-rating - текст для "рейтинга"'
  • data-label-info-rating - текст для рейтингов во всплывающем окне с расшифровкой голосов.
Проще понять на примере. Такой код (с добавленным параметром average=yes для отображения значения рейтинга):

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>
    </b:if>
  </div> Нравится пост? 
  <div data-label-votes='проголосовало: ' data-label-views='посмотрели: ' data-label-rating='оценили на: ' data-label-info-rating='Подробно' expr:id='data:post.id' style='padding-left: 3px; padding-right: 3px; display: inline; visibility: hidden;'>{[[&#39;&lt;img src=&quot;http://img.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
  <script expr:src='&quot;http://graddit.com/rate/rus/5/&quot; + data:post.id + &quot;?stats=&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;average=yes&amp;id=&quot; + data:post.id + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&quot;' type='text/javascript'/>
</b:if>

Даст вот такой рейтинг:

{[['']]}


В отличие от стандартного, который вы видите ниже.

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


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

Виджет связанных постов обновился

2012-06-05

Виджет связанных постов стал намного лучше. Что появилось:

  • стили для управления отображением виджета;
  • загрузка картинок;
  • автоматические рекомендации на основе меток;
  • улучшенный интерфейс. Об этом ниже.

Интерфейс

Если вы всё ещё не получили доступ к панели управления, то сделайте это сейчас.
Панель рекомендаций изменилась, появились настройки:


Теперь можно:
  • указать, что должен делать виджет, если для какого-то поста связанные страницы не заданы:
    • подобрать страницы автоматически (на основе меток);
    • ничего не показывать;
    • показать статический HTML. Впрочем, ничто не мешает добавить туда и javascript;
  • загружать картинки (должен быть указан адрес фида);
  • указать количество выводимых ссылок. Если количество связанных (или автоматически найденных) страниц больше этого числа, то будет выведено указанное количество выбранных произвольно ссылок;
  • указать максимальную длину выводимого заголовка (или ссылки, если указано, что заголовки загружать не нужно);
  • настраивать внешний вид виджета;

Интерфейс ручной настройки связанных постов тоже поменялся и стал намного удобнее:

Вы по-прежнему создаёте рекомендации при помощи ссылки и указываете связанные посты при помощи , но теперь при выборе контейнера в правой части подсвечиваются:
  • тёмно-серым цветом — страница, к которой относятся рекомендации (контейнер);
  • светло-серым — собственно рекомендации (связанные страницы);
  • светло-зелёным — автоматически подобранные на основе меток страницы, которые вы можете захотеть включить в первую очередь;

Собственно код виджета (для Blogger-а) нужно брать с этой же страницы, над списком рекомендаций.

Возможные проблемы

  1. В правой части отображаются не все страницы. Это может быть от того, что ваш блог читают жители других стран, и страницы попадают в базу данных, имея доменные имена вроде: ваш-блог.blogspot.com.nl или ваш-блог.blogspot.co.uk. Чтобы это разрешить вам нужно в коде вызова рейтинга указать параметр domain. Например, для blogger-а, так:

    <script expr:src='"http://graddit.com/rate/rus/...url=&quot; + data:post.url + &quot;&amp;domain=ваш-блог.blogspot.com&amp;labels=...</script>

    и подождать некоторое время, пока информация обновится в базе данных.
  2. Нет меток. Вам нужно обновить код виджета - просто возьмите его с главной страницы. Опять же, придётся подождать, пока информация обновится.



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


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