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

5826
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 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 432
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • geleson2222 написал:
  • ?
  • Doc120 написал:
  • /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
    opacity:0.1 ; это легальное скрытее $POWERED_BY$
    ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
  • Doc120 написал:
  • Ставим в ccs и все
    /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
  • topkalife написал:
  • Было бы лучше если бы данный скрипт работал)
  • k43 написал:
  • Возможно из-за капчи для пользователей
    Последние темы
    Опрос
    537
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей:
    • Обратная связь
    • Правила
    • RSS
    • +18
    • Мобильная версия
    • Хостинг от uCoz
    • Хостинг от uCoz
    • Copyright - webo4ka.ru © 2010-2024 г.
    • Design by Вовчик
      Администратор:)