Сейчас мы сделаем что-то вроде этого:


Такие лайки есть и на этом сайте - можете потыкать)

Чем полезны именно такие лайки?
Они асинхронны, т.е. не перегружают страницу. Благодаря этому пользователь может "полайкать" сразу несколько сообщений за раз - это удобно, и не надо ждать, пока форум не перенаправит юзера обратно.

Плюс они выглядят гораздо симпотичней

Готовимся
Подберём картинку для лайков размером ровно в 32х32 пикселей.

Некоторые модели (можете взять эти, а можете свою загрузить):


Копируем ссылку на изображение в блокнот - она нам не раз понадобится!

Для forum2x2
Для начала убедимся, что у нас движок punBB и мы можем редактировать шаблон.

Теперь давайте зайдём в админпанель - оформление - шаблоны - общие настройки. Редактируем шаблон viewtopic_body.

Ищем такое:

Код:

<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->

<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->

<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->

<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->

<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->

Удаляем всё это дело. Мы поставим немного другой код в другом месте.

Ищем следующую строку:

Код:

<!-- BEGIN switch_signature -->

Перед ней вставляем этот код:

Код:

<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Нравится!"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{postrow.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->

Заменяем "ССЫЛКА" на ссылку на иконку, которую мы выбрали.

Сохраняем, публикуем шаблон.

Если у вас на форуме включены блоги, надо будет провести похожую процедуру в шаблоне viewcomments_body.

Вырезаем ненужные стандартные коды голосования за пост, как в первом случае (там этих блоков два!).

Вставляем новый код, как делали в первом случае. Плюс к этому после фрагмента:

Код:

<p> {comment.displayed.EDITED_MESSAGE}
</p>

надо будет вставить:

Код:

<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{comment.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Подарить любовь :3"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{comment.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->

Сохраняем, публикуем  

Далее заходим в админпанель - оформление - цвета - каскадная таблица стилей CSS. Добавим в конец:

Код:

.voteshow {
font-size: 24px;
position: relative;
top: -6px;
left: 6px;
}
.votehid {
display: none;
}
.vote {
float: left;
width: auto;
}
.vote-br {
    display: inline;
}

Последний этап - установим скрипты. Заходим в админпанель - модули - управление цветами яваскрипт (в самом низу). Создаём скрипт. Называем "Лайки". Показывать - только в темах.
В содержимое вставляем:

Код:

copyrightnotice = 'Скрипт от your.roll.tv . Распространение и использование разрешено только с прикреплением этой строки.';
$(document).ready(function() {
  $('.vote').each(function() {
    if ($(this).find('.votehid').length > 0) {
     $(this).find('.voteshow').html(/[0-9]+/.exec($(this).find('.votehid').html().replace('Рейтинг сообщения: 100% (',''))[0]);
    }
   if ($(this).find('a').length > 0){
      $(this).find('a').click(function() {
        $.get($(this).attr('href'));
        $(this).find('img').css('opacity','0.5');
        $(this).next()[0].innerHTML = Number($(this).next()[0].innerHTML) + 1;
        return false;
      });
    } else {
      $(this).find('.vote-br').prepend('<img style="opacity: 0.5;" src="ССЫЛКА" />');
    }
  });
});

Тут также надо будет заменить ССЫЛКА на ссыль к картинке.

Сохраняем. Готово!  

Для myBB
В админке - настройки - Система отношений указываем точь в точь такие настройки:


Далее в админке - настройки - Основные в HTML верх или HTML низ пишем:

Вариант с кнопкой и надписью "Нравится!:

Вариант просто с кнопкой:

Ссылку

Код:

http://i80.servimg.com/u/f80/16/50/61/52/heart11.png

заменяем на ссылку на изображение-кнопку.

Сохраняем. Всё

Проверьте, всё ли работает; если ВДРУГ возникли проблемы - пишите здесь, поможем!

А на MyBB такую штуку нельзя сделать? Уж больно интересная и удобная.

Я посмотрю, можно ли на мубб запилить. Но не сегодня - у нас уже 10 часов вечера х_х

Космо, да ладно? У нас тоже 10 вечера! Вы где живёте?

Камели пишет:Космо, да ладно? У нас тоже 10 вечера! Вы где живёте?

О____________________О Вот это поворот! Впервые в инете совпали часовые пояса! Камчатка, город Петропавловск-Камчатский)

з.ы. давай на "ты") не люблю "выкать"

[edit]

Можешь включить для пиар-входа обычные плюсы-минусы на своей ролке?

Космо, давай. Зашибись! Земляки. Я на Камчатке, рядом с П-К. Усть-Большерецк.

Упс, а я сообщение отредактировал:

Космо пишет:Можешь включить для пиар-входа обычные плюсы-минусы на своей ролке?

Космо, всмысле?

Чтобы пользователь Piar мог репутацию плюсовать, или там "спасибо" щёлкать, что-то такое вроде на myBB есть такая ф-ия.

Поле "репутация" у тебя включено, но вот что-то никаких ссылочек-кнопочек я не вижу о_о

пойду-ка я всё же запилю тестовик на мубб...

Космо, ааа. Я просто ему запрещала менять репутацию пользователям. Сейчас исправлю.

Космо, вроде всё.

Та-а-акс, я так понял, кнопка для добавления балла к репутации тут:


В техническом плане всё дёргается точно таким же способом, как и в forumotion, просто надо будет расписать побольше скриптов сделаем)

Космо, именно тут.

Кстати, у тебя там скрипт не закрыт один:

О, а я и не замечала. Спасибо.

Тыкс, в целом, у меня готово.

Можешь в админке - настройки - система отношений включить рейтинг поста?

Включила.

В целом, готово. Не удалось только сделать проверку, лайкали ли уже сообщение (но тут уж я ничего не поделаю, двиг не позволяет). А так работает отлично.

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

Тип оценок - только плюсы.

Выглядит немного подругому:



Вот это вот вставляем в админку - настройки - основные - HTML верх или HTML низ (разницы нет):

Код:

<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');
  }).click(function () {
    if (! this.plused) {
      $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-sig').prepend('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.likeme {
  font-size: 18px;
  position: relative;
  top: -6px;
  margin-left: 8px;
}
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>

Вот в этой куче фигни:

$(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','https://i.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');

Указываем своё изображение. Но мне нравится печенька :3

Всё

Космо, Спасибо!! Всё работает! А я же могу убрать слово "нравиться!"? Уж больно громоздкое.

Да, можешь
Но тогда надо будет написать подсказку у картинки, иначе можно не догадаться, что это за печенька. Код немного меняется:

Код:

<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').attr('title','Поставить отметку "Нравится!"');
  }).click(function () {
    if (! this.plused) {
      $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-sig').prepend('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>

Космо, ну вот, теперь другое дело
И еще, а убирать поставленные лайки можно? (Это я уже с ВК сравнила, вдруг, можно).

Не-а, не получится

Космо, эх, жалко. Ну ладно, и без того хорошо. Только вот такая штука - лайк виден только после обновления страницы, а до этого - только кнопка отображается нажатой. Это так нужно?

Можно приделать и увеличение количества лайков, как на форумошн. Дописать скрипты?

Космо, ну, можно.