uLike - Лайки для комментариев

5692
8.8 из 10
Проголосовало: 16






Лайки теперь стали возможны не только для отдельного материала, но и для комментариев.
Данный скрипт создаёт только 1 $.get запрос на выдачу лайков => нагрузку и бан можно избежать)
Лайки смахивают на лайки ВК, но если кто захочет переделать под себя, то пожалуйста, только сам скрипт ломайте. Некоторые html теги отвечают за работу скрипта
Хвать этой писанины перейдём к делу. Первое что нужно это подключить js скрипт:

Code
var ulike = {  
  numberEnd: function(num, expressions) {  
  var result;  
  count = num % 100;  
  if (count >= 5 && count <= 20) {  
  result = expressions['2'];  
  } else {  
  count = count % 10;  
  if (count == 1) {  
  result = expressions['0'];  
  } else if (count >= 2 && count <= 4) {  
  result = expressions['1'];  
  } else {  
  result = expressions['2'];  
  }  
  }  
  return result;  
  },  
  showLikeTooltip: function(id,c){  
  if(c!=0){  
  var like_count = 'Понравилось '+c+' '+ulike.numberEnd(c,['человеку','людям','людям']);  
  var offset = $('#clike'+id).offset();  
  var left = offset.left - 40;  
  var top = offset.top - 85;  
  if(!$('#likeTooltip'+id).html()){  
  $('body').append('<div class="tt rich like_tt bottom" id="likeTooltip'+id+'" style="position: absolute; left: '+left+'px; top: '+top+'px;opacity:0;display:none"><table cellspacing="0" cellpadding="0" class="toup1"><tbody><tr><td colspan="3" class="tt_top"><div class="top_pointer" style="margin-left: 74px"></div></td></tr><tr><td class="side_sh"></td><td class="outer"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="side_sh"></td><td class="wrapped"><div class="header"><div class="like_head_wrap"><span id="like_title_wall22490772_592">'+like_count+'</span></div></div><div class="wrap"><input type="hidden" id="like_real_count_wall22490772_592" value="1"><div class="content"><div class="hider"><table cellspacing="0" cellpadding="0" class="like_stats'+id+'" style="left: 0px"><tbody><tr><td></td></tr></tbody></table></div></div></div></td><td class="side_sh"></td></tr><tr><td colspan="3"><div class="bottom_sh"></div></td></tr></tbody></table></td><td class="side_sh"></td></tr><tr><td colspan="3" class="tt_bottom"><div class="bottom_sh"></div><div class="bottom_pointer" style="margin-left: 74px"></div></td></tr></tbody></table></div>');  
  $('#likeTooltip'+id).stop().animate({'top': '+=10px','opacity': '3'}, "slow").show();  
  }else if($('#likeTooltip'+id).html() && $('#likeTooltip'+id).css('display')=='none'){  
  $('#likeTooltip'+id).show();  
  }  
  if($('.like_stats'+id).find('td').html()==''){  
  $('.like_stats'+id).find('td').hide().before('<p class="loading-spinner"><img src="http://webo4ka.ru/Ucoz6/pixel-vfl3z5WfW.gif" alt="">Загрузка...</p>');  
  setTimeout(function() {  
  $.ajax({  
  type: "POST",  
  url: '/php/ulike/like.php?act=loadliked&cid='+id+'&u=1',  
  dataType: "json",  
  success: function(response) {  
  $('.loading-spinner').hide();  
  for(var i=0; i<response[0].users.length; i++){  
  $('.like_stats'+id).find('td').before('<td><a title="'+response[0].users[i].username+'" href="/index/8-'+response[0].users[i].id+'" ><img class="like_tt_stats_photo" src="'+response[0].users[i].photo+'" width="30" height="30"></a></td>');  
  }  
  }  
  }); }, 500);  
  }  
  }  
  },  
  hide: function(id){  
  $('#likeTooltip'+id).stop().fadeOut(200);  
  },  
  show: function(id,count){  
  var likeTimeout;  
  if(!count){count_l = $('#clike'+id).find('#liked').html();}else{count_l = count;}  
  clearTimeout(likeTimeout);  
  ulike.showLikeTooltip(id,count_l);  
  $('#likeTooltip'+id).mouseenter(function(){  
  clearTimeout(likeTimeout);  
  });  
  $('#clike'+id).mouseleave(function(){  
  likeTimeout = setTimeout(function() {ulike.hide(id)}, 500);  
  });  
  $('#likeTooltip'+id).mouseleave(function(){  
  likeTimeout = setTimeout(function() {ulike.hide(id)}, 500);  
  });  
  },  
  liked: function(id){  
  if(!$('#clike'+id).find('#liked').html()){c_l = 1;}else{c_l = parseInt($('#clike'+id).find('#liked').html());}  
  $('#clike'+id).find('#liked').html(c_l+1);  
  ulike.show(id,c_l);  
  $('.like_stats'+id).find('td').hide().before('<p class="loading-spinner"><img src="http://webo4ka.ru/Ucoz6/pixel-vfl3z5WfW.gif" alt="">Загрузка...</p>');  
  $.ajax({  
  type: "POST",  
  url: '/php/ulike/like.php?act=add_user&cid='+id,  
  dataType: "text",  
  success: function(data) {  
  if(data==1){  
  ulike.show(id,c_l);  
  }else{  
  $('#clike'+id).find('#liked').html(c_l);  
  _uWnd.alert('Вы уже оставили свой лайк ранее', 'Ошибка!',{w:300, h:70});  
  }  
  $('.like_stats'+id).find('td').show();  
  $('.loading-spinner').hide();  
  }  
  });  
  }  
  }  

  $(document).ready(function() {  
  var idc = '';  
  $('body').find('#comlike').each(function(){  
  idc += $(this).find('div').attr('id').replace('clike', '') +',';  
  });  

  $.ajax({  
  type: "POST",  
  url: '/php/ulike/like.php?act=loadliked&cid='+idc,  
  dataType: "json",  
  success: function(data) {  
  for(var i=0; i<data.length; i++) {  
  var id = data[i].id;  
  $('#clike'+id).find('#liked').html(data[i].liked);  
  }  
  }  
  });  
  });


С js кодом покончено, теперь следом идёт PHP. Создаём папку ulike и кидаем туда файлы из архива.

Внимание: файл "basel.php" - НЕ ТРОГАТЬ! Не изменять его! Иначе скрипт работать не будет! Этот файл выполняет роль базы данных)
В файле "like.class.php" можно изменить некоторые переменные:
$str_m_2 - Кол-во пользователей на стр. в модальном окне
$no_photo - url ссылка на no-photo

Пожалуй с самой лёгкой частью скрипта мы разобрались, теперь осталось поставить css)

Code
.yt-spinner-img, .loading-spinner img {  
  background: url("http://webo4ka.ru/Ucoz6/icn_loading_animated-vflff1Mjj.gif") 50% 50% no-repeat transparent;  
  height: 20px;  
  vertical-align: middle;  
  width: 20px;  
  }  
  p.yt-spinner, p.loading-spinner {  
  line-height: 20px;  
  margin: 0px;  
  padding: 1em;  
  text-align: center;  
  font-size: 11px;color:#fff;margin-top:-5px  
  }  
  .like_tt, .mention_tt {  
  opacity: 1;  
  background: rgba(0, 0, 0, 0.702);  
  border-radius: 5px;  
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.275);  
  color: #FFFFFF;  
  cursor: pointer;  
  text-shadow: 0px 1px 0px #262626;  
  }  
  .tt, .ttb {  
  cursor: default;  
  position: absolute;  
  z-index: 2000;  
  }  
  .like_tt, .mention_tt {  
  color: #FFFFFF;  
  cursor: pointer;  
  text-shadow: 0px 1px 0px #262626;  
  }  
  .tt.rich .side_sh {  
  display: table-cell;  
  }  
  .tt .side_sh {  
  background: #000000;  
  display: none;  
  opacity: 0.05;  
  overflow: hidden;  
  width: 1px;  
  }  
  .tt .outer .side_sh {  
  opacity: 0.12;  
  }  
  .wrapped {  
  overflow: hidden;  
  word-wrap: break-word;  
  }  
  .like_tt .header {  
  cursor: pointer;  
  }  
  .like_tt .header .like_head_wrap {  
  font-size: 11px;  
  color: #FFFFFF;  
  font-weight: 700;  
  padding: 8px 9px 3px;  
  }  
  .like_tt .content {  
  padding: 5px 10px 7px;  
  width: 210px;  
  }  
  .like_tt .content .hider {  
  height: 33px;  
  overflow: hidden;  
  position: relative;  
  width: 210px;  
  }  
  .like_tt .content table {  
  position: relative;  
  }  
  .like_tt .content a {  
  border-radius: 3px;  
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.298);  
  display: block;  
  height: 30px;  
  margin-right: 6px;  
  overflow: hidden;  
  width: 30px;  
  }  
  .like_tt .like_tt_stats_photo {  
  border-radius: 3px;  
  }  
  .like_tt table.toup1 .bottom_pointer, .mention_tt table.toup1 .bottom_pointer {  
  background: url("http://webo4ka.ru/Ucoz6/like_icons_bl.png") -2px -47px no-repeat transparent;  
  bottom: -7px;  
  display: block;  
  height: 7px;  
  margin-left: 64px;  
  margin-right: 0px;  
  position: absolute;  
  top: auto;  
  width: 13px;  
  }


В вид комментариев вставить:

Code
<div style="float:right;margin-right:5px" id="comlike">  
  <div id="clike$ID$" onclick="ulike.liked($ID$)" onmouseover="ulike.show($ID$)" style="color: #37506E;font-size: 8.5pt;text-decoration: none;cursor: pointer">  
  Мне нравится: <span id="liked">0</span>  
  </div>  
  </div>


Автор: faforty
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 15

GHOST$RIDER
0
GHOST$RIDER написал: в материале Написано 16 Октября 2013 в 17:25
Комментарий №15
Постоянно такая фигня http://screenshot.su/show.php?img=62251697c45bbdf665b24385aa2530aa.jpg

GHOST$RIDER
0
GHOST$RIDER написал: в материале Написано 13 Октября 2013 в 12:41
Комментарий №12
Сделал все как написано и вообще никаких реакций!( <script type="text/javascript" src="/js/like.js"></script>
подключил между <head> </head> да файл сохранил в формате UTF-8

doc74
0
doc74 написал: в материале Написано 15 Октября 2013 в 18:42
Комментарий №13
А у тебя PHP подключен на сайте?

GHOST$RIDER
0
GHOST$RIDER написал: в материале Написано 16 Октября 2013 в 17:24
Комментарий №14
Конечно есть! smile

BLAzER
+1
BLAzER написал: в материале Написано 05 Ноября 2012 в 14:44
Комментарий №10
Мне всегда на всех записях пишет "Вы уже оставили свой лайк ранее"

KOcccTya
0
KOcccTya написал: в материале Написано 11 Ноября 2012 в 15:29
Комментарий №11
такая же ситуация.

ruslan
+1
ruslan написал: в материале Написано 03 Июня 2012 в 10:16
Комментарий №7
Извените,я не пойму что делать с js кодом,куда его вставлятть???

GhostlyP
0
GhostlyP написал: в материале Написано 03 Июня 2012 в 11:34
Комментарий №8
создай файл like.js , туда весь этот js-код, и закинь через файловый менеджер на сайт в папку js.
Потом просто подключи к странице материала и комментариев к нему: <script type="text/javascript" src="/js/like.js"></script>

ruslan
0
ruslan написал: в материале Написано 04 Июня 2012 в 10:51
Комментарий №9
спасибо)сейчас попробую)

SPECNAZik
+3
SPECNAZik написал: в материале Написано 01 Июня 2012 в 13:28
Комментарий №5
Помоему Вк запахло.... happy

MakAn
+1
MakAn написал: в материале Написано 01 Июня 2012 в 15:18
Комментарий №6
+1 biggrin

Kelin
0
Kelin написал: в материале Написано 01 Июня 2012 в 12:17
Комментарий №3
Это и без PHP можно сделать. Оценка комментариев на uCoz же есть wink
Вот тока история не будет сохраняться

uExpert
+1
uExpert написал: в материале Написано 01 Июня 2012 в 12:31
Комментарий №4
Quote
Вот тока история не будет сохраняться

Вот поэтому и сделали на PHP.

Myateznik
+2
Myateznik написал: в материале Написано 01 Июня 2012 в 10:53
Комментарий №2
надо бы чтобы при повторном клике не выскакивала ошибка что уже поставил лайк а чтобы лайк удалялся

S9va
0
S9va написал: в материале Написано 01 Июня 2012 в 01:01
Комментарий №1
tongue

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2125
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 432
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • k43 написал:
  • Возможно из-за капчи для пользователей
  • Fast3sa написал:
  • Работает отлично,только вот бяда,отправлять могут только проверенные пользователи заявки(а просто юзеры не могут)
  • Fast3sa написал:
  • окей я понял что там не так(точнее я смог отправить сообщение о заказе) но только после того как поменял группу пользователю,помогите решить эту траблу
  • Fast3sa написал:
  • Народ подскажите в чем трабла? проблема такова заполняю все поля нажимаю отправить а он пишет не верный код безопасности,как это исправить,кода нет не какого сразу говорю
  • xXx_Pycckuu_xXx написал:
  • Загнулся ucodes.ru xD
    Последние темы
    Опрос
    527
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: