Первое сообщение в теме :

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


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

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

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

Готовимся
Подберём картинку для лайков размером ровно в 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

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

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

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

Космо, слушай, ты же в стилях разбираешься? Если я в другой темке задам пару вопросов - поможешь? Огромной разницы в стилях на мубб и форумошн вроде нет. Просто решила сама дизайн создать, изменив при том всю цветовую гамму, поэтому много несостыковок и ляпов. Вот ссылка на тест - http://supertest.0bb.ru/. Думаю, невооруженным глазом видно эти ляпы...

Да, можешь задавать вопросы по дизу и цсс.
Косяков пока особо не вижу... Разве что "дизайн" пишется как Design (четыре ошибки в одном слове, боже! >.< признайся, что ты не учишь английский в школе хдд), а "специально" как "Special".

Я, оказывается, так серьёзно накосячил, что эти лайки работали только для постов с подписями.
В первом посте всё исправил, а твой вариант кода вот такой (я видел твои мучения с цсс ):

Код:

<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).appendTo(jQuery(this).closest('.container').find('.post-content')).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');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
float: right;
font-size: 18px;
color: #1A1002;
background: #BEA683;
padding: 3px 5px;
border-radius: 5px;
cursor: default;
opacity: 0.8;
}
</style>

Проверь, всё ли нормально располагается, а то у меня сначала надпись поехала.

Космо пишет:Разве что "дизайн" пишется как Design (четыре ошибки в одном слове, боже! >.< признайся, что ты не учишь английский в школе хдд), а "специально" как "Special".

(Позорище). Да я писала это на ночь глядя, записывая, как говорю. Попробую исправить.
Косяки можно заметить, если перейти в тему. Там фальшивый цвет цитат, кодов, спойлеров, формы ответа, фона фразы "Напишите ваше сообщение и нажмите отправить", а так же кнопок "дополнительные смайлы", модераторского меню и разделителя между профилем и сообщением. Есть еще косяк в окантовке профиле - она перестала работать. А, да, меня смущает цвет окна переадресации. В общем, достаточно много. Если что, я разрешила гостям писать в темах.

Ок. Давай темку отдельную создадим, чтобы тут не оффтопить?

Космо, конечно.

Космо огромное спасибо, за все ваши коды, скрипты,  фишечки и позитив)) у меня Pun, вопросик по этим лайкам, пока зашла, увидела и тут так же.. может и не стоит теперь))  нельзя ли сделать, чтобы  кол-во голосов всегда было рядом с иконкой сбоку, а не сползало вниз   , когда сам проголосовал или у постов еще нет лайков все ровно по горизонтали, а когда попадется пост  у которого есть уже голос, выглядит немножко неаккуратно (размеры 32х32).
Еще такой момент, на лайке у мня появляется сердечко и оно гораздо светлее на форуме, в ФШ делала поярче но там словно осветляется на несколько тонов. Это не критично, просто любопытно, так и задумано?)

там словно осветляется на несколько тонов.

Так и задумано - если вами уже залайкано сообщение и новый лайк, соответственно, поставить нельзя, то кнопка становится полупрозрачной, показывая, что она неактивна.

У меня Фаерфокс и счётчик лайков располагается нормально. Какой ваш браузер? и киньте пж ссылку на свой форум.

У меня IE9,  есть другие, но.. привычка) в гугле тоже внизу,   форум
аа, вон оно что с цветом, у меня из-за разных иконок не понятно)))
может не сразу отвечу, у нас в городе массированные ddos-атаки на провайдеров, все вырубает ((

IE - как религия: стоял по умолчанию.
Хоть убейте, но у меня в опере, хроме, мазилке и ИЕ всё стоит ровнёхонько сбоку как на вашем, так и на моём форуме. ИЕ конкретно 9-й версии открыть не смогу, ибо юзаю сейчас везде Вин8.1 и там по умолчанию стоит 11-й.

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

Код:

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).next()[0].innerHTML = Number($(this).next()[0].innerHTML) + 1;
        return false;
      });
    } else {
      $(this).find('.vote-br').prepend('<img src="ССЫЛКА" />');
    }
  });
});

усё поменяла, здорово, спасибо!)
я бы поставила 11, но винда неоф. катца, сижу не рыпаюсь)