Япа-кнопки

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

Умная япа-кнопка покажет количество голосов за статью, этим она лучше статической ссылки с картинкой. И к ней гораздо легче прикрутить скины.

Доступно 4 варианта кнопки: широкая (wide), стандартная (medium), компактная (compact) и иконка (icon).

перейти сразу к кнопко-конструктору

WideMediumCompactIcon
Чтобы япа-кнопки появились на вашей странице необходимо:
  1. пометить ссылки (<a>) специальным классом. Этот класс даст понять скрипту где будут расположены кнопки. На странице может быть несколько тегов <a>, и соответственно - несколько кнопок. Обратите внимание - у ссылок проставлен href на страницу добавления новостей в Япу. Без него кнопка не будет работать как задумано!
  2. подключить наш скрипт, который находится по адресу http://www.yapa.ru/static/api/buttons.js. Скрипт достаточно подключить один раз - он найдет все помеченные теги и заменит их кнопками.

Иногда удобно подключать скрипт динамически, то уменьшает время загрузки страницы. Для этого с помощью JavaScript создайте тег script и проставьте в аттрибут src ссылку на наш скрипт. 

                    
<script type="text/javascript">
  (function() {
    var s = document.createElement('SCRIPT');
    var s1 = document.getElementsByTagName('SCRIPT')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://www.yapa.ru/static/api/buttons.js';
    s1.parentNode.insertBefore(s, s1);
  })();
</script>

<!-- Wide Button -->
<a class="yap-button yap-wide"
      href="http://www.yapa.ru/submit?url=http%3A%2F%2Fsupersite.com%2Fhomemade-secrects.html">
</a>

<!-- Medium Button -->
<a class="yap-button yap-medium"
      href="http://www.yapa.ru/submit?url=http%3A%2F%2Fsupersite.com%2Fhomemade-secrects.html">
</a>

<!-- Compact Button -->
<a class="yap-button yap-compact"
      href="http://www.yapa.ru/submit?url=http%3A%2F%2Fsupersite.com%2Fhomemade-secrects.html">
</a>

<!-- Icon Button -->
<a class="yap-button yap-icon"
      href="http://www.yapa.ru/submit?url=http%3A%2F%2Fsupersite.com%2Fhomemade-secrects.html">
</a>

Настройки Япа-кнопки

Как видите, hrefу кнопки имеет параметр url, который указывает адрес страницы с новостью. Также туда можно добавлять другие опции.

Url

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

Обратите внимание: Значение это параметра должно быть валидным. То есть все спецсимволы (например, слэш) надо заэкранировать так, как это делает функция encodeURIComponent. Например,

http://mashable.com/2010/03/18/yapa-social-news

превращается в

http%3A//mashable.com/2010/03/18/yapa-social-news

Title

Это заголовок будущей новости. Максимум 75 символов - этого вполне достаточно. 

                      <a
  class="yap-button yap-medium"
  href="http://www.yapa.ru/submit?url=http%3A//yapanarium.com/2010/03/18/yapa-news&amp;title=Yap%3A%20The%20Future%20of%20Social%20News%3F"
>
</a>

В этом примере параметр title указывает, что текст "Yap: The Future of Social News?" должен быть использован в качестве заголовка новости.

Обратите внимание: Как и url опция - title должен быть экранирован по необходимости.

media & category

С помощью этих двух опций можно выставить категорию и тип новости (текст, картинка или видео).

Значения media могут быть такими:

  • text (Текст)
  • video (Видео)
  • image (Картинка)

Значения category могут быть такими:

  • society (Общество)
  • politics (Политика)
  • business (Бизнес)
  • lifestyle (Происшествия)
  • entertainment (Юмор)
  • gaming (Игры)
  • technology (Технологии)
  • science (Наука)
  • sports (Спорт)
  • auto (Авто)
  • world_news (В мире)
  • travel (Путешествия)
  • other (Разное)

Кнопко-конструктор