Как установить кнопку «Спасибо» на сайт uCoz

 
 
 
 
Как показала практика, стандартный юкозовский рейтинг в виде пяти звёздочек абсолютно бесполезен — никто не тратит время на оценку материала, кроме разве самого автора ;-) И это можно понять — какой смысл ставить какую-то оценку и так отличной статье? А с плохого материала так и вообще уходят сразу.
 
 
Намного логичнее кнопки, выражающие благодарность читателя: «Мне нравится» в соцсетях, «Спасибо!» на трекерах и другие подобные. Они и избавляют страницу от однотипных комментариев со «Спасибо!», и в то же время позволяют поблагодарить автора одним нажатием на кнопку.
 
Вот о том, как поставить скрипт такой кнопки на свой сайт, я здесь и расскажу. Этот скрипт хорош не только тем, что замещает стандартный рейтинг, но и тем, что нажатие на кнопку засчитывается как оценка на «5». Мало того, в отличие от стандартного рейтинга, нажатия на кнопку засчитываются не только в самом материале, но и в их списке!
 
Для начала скачайте вот этот файл, распакуйте его. Из полученной папки все файлы залейте в Файловый менеджер своего сайта в отдельную папку, назвав ее, к примеру, «Spasibo».
 
Затем в Панели управления идём в «Управление дизайном сайта» и кликаем на «Таблицу стилей (CSS)». 
 
 
Там внизу перед Панелью BB-кодов комментариев ставим вот этот код:
 
/* Спасибо!  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  background:#cdf6ce;  
  border: 1px solid #48b543;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#247e20;}  


  #rating_l {  
  float:left;  
  background: url(http://drevodelatel.ru/Spasibo/ugol_green_knopka_mne_nravitcya_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #e1fee2 url(http://drevodelatel.ru/Spasibo/ugol_green_knopka_mne_nravitcya_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  color:#247e20;  
  padding: 3px 5px 3px 5px;  
  background:#8bdc87;  
  }
 
Здесь я обращу ваше внимание на два нюанса. Во-первых, ссылки http://drevodelatel.ru/Spasibo/ugol_green_knopka_mne_nravitcya_ucoz.png в коде подменяете на свои.  В принципе, вы можете не тратить время на заливку файлов и замену ссылок, а оставить ссылки как есть, тогда у вас просто будут открываться картинки с моего сайта. Но надёжнее, конечно, иметь эти картинки у себя.
 
Во-вторых, в этом коде дана зелёная кнопка. Коды всех пяти цветовых вариантов я приведу в конце статьи. Это очень удобно тем, что можно подобрать стиль кнопки под любой дизайн сайта.
 
Итак, вставили код, сохраняем изменения. Теперь нужно удалить прежние коды рейтинга и вставить вместо них новые. 
 
Как найти коды рейтинга, я очень подробно рассказал и показал в своей статье «Как изменить значки рейтинга на сайте uCoz»
 
Здесь лишь вкратце покажу на трёх картинках. В модулях «Новости», «Каталог статей», «Каталог файлов» и «Фотоальбом» находим пункт «Вид материалов».
 
 
Здесь выделяем прежний код рейтинга.
 
 
И вставляем вместо него новый код.
 
 
Вот сами коды, которые нужно вставить в соответствующие модули:
 
Для раздела новости (news):
 

<?if($RATING$)?>  
  <div id="rating_os">  
  <a href="javascript://" id="golike" onclick="$.get('/news/0-0-5-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">  
  <div id="rating_l">Спасибо!</div>  
  </a>  
  <div id="rating_p">+$RATED$</div>  
  </div>  
  <?endif?>
 
Для раздела каталог статей (publ):
 
<?if($RATING$)?>  
  <div id="rating_os">  
  <a href="javascript://" id="golike" onclick="$.get('/publ/0-1-5-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">  
  <div id="rating_l">Спасибо!</div>  
  </a>  
  <div id="rating_p">+$RATED$</div>  
  </div>  
  <?endif?>
 
Для раздела каталог файлов (load):
 
<?if($RATING$)?>  
  <div id="rating_os">  
  <a href="javascript://" id="golike" onclick="$.get('/load/0-1-5-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">  
  <div id="rating_l">Спасибо!</div>  
  </a>  
  <div id="rating_p">+$RATED$</div>  
  </div>  
  <?endif?>
 
Для раздела Фотоальбом (photo):
 
<?if($RATING$)?>  
  <div id="rating_os">  
  <a href="javascript://" id="golike" onclick="$.get('/photo/1-1-$ID$-13-5',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">  
  <div id="rating_l">Спасибо!</div>  
  </a>  
  <div id="rating_p">+$RATED$</div>  
  </div>  
  <?endif?>
 
В строке 
<div id="rating_l">Спасибо!</div>
  слово «Спасибо!» можно поменять на любое другое, вариантов множество: Мне нравится, Круто, Благодарю, Интересно, Полезно, Красиво, Отлично, и так далее ;-)
 
А вот коды цветовых вариантов кнопки:
 
Вариант № 1 White (Белый): 
 
 
/* Mне нравится  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#777; text-shadow: 1px 1px 1px #fff;  
  background:#f6f6f6;  
  border: 1px solid #d6d6d6;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#999;}  


  #rating_l {  
  float:left;  
  background: url(http://webo4ka.ru/Ucoz5/ugol_white_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #fff url(http://webo4ka.ru/Ucoz5/ugol_white_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  padding: 3px 5px 3px 5px;  
  background:#e3e3e3;  
  }

 
Вариант № 2 Black (Чёрный): 
  
 
/* Mне нравится  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#a7a7a7; text-shadow: 1px 1px 1px #252525;  
  background:#484848;  
  border: 1px solid #252525;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#a7a7a7;}  


  #rating_l {  
  float:left;  
  background: url(http://webo4ka.ru/Ucoz5/ugol_black_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #5d5d5d url(http://webo4ka.ru/Ucoz5/ugol_black_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  padding: 3px 5px 3px 5px;  
  background:#6e6e6e;  
  }
 
Вариант № 3 Orange (Оранжевый): 
  
 
/* Mне нравится  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  color:#fff;  
  background:#ffe5cd;  
  border: 1px solid #ffa24a;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#ff891a; text-shadow: 1px 1px 1px #fff; }  


  #rating_l {  
  float:left;  
  background: url(http://webo4ka.ru/Ucoz5/ugol_orange_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #fff3e8 url(http://webo4ka.ru/Ucoz5/ugol_orange_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  text-shadow: 1px 1px 1px #ff891a;  
  padding: 3px 5px 3px 5px;  
  background:#ffd0a4;  
  }
 
Вариант № 4 Blue (Синий): 
 
 
/* Mне нравится  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  background:#dfecf4;  
  border: 1px solid #97b7ca;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#2C68A6;}  


  #rating_l {  
  float:left;  
  background: url(http://webo4ka.ru/Ucoz5/ugol_blue_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #e5f5ff url(http://webo4ka.ru/Ucoz5/ugol_blue_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  color:#235e9b;  
  padding: 3px 5px 3px 5px;  
  background:#b5d9ee;  
  }
 
Вариант № 5 Green (Зелёный): 
 
 
/* Mне нравится  
  ------------------------------------------*/  
  #rating_os {  
  float:right;  
  font: 11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  background:#cdf6ce;  
  border: 1px solid #48b543;  
  }  


  #rating_os a:link,  
  #rating_os a:visited,  
  #rating_os a:hover {text-decoration:none; color:#247e20;}  


  #rating_l {  
  float:left;  
  background: url(http://webo4ka.ru/Ucoz5/ugol_green_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  padding: 3px 10px 3px 5px;  
  }  


  #rating_l:hover {  
  background: #e1fee2 url(http://webo4ka.ru/Ucoz5/ugol_green_knopka_mne_nravitci_ucoz.png) no-repeat right;  
  }  


  #rating_p {  
  float:right;  
  color:#247e20;  
  padding: 3px 5px 3px 5px;  
  background:#8bdc87;  
  }
 
 
Понятно, что ссылки на углы можно заменить на свои.
 
Вы можете отблагодарить меня за эту статью, положив денюжку на Яндекс.Деньги — 41001946245208; Webmoney — RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; моб.тел. 8-985-301-51-80 (МТС).
 
При создании статьи очень помог вот этот материал.
 
 
 
 
 
Опубликована: 07.04.2013
Просмотров 4592


Оценка(47)
Оценить статью:  

Комментарии

Гости не могут добавлять комментарии, войдите или зарегистрируйтесь.
Ольга  10.05.2013 23:56  
У меня нет панели ВВ-кодов. Куда вставлять не пойму. На одном сайте получилось вставить на основной странице со списком материалов, а на самой странице материала звездочки остались. На другом сайте все наоборот: на основной странице нет, а на самой странице где материал есть. В чем причина?
Antonij  11.05.2013 03:32  
Ольга, у вас всё нормально, эта панель BB-кодов у меня была сторонняя, на момент написания статьи замещала стандартную форму комментариев у меня. Сейчас я эту панель убрал, новый вид комментариев вполне хорош. Так что просто ставьте код внизу и смотрите на месте, чтобы всё хорошо выглядело.
Ольга  11.05.2013 21:56  
Спасибо! Разобралась!
Натали  20.07.2013 23:17  
Здравствуйте,Антон! Очень хочется изменить стандартные звездочки на такую кнопку. Все изучили с сынулей, код вставили, но, к сожалению, только надпись получили. Вот такую: http://verniedruzaj.ucoz.ru  ( если не составит труда, гляньте пожалуйста)Подскажите, что у нас не так.  Буду очень Вам признательна.С уважениемНаталья.
Antonij  21.07.2013 01:21  
Здравствуйте! Причин может быть несколько: 1) Загрузили ли вы в свой Файловый менеджер картинки для кнопки? Правильно ли указаны в коде ссылки на эти картинки? 2) Правильно ли вы скопировали код и вставили его? Достаточно одной пропущенной точки, чтобы кнопка не работала.
pssergey  14.10.2013 15:24  
Приветствую. А как бы вставить кнопку спасибо в форум?
Antonij  15.10.2013 02:50  
Здравствуйте! К сожалению, не знаю.
Antonij  15.10.2013 04:45  
Кнопка «Спасибо», которая у меня, вообще не повышает репутацию — она связана только с рейтингом материала. По первому примеру мне кажется, что изображение кнопки создается не картинкой, а HTML-кодом в скрипте. Можно попробовать изменить код скрипта, вставив ссылку на свою картинку.
pssergey  15.10.2013 13:40  
Спасибо!  Пересмотрел ещё раз, что я не так делал... Разобрался. Всё заработало. Если есть интерес, могу поделиться.
Antonij  15.10.2013 16:01  
Отлично, что  всё получилось!  Да, поделитесь, пожалуйста, буду очень благодарен!
pssergey  15.10.2013 16:31  
Делаем всё, как сказано тут: http://umasters.ucoz.ru/load/scripts/ujs/skript_spasibo_za_material_dlja_ucoz/32-1-0-13 там более внятно объяснено, что и как делать... и то я не с первого раза сообразил, что к чему (опыта нет совсем). Только в коде кнопки я изменил вторую строку, вот так: Цитата<?if($USER_ID$ != $UID$ && $USER_LOGGED_IN$)?> <input type="image" onclick="win_rep()" value=<img src="ссылка на картинку кнопки"> <script type="text/javascript"> var ssidr, secRp = ';';, rpid = $UID$; </script> <script type="text/javascript" src="ссылка на скрипт_ js"></script><?endif?> Может и неправильно так - но работает. Недостаток есть, кнопка отображается во всех постах форума, т.е. в своих постах пользователь видит её и может нажать, но репутация не поднимется. Надо будет поискать ещё вариант или попробовать этот переделать... как-то.
Antonij  15.10.2013 22:09  
Спасибо вам огромное! А я так вообще бы и не догадался без подсказки 
pssergey  15.10.2013 23:01  
Эх... рано порадовался я наверно. Вскрылся глюк такой вот: В теме (на данный момент) участвуют трое пользователей. Так вот нажимаю кнопку "спасибо" в сообщении одного, а репутация начисляется другому пользователю. В других темах такого перескока нет. Но там эти пользователи пока не пересекались. У этих пользователей ID по порядку 5 и 6. Вот ставлю + "пятому", а добавляется "шестому"... Стандартное добавление репутации работает правильно. Видимо в скрипте косяк. Перезалил все коды - не помогло. Если подскажете где искать ошибку, не откажусь воспользоваться советом. Если не затруднит, может у себя на форуме проверите...
Antonij  15.10.2013 23:17  
Мдаа, обидно... К сожалению, я в таких вещах пока не разбираюсь, тут, похоже, нужно обращаться к специалисту.
pssergey  16.10.2013 12:15  
Да, не срослось... Вот рассказал на форуме, какую кнопку сделал http://drevodelatel.ru/forum/4-7-1 может, кто-то посоветует вариант решения. Надо бы открыть возможность ссылки вставлять, а то не вставить картинки.
Antonij  17.10.2013 05:53  
Спасибо за полезное сообщение! Ваше замечание учел, добавил в форум кнопки вставки картинок и видео.
fifth  28.12.2014 05:45  
Спасибо за код кнопки! Поставила на своем сайте www.ynga.ucoz.ru Сначала кнопка получилась растянутая, как и у вас. Исправила, удалив пробелы в начале и конце строк кода. Мне кажется, так выглядит аккуратнее.