На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
В данном материале мы с вами полностью визуализируем комментарии для uCoz. Недавно, в официально группе «uCoz» в ВКонтакте, разработчики сообщили, что работают над возможностью писать комментарии на сайте от своих профилей социальных сетей. Что из этого выйдет, скоро узнаем, а пока «освежим» вид и форму сообщений.

Вот что у нас должно получится в конце установки:




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

1. Разрешать ли гостям оставлять комментарии на сайте?


Довольно спорный вопрос, на который нет, да и скорее всего не будет определенного ответа. С одной стороны, на порталах с небольшой посещаемостью будет больше комментариев. А с другой, намного больше спама, и не только от роботом, от людей тоже. Гостей не забанить, поэтому при желании они могут отнимать у администраторов немало времени на модерацию некорректных сообщений. А если человеку сайт понравился, он на него заходит, рано или поздно он все равно зарегистрируется. В общем, выбирать, конечно же, вам, но мое мнение: не нужно.

2. Отключать ли капчю?


Что такое капча, я надеюсь, вы знаете. Многие наверно сейчас прокричат, что нельзя отключать ни в коем случае, сайт сразу будет заспамлен! А я вот не соглашусь с этим мнением. У гостей в uCoz код безопасности включен всегда, а зарегистрированным пользователям он очень мешает. Представьте, в какой-то социальной сети при каждом сообщении нужно будет вводить капчу. Пример возможно не очень, но все же. Мое мнение, что её нужно отключать, а все нарушения жестко пресекать.

3. Разрешать ли пользователям редактировать и удалять свои сообщения, а так же использовать BB-коды URL и IMG?


И последний вопрос, который я хотел бы обсудить. На счет разрешения пользователям использовать BB-коды ссылок и изображений: если на сайте минимум спама, то конечно же разрешать, думаю, это очень удобно. Все внешние ссылки все равно закрыты от поисковиков, поэтому из-за этого переживать не стоит. Тем более, из всех BB-кнопок, эти две являются самыми важными и часто используемыми. Если спама много, или ресурс насколько большой, что у администрации нет возможности за всем уследить, то можете и отключить их использование. А вот на счет редактирования своих сообщений я однозначно голосую за активацию данных пунктов. В данном материале будет использоваться небольшой JavaScript, с помощью которого изменять комментарии можно только в течении определенного времени после их написания.

Установка:


Скачиваем архив с нашего сайта и папку social-comments загружаете в свой файловый менеджер

Далее в таблица стилей CSS в самый низ вставляете код:

Код
.tip {position: absolute !important;top: 15px;left: -7px;height: 13px;width: 9px;background: url("/social-comments/arrow.png") no-repeat top left;position: relative; }  
.comment_error div.commError span.myWinError{margin: 0px 5px 5px 5px;display: block;}  
.buttonsend:hover{opacity:0.8}  
.buttonsend {margin:8px 15px;cursor:pointer;padding: 3px 10px;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;font-weight: bold;text-decoration: none;color: #fff !important;border: none;background: #ea4c89 url(/social-comments/glass.png) repeat-x 0 0;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}  
.comment_os1 {position: absolute !important;top: 10px;right: 9px;height: 20px;width: 20px;background: url("/social-comments/answer.png") no-repeat 0 0;position: relative;cursor:pointer;}  
.comment_os2 {position: absolute !important;top: 30px;right: 7px;height: 15px;width: 22px;background: url("/social-comments/answer.png") no-repeat 0 -20px;position: relative;cursor:pointer; }  
.comment_inner{/*background: #fff;*/ width:100%; overflow: hidden; min-height:50px;padding: 0px;}  
.comment_inner2{margin: 0px 12px; padding: 8px 0px;border-bottom: 1px solid #ececec}  
.comment_avatar{float: left; width: 50px; margin-right: 7px;}  
.comment_avatar img{width: 50px; height: 50px; margin: 3px 10px 0 0;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}  
.comment_body{padding:0px; margin-left: 50px;}  
.comment_title{padding: 5px 8px 0px 8px; font: bold 14px/16px "Tahoma";}  
.comment_message{padding: 8px 8px;color:#666; font-size: 13px;}  
.comment_username{color: #aaa; padding-right:6x;}  
.comment_username a{color: #aaa; text-decoration:none;}  
.comment_username a:hover{color: #999;}  
.comment_date{color: #a9a9a9; font: normal 11px/13px "Tahoma";}  
.comment_addition{padding: 0px 10px; font: bold 11px/13px "Arial","Tahoma";text-align: right;}  
.comment_moder{float:right;}  
.comment_moder a{text-decoration:none; color: #3e3e3e;}  
.cm_edit:hover,.cm_delete:hover { opacity:0.8;}  
.cm_edit {height: 15px;width: 15px;display: inline-block;background-repeat: no-repeat;background-position: 0 1px;background-image: url(/social-comments/edit.png);opacity:0.3;}  
.cm_delete {height: 15px;width: 15px;display: inline-block;background-repeat: no-repeat;background-position: -20px 0px;background-image: url(/social-comments/edit.png); opacity:0.3;}  
.comment_like a{text-decoration:none;color: #ea4c88;padding-left: 14px;background-repeat: no-repeat;background-position: 0 -33px;background-image: url(/social-comments/icon-heard.png);}  
.comment_answer a{text-decoration:none;color: #3e3e3e;padding-left: 15px;background-repeat: no-repeat;background-position: 0 1px; background-image: url(/social-comments/comment.png);}  
.comment_like a:hover,.comment_answer a:hover{opacity:0.7}


Потом заходите в вкладку дизайн » управление дизайном » комментарии » вид комментариев, и заменяем всё на следующий код:

Код
<div class="comment_inner"><div class="comment_inner2">  
<div class="comment_avatar"><a href="<?if($PROFILE_URL$)?>$PROFILE_URL$<?else?>#" onclick="return false;<?endif?>" title="$USERNAME$"><img alt="$USERNAME$" src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/social-comments/avatar-default.gif<?endif?>"></a></div>  
<div class="comment_body">  
<div class="comment_title">$NAME$ <?if($USERNAME$)?><span class="comment_username">@<a href="$PROFILE_URL$">$USERNAME$</a></span><?endif?>  
<?if($MODER_PANEL$)?><?if($CUR_GROUP_ID$!="4")?><span class="whileremovingbuttons" style="display:none;">$TIMESTAMP$</span><?endif?>  
<div class="comment_moder"><a class="cm_edit" href="javascript://" rel="nofollow" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{url:'/index/37-$ID$'});return false;"></a> <a class="cm_delete" href="javascript://" rel="nofollow" id="di$ID$" onclick="del_item($ID$);return false;"></a>  
</div><?endif?></div>  
<div class="comment_date"><span class="timestaaamp">$TIMESTAMP$</span></div>  
<div class="comment_message">$MESSAGE$</div>  
<div class="comment_addition">  

<span class="comment_like">  
<?if($USER_LOGGED_IN$)?> <?if($IS_OWN$)?> <a href="#" onclick="return false;" class="like li3" title="Вы не можете оценивать свои комментарии" rel="Like">$COMMENT_RATING$</a>  
<?else?><?if($GOOD_COMMENT_URL$)?><a href="$GOOD_COMMENT_URL$" class="like li1" title="Нравится?" rel="Like">$COMMENT_RATING$</a>  
<?else?><a href="#" onclick="return false;" class="like li2" title="Вам нравится" rel="Like">$COMMENT_RATING$</a><?endif?>  
<?endif?> <?else?> <a href="#" onclick="return false;" class="like li3" title="Лайков: $COMMENT_RATING$" rel="Like">$COMMENT_RATING$</a>  
<?endif?> </span>  
<?if(!$IS_OWN$ && $USER_LOGGED_IN$)?> <span class="comment_answer"><a href="$ANSWER_URL$" title="Комментировать">Ответить</a></span><?endif?>  
</div></div></div></div>


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

И наконец заходим в дизайн » управление дизайном » комментарии » форма добавления комментариев и меняем всё на следующее:

Код
<script>  
$(document).ready(function(){  
var timeinseconds=3*60*60;  
$("span.timestaaamp").each(function(){  
var curt=$(this).html();  
$(this).html(timeElapsedString(+curt));  
});  
$(".whileremovingbuttons").each(function(){  
var time=$(this).html();  
var d=new Date();  
var now=Math.round(d.getTime()/1000);  
if ((now-timeinseconds)>time && time) $(this).next("div").hide();  
});  

var UID = $('#userid').html();  
if (UID!=0) $('#author_ava').load('/index/8-'+UID+' .user_avatar');  
else $('#author_ava').html("<img alt='Аватар' src='/social-comments/avatar-default.gif'>");  
});  

function commentbb(tx) {  
if (tx==1){  
var str=prompt('Введите ссылку на изображение','');  
var name='[img]'+str+'[/img]';  
}  
else {  
var str=prompt('Введите ссылку','');  
var name='[url]'+str+'[/url]';  
}  
if (str) {  
$('#message').val($('#message').val()+' '+name+' ');  
$('#message').focus();  
var pp = $('#message');  
val = pp.val();  
if (val.charAt(val.length-1) != " ") {  
val += " ";  
}  
pp.focus().val("").val(val);  
}  
}  

</script>  
<script type="text/javascript" src="/social-comments/js/timestamp.js"></script>  

<?if(!$USER_LOGGED_IN$)?><input style="display:none;" type="text" name="name" value="Неизвестный" size="30" maxlength="60"><?endif?>  
<div style="background: #eaeaea; width:100%; min-height:100px; margin-top:-12px;"><div style="padding:12px; padding-bottom:4px;">  
<div class="comment_error">$ERROR$</div>  
<div class="comment_avatar"><div id="author_ava"></div></div>  
<div style="padding:10px; border-radius:4px; background: #fff;margin-left: 65px; position: relative;">  
<span class="tip"></span>  
<?if($USER_LOGGED_IN$)?><div onclick="commentbb(1);" class="comment_os1"></div><div onclick="commentbb(2);" class="comment_os2"></div> <?endif?>  
<textarea placeholder="Что вы об этом думаете?" onfocus="this.value = this.value;" style="color: #595959; font: normal 12px/14px 'Tahoma'; outline:none; resize:none; overflow:hidden; border:0; height:70px; width:90%" rows="5" name="message" id="message" cols="65">$MESSAGE$</textarea>  
</div>  
</div>  
<div align="right"><?if($SECURITY_CODE$)?>Код *: $SECURITY_CODE$<?endif?> <input type="submit" class="buttonsend" id="addcBut" name="submit" value="Отправить"></div>  
</div>


Настройки


Находим var timeinseconds=3*60*60 - это и будет количество секунд, по истечению которых нельзя изменять свои комментарии. В данном примере - через 3 часа.

Если у вас отключены BB-коды URL и IMG для пользователей, то либо вообще удаляйте кнопки изменения из формы (элементы с классами comment_os1 и comment_os2), либо вешайте условие на принадлежность к какой либо группе. И да, в общих настройках нужно поставить галочку в поле: «Не использовать визуальный редактор комментариев».

Установка завершена!
Теги к материалу
вид, ucoz, комментариев, социальный, для
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев