Стена пользователя v1 для uCoz
Интересное разрабатывания стены из каталога сайтов.

Друзья. Спрашивал в чате ли делать стену для uCoz - ответил всего один пользователь. В общем благодарите его за то, что он сказал да. Иначе я бы не делал.


Стена пользователя сделана из модуля Каталог сайтов. Выводится она с помощью script и IFrame.


Хочу рассказать плюсы и минусы такой стены.


Плюсы:


1. Теперь очень модно иметь стену пользователя на сайте и делать записи или комментировать другие записи. В общем то ставлю плюс + , потому что в такой стене можно это делать.


2. Можно оформить запись в виде картинки. +


3. Мне кажется она не грузит очень сильно сайт. Вроде плюс.


4. Также плюс ставлю за то, что можно редактировать и удалять свои записи и комментарии.


5. Можно писать на стене у другого пользователя.


6. Свои эмоции можно выражать с помощью смайлов.


7. Есть функция создать стену. Если у кого-то стена не создана то нельзя добавлять записи.


Минусы:


1. Как ни крути но модуля все равно избавляемся. Стена его забирает.


2. Нельзя удалять записи других пользователей на своей стене.


3. Есть еще такой минус как лайки или оценки. Я не хотел добавлять их так как не нашел решение чтобы они исчезали при оценке записи. Может в v2 этого минуса не будет.


4. Нельзя добавлять аудиозаписи, видеозаписи как в других социальных сетях.

Вроде все плюсы и минусы сказал. Может где что пропустил.


Установка


Управление дизайном - Каталог сайтов - Страница материалов и комментариев к нему:


Код
<html>
<head>
<link type="text/css" rel="StyleSheet" href="/css/style.css" />
  <style>#puzadpn {display:none}.puzadpn {display:none}
::-webkit-scrollbar {display: none;}
textarea, input {cursor:text}
textarea {resize:none}
textarea:focus, input:focus, select:focus {outline:none}
input[type=text], input[type=password], textarea{-webkit-appearance: none;resize: none;padding: 10px 10px 10px 10px;border-bottom: 2px solid #dce4ec; color: #34495e; font-family: "Lato", sans-serif; text-indent: 1px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;border-top: none;border-left: none;border-right: none;border-top-left-radius: 5px;border-top-right-radius: 5px;}
input[type=text]:focus, input[type=text]:active, textarea:focus, textarea:active, input[type=password]:focus, input[type=password]:active{border-bottom: 2px solid #2196f3; border-top: none;border-left: none;border-right: none;}
button, input[type="button"], input[type="submit"], input[type="reset"]{border:none; color: #4285f4;padding: 10px 19px;font-size:14px;display: inline-block;overflow:hidden; background:#f2f6fa;text-align:center;font-weight: bold;border-radius:10px; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;cursor: pointer;}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {overflow:hidden;background:#e6eef5;text-align:center;border-radius:10px;}
.pad20{padding: 20px;}
.button_comment {margin-top: -3px;padding: 8px;background:#F2F6FA;}
  #cl_text {border: 2px solid #dce4ec;border-radius: 5px;}
.comment_over {margin-top:20px;padding-bottom:15px;border-bottom:1px solid #dedede}  
.comment {display:table;width:100%;}  
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}
.comment_avatar img {border-radius: 100px;width: 60px;height: 60px;object-fit: cover;}
.comment_message {display:table-cell;vertical-align:top;text-align:left}
.comment_message_in img {max-width: 100%;}
.del-com {display: inline-block;padding-left: 10px;}
textarea#message {width: 836px;height: 55px;}
.commform_code {display: inline-block;width: 20px;height: 18px;vertical-align: top;opacity: 0.8;background-image: url(https://web.telegram.org/img/icons/General.png);background-repeat: no-repeat;background-position: -10px -399px;}
.commform_code:hover {background-position:-10px -427px;opacity: 1;}
.drop {position: relative;}
.dropdownContain {position: absolute;z-index: 2;left: 50%;margin-left: -7em;top: -300px;}
.dropOut {background:#fff;width:190px!important;padding: 10px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);position: relative;opacity: 0; @include border-radius(.4em, .4em);overflow:hidden;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
.dropOut a { padding: 10px;display: block;}
.dropOut a:hover {background:#f9f9f9;color:#000;text-decoration:none}
.nav, .ul:hover .triangle { opacity: 1 ;display: inline-block;}
.nav .ul:hover .dropdownContain {top:-100px; }
.nav .ul:hover .dropOut { opacity: 1; margin-bottom:20px;}
.user span{margin-left: 10px; display: inline-block; width: 22px; height: 22px; vertical-align: top; opacity: .8; background-image: url(https://web.telegram.org/img/icons/General.png); background-repeat: no-repeat; background-position: -9px -335px;}
.dropOut img{padding-left:3px;padding-top:3px;float:left;cursor:pointer}  
.user span:hover{ background-position: -9px -367px;opacity: 1;}  
.commform {display: inline-block;margin-left: 25px;}
.commform_smile {display: inline-block;}
i.read {height: 17px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -80px -46px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block;}
i.delete {height: 16px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -240px -199px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block; cursor: pointer;}  
.comment_rate {display:table-cell;vertical-align:top;text-align:center;width:80px}  
.comment_top {padding-top:2px;padding-bottom:7px;font-size:17px;line-height:20px}  
.comment_top a {text-decoration:none;color:#6c6c6c}  
.comment_top .comm_time {font-size:12px;color:#9c9c9c;display:inline-block;padding-left:10px}  
.comment_message_in {font-size:15px}  
.comment_over:hover .comment_answer_button a {display:inline-block}  
.comment_over:hover .c_rate_plus a, .comment_over:hover .c_rate_minus a {display:block}  
.comment_answer_button {margin-top:10px;height:24px}  
.comment_answer_button a {display:none;color:#666;font-size:13px;text-decoration:none;background:#efefef;padding:3px 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}  
.comment_answer_button a:hover {color:#1d1d1d;text-decoration:none;background:#eaeaea;}  

  </style>  
<style>.com-order-block {display:none;}</style>
</head>
<body>
<div class="wrapper pad20">
<?if($COM_IS_ACTIVE$)?>$COM_ADD_FORM$
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25">
  <h2 style="font-size: 15px;margin-left: 10px;padding: 10px 0px;color: #b2c8db;">
<b>$COM_NUM_ENTRIES$</b> запис<?if($COM_NUM_ENTRIES$%10=0||$COM_NUM_ENTRIES$%10>4||$COM_NUM_ENTRIES$%100>10&&$COM_NUM_ENTRIES$%100<15)?>ей<?else?><?if($COM_NUM_ENTRIES$%10=1)?>ь<?else?>и<?endif?><?endif?>
</h2></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?><?endif?>
  </div>
</div>$POWERED_BY$
</body>
</html>


Управление дизайном - Каталог сайтов - Вид материалов


Код
<div class="eTitle">$ENTRY_URL$</div>


Настройки модуля - Форма добавления материала - убираем все галочки кроме "Название сайта". И создаем категорию, чтобы у неё был id 1.


В форму добавления комментариев:


Код
<?if($MODULE_ID$="dir")?> <?if($USER_LOGGED_IN$)?><div style="display:none;">$BBCODES$</div>
<div class="cl_editor" id="cl_text">  
<textarea name="message" id="message" class="send_comment">$MESSAGE$</textarea>  
<?if($SECURITY_CODE$)?><tr><td class="commTd1" nowrap>Код: </td><td class="commTd2">$SECURITY_CODE$</td></tr><?endif?>  
<div class="button_comment"><input class="button" type="submit" name="submit"> <div class="commform"><div class="commform_code" onclick="smiles('[img][/img]')"></div>
<div class="nav">
  <div class="ul">
  <div class="drop">
   
  <div class="user">
<span> </span>
  </div>
  <div class="dropdownContain">
  <div class="dropOut">
<img src="http://kanavas.at.ua/smiles/smile.gif" onclick="smiles(':)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/wink.gif" onclick="smiles(';)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/laugh.gif" onclick="smiles(':D')" alt="" />  
<img src="http://kanavas.at.ua/smiles/cool.gif" onclick="smiles('B)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/sad.gif" onclick="smiles(':(')" alt="" />  
<img src="http://kanavas.at.ua/smiles/cry.gif" onclick="smiles(':cry:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/care.gif" onclick="smiles('^_^')" alt="" />  
<img src="http://kanavas.at.ua/smiles/tease.gif" onclick="smiles(':p')" alt="" />  
<img src="http://kanavas.at.ua/smiles/shock.gif" onclick="smiles('%)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/angel.gif" onclick="smiles('0:)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/eye.gif" onclick="smiles(':eye:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/fools.gif" onclick="smiles(':fools:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/please.gif" onclick="smiles(':please:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/desman.gif" onclick="smiles(':des:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/xd.gif" onclick="smiles(':xD:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/like.gif" onclick="smiles(':like:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/unlike.gif" onclick="smiles(':unlike:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/ok.gif" onclick="smiles(':ok:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/peace.gif" onclick="smiles(':peace:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/clups.gif" onclick="smiles(':clups:')" alt="" />  
  </div>
  </div>
  </div>
  </div> </div></div>  
</div><div class="cerr">$ERROR$</div><?endif?>
<script type="text/javascript">  
function smiles(tx) {  
$('#message').val($('#message').val()+' '+tx+' ')  
$('#message').focus()  
}  
</script>
<?endif?>

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


Код
<?if($MODULE_ID$="dir")?>  
<script type="text/javascript">
  function getrate(strid) {
$('#mok'+strid).toggle(0)
$('#mjk'+strid).toggle(0)
}
</script>
<div class="post all" onmouseover="wall.postOver('')" onmouseout="wall.postOut('')">  
<div class="comment_over">  
<div class="comment">  
<div class="comment_avatar"><a href="$PROFILE_URL$" target="_blank"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://yraaa.ru/images/noavatar.gif<?endif?>" width="64" alt="" /></a></div>  
<div class="comment_message">  
<div class="comment_top"><?if($USERNAME$)?><a href="$PROFILE_URL$" target="_blank">$NAME$</a><?endif?> <span class="comm_time">$DATE$ в $TIME$<?if($ENTRY_URL$)?> / <a href="$ENTRY_URL$">Материал</a><?endif?></span><?if($MODER_PANEL$)?><div style="display:none">$MODER_PANEL$</div>
<div class="del-com ">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{type:'POST', url:'/index/37-$ID$', data: { sdata: ssdata[scurrent], soc_type: scurrent}});return false;"><i class="read"></i></a>  
<a onclick="$('#dt$ID$').fadeOut(150);del_item('$ID$');setTimeout(function(){$('#public_$ID$').fadeTo(200, 0.1);$('#public_$ID$').slideToggle(200)},2000)" onmouseover="setClass('bom0$ID$',)" onmouseout="setClass('bom0$ID$',)" id="bom0$ID$"><i class="delete"></i></a>
</div>
<?endif?></div>  
<div class="comment_message_in">$MESSAGE$</div>  
<?if($ANSWER_URL$)?><div class="comment_answer_button"><a href="$ANSWER_URL$">Комментировать</a></div><?endif?>
  </div>  
</div>  
</div>
</div><?endif?>
  

8. Управление дизайном - Пользователи - Персональная страница пользователя. Ставим туда, куда хотим видеть стенку:


Код
<?if($_DIR_ENTRIES$="0" && $_IS_OWN_PROFILE$)?>
<div class="pad10"><center><input id="create" type="button" value="Создать стену" /></center></div>
  <script type="text/javascript">  
  $(function(){  
  $('#create').click(function() {  
  $(this).attr('disabled','disabled');  
  $.get("/dir/0-0-0-0-1", function(data) {  
  $.post("/dir/", {  
  a: 12,
  jkd428: 1,  
  jkd498: 1,
  ocat: 1,
  title: '$USERNAME$',  
  tags: '$USERNAME$',  
  coms_allowed: 1,  
  ssid: $('[name="ssid"]', data).val()  
  }, function(res) {  
  $('#create').remove();  
  location.reload()  
  })  
  })  
  })  
  })  
  </script><?endif?>
<?if($_DIR_ENTRIES$)?><script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
  setInterval(function() {resizeIframe(document.getElementById('frame'))},200 )
</script>
  <script type="text/javascript">  
  document.write('<div class="prog"></div>');  
  $.get("/dir/0-0-$_USER_ID$-0-17",  
  function(data) {  
  var ifnohist = $(".eTitle:first", data).html();  
  $('.prog').html('<iframe id="frame" src=" '+ifnohist+' " width="100%" frameborder="0"></iframe>');  
  });  
  </script>
<?endif?>

Ждем второй версии.

Всего комментариев: (12)

vanu2006290812
в 13:31, 24 Янв 19
у профілі де повинна бути стіна видає помилку 404
otgamera
в 11:25, 27 Окт 17
а вторая версия есть?
Gamelord
в 19:50, 28 Июл 17
У меня на персональной странице в место стены ошибка такой страницы не существует
Alehios
в 14:55, 06 Мар 17
Еще к данному скрипту добавлю следующее! Если у кого не работает скрипт, обратите внимание, не создавались ли данным пользователем ранее в модуле "Каталог сайтов" материалы. Если да - зайдите на страницу вашего профиля, нажмите на шестеренку (управление счетчиками) и нажмите на автоматический пересчет. Цифра напротив "Каталога сайтов" должна отображать значение "0". После чего скрипт у вас заработает и появиться кнопка "создать стену"
Alehios
в 12:50, 06 Мар 17
Разобрался! Заработало. К материалу добавлю! Что после того как выполните все инструкции здесь, в настройки - каталог сайтов - не забудьте включить функцию "Включить возможность поиска материалов пользователя:" в самом низу
Alehios
в 12:36, 06 Мар 17
Вижу что скрипт у вас на сайте работает отлично. Но на каком бы сайте я не пробовал повторить и все перезалить, не работает. Вместо того чтобы скрипт выводил форму добавления комментария на странице пользователя, он почему-то выводит в его профиле главную страницу самого сайта. Помогите с решением, возможно в скрипте есть ошибка!
Alehios
в 16:15, 05 Мар 17
Нужно тоже самое только для любого другого модуля . . . . К каталогу новостей к примеру либо к блогу!
Sheriff
в 13:20, 22 Мар 16
А кто автор этого? Если админ, напиши мне в скайп ghost_0007, есть предложение о сотрудничестве в рамках uscript.pro
Kanavas
в 13:24, 22 Мар 16
Я автор. 0:)
root-1
в 12:55, 09 Мар 16
не робит чего-то ((
Kanavas
в 18:51, 09 Мар 16
Что именно не робит? 0:)
Alehios
в 16:19, 05 Мар 17
Нужно тоже самое только для любого другого модуля . . . . К каталогу новостей к примеру либо к блогу!
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Красивый вид материалов для uCoz
Красивый вид материалов для uCoz
Как создавался новый логотип Google
Как создавался новый логотип Google
7 адаптивных и минималистических форм для сайта
7 адаптивных и минималистических фо
Прекрасные и качественные иконки для сайта
Прекрасные и качественные иконки дл
5 бесплатных паттернов с иконками на фоне
5 бесплатных паттернов с иконками н
Антиспам для комментариев на условных операторах
Антиспам для комментариев на условн