Чат uSite
Загрузка чата..
Все новости
Новости uSite
19.05.2012
Открыли «Оповещения» (β).
29.04.2012
Сделан до конца вид материалов форума.
Пользователи онлайн
Загрузка списка...
Уникальные скрипты » PHP » uLike - Лайки для комментариев
Лайки теперь стали возможны не только для отдельного материала, но и для комментариев. Версия скрипта 0.0.1, т.е. возможны баги, про обнаруженные баги оставляйте в комментариях)
Данный скрипт создаёт только 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://usite.su/images/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://usite.su/images/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://usite.su/images/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://usite.su/images/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>


Скажу сразу, что css я позаимствовал с ВК, чтоб время не тратить)
В следующей версии ожидается модальное окно с постраничным выводом пользователей нажавших на "Мне нравится", также будет возможно удалять автору комментария и админам лайки. Появится возможность не только like, но и unlike. Будет улучшена клиентская часть скрипта, возможно сделаю админку и буду туда пихать свои скрипты для UCOZ)

Автор: faforty
1 2 3 4 5 »
Всего 47 комментариев и 2086 просмотров
у меня не работает делаю все как надо..при нажатии на мне нравится тупо ничего не происходит
какие проблемы настроить?
Вот бы еще сделал, лайк для новостей. До пустим, кому-то новость понравилась, он ставит лайк на новости )
на стороннем сервере будет работать?
немного задержится разработка, возможно к концу недели будет
Нда, кто берётся за переделку скрипта куда-то исчезает...
Сегодня или завтра я выложу новую версию с новыми обновлениями.
В данной версии была выявлена критическая ошибка, ожидайте версию 2.0, появится утром
Проверить работоспособность скрипта можно по ссылке: www.ваш_сайт.ru/php/ulike/like.php?act=print
Я проверил и пишет: Parse error: syntax error, unexpected ';' in /home/ru/www/m/c/y/0cypik/scripts/ulike/like.class.php(116) : eval()'d code on line 1
uSite.su © 2010-2024
Все права защищены.
Лишь самые новые разработки для системы uCoz, среди которых находятся уникальные скрипты и великолепные части дизайна, совокупность которых порождает любимый многими сайт — uSite.su.
01RSS
Хостинг от uCozПользовательское соглашение и прочая информация