Rate: Создаем кнопку «Мне нравится»
Блог

Rate: Создаем кнопку «Мне нравится»

Like? Лайк!
24 комментария
Опубликовано 19.05.2013
3 мин.

Кнопка «Мне нравится» встречается почти на каждом сайте, и в этой статье я расскажу как её создать на Drupal сайте при помощи модуля Rate.

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

Итак, качаем и устанавливаем Voting API и Rate.

drush dl votingapi rate
drush en votingapi rate

В комплекте уже идут базовые примеры как просто лайк, лайк с дизлайком, эмоции, да\нет. Мы же создадим свой собственный. Для этого заходим в админке: Administration → Structure → Rate widgets

Шаг 1. В «Widget type» выбираем «Custom» и жмем «Next».
Шаг 2. Называем наш виджет, например «Мне нравится», машинное имя и tag делаем «like».
Шаг 3. В «Value type» мы выбираем «Points», потому что наш лайк будет считать количество лайков.
Шаг 4. В «Option» добавляем нашу кнопку, написав в «Value» → «1» (должно быть целочисленным), а в «label» → «Мне нравится».
Шаг 5. В «Node types» необходимо выбрать, в каких типах содержимого будет использоваться данный виджет. Также там можно выбрать комментарии, это значит что комментарии к нодам данного типа можно будет также лайкать. Нас это не особо не интересует и мы выберем тип содержимого на ваше усмотрение, например стандартный «Article».
Шаг 6. Все остальные настройки делайте на свое усмотрение и сохраняем.

Я добавил лайк к «Article» и у меня он выглядит так:

Выглядит ущербно, не так ли? Но этот модуль не был бы популярным, как и данный материал был бы не очень полезным, если бы не его кастомизация, которую мы сейчас заденем.

Если вы делаете собственную тему, вам с вероятностью 99% придется переопределять темплайты для нод, в том числе где и будет лайк. А если вы уж делаете тему, то наверняка все поля выводите как нужно, но судя по гуглу, многих момент вывода рейтинга сбивает с калии. Для вывода кнопки нужно всего лишь воспользоваться функцией rate_embed:

<?php print rate_embed($node, 'like', RATE_FULL); ??>

Непосредственно для темизации используются шаблоны вида: rate-widget--MACHINENAME.tpl.php. В нашем случае он будет называться так: rate-widget--like.tpl.php. За его основу берется rate-widget.tpl.php из папки модуля «Rate».

Например создадим наш темплайт и изменим вывод:

<?php print theme('rate_button', array(
                'text' =?> $links[0]['text'],
                'href' => $links[0]['href'],
                'class' => "extra-class")
            );
    print "<span>" . $results['count'] . "</span>";
    ?>
Добавим немного CSS
    .rate-widget-1 {
      background: linear-gradient(to bottom, #FFFFFF 0%, #FBFAF9 100%) repeat scroll 0 0 transparent;
      border: 1px solid #D9D8D6;
      border-radius: 3px 3px 3px 3px;
      color: #343434;
      width: 130px;
      padding: 3px;
    }

    .rate-widget-1 a {
      color: #343434;
      border: none;
      border-right: 1px solid #EEEEEC;
      padding: 5px;
    }

    .rate-widget-1 span {
      padding: 7px;
    }

Drupal
Drupal 7
Rate
Voting API
небольшой уютный чатик

Комментарии

А
Александр
вт, 05/21/2013 - 17:36

На шестерке был Vote, а на семерке лучше Rate. Но палец его с дивами ну никак не нравится:) Теперь есть отличный выход!

Спасибо! То, что нужно!

В
Владислав
пт, 05/30/2014 - 20:03

Меня момент вывода сбил таки с колеи. Ничего не написано про то, откуда вызывать эту функцию <?php print rate_embed($node, 'like', RATE_FULL); ?> . Расскажете?

Ж
Женя
чт, 10/16/2014 - 22:08

Привет, при выводе рейтинга с помощью
<?php print rate_embed($node, 'like', RATE_FULL); ?>
рейтинг обновляется только после перезогрузки страницы.

З.Ы. стандартный вывод работает нормально

З.З.Ы. после изменения значения рейтинга через стандартный виджет, програно выведенный виджет начинает нормально работать

С чем это связано, и как можно это исправить?

И
Илья
вс, 01/25/2015 - 00:59

Спасибо за статью, можете подсказать как добавить класс к тегу `a` при условии "кнопка нажата + 1" и удалении класса при условии "кнопка нажата - 1". Знаю как это сделать с помощью js, не знаю как сделать, чтобы этот параметр сохранялся у авторизованных пользователей.

N
Niklan Илья
вс, 01/25/2015 - 09:52

У кнопки есть стандартные классы, которыми можно воспользоваться для этого.

Там есть:
.flag-flag - когда кнопка не нажата (unactive)
.flag-unflag - когда кнопка нажата. (active)

С
Семен Илья
вт, 11/20/2018 - 21:05

В шаблоне rate-widget--like.tpl.php доступна переменная $just_voted. Если пользователь голосовал, то она равна TRUE. Более того, после нажатия кнопки виджет перерисовывается, что позволяет "на ходу" присвоить класс. Пример моего rate-widget--like.tpl.php, где это реализовано:

<?php
  $classes = $just_voted ? 'extra-class liked' : 'extra-class';
  print theme('rate_button', array(
    'text' => 'Нравится',
    'href' => $links[0]['href'],
    'class' => $classes)
  );

  print '<div class="like-text">';
  if ($results['count'] == 0) print 'Будьте первым, кто поставит &laquo;Нравится&raquo;</span>';
  else print $results['count'].' отметок &laquo;Нравится&raquo;</div>';
?>
a
alfaq
пт, 07/17/2015 - 15:08

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

А
Антон
сб, 07/15/2017 - 03:06

А можно поподробнее, куда вставлять " " ? И " $links[0]['text'], 'href' => $links[0]['href'], 'class' => "extra-class") ); print "" . $results['count'] . ""; ?>" ?