Оповещение о новом сообщении как ВКонтакте

Оповещение о новом сообщении как ВКонтакте

02015-05-291085437Денис Абдуллин

Делать что-либо как ВКонтакте – это стильно, модно, молодежно. Если серьезно, оповещения о новых сообщениях в этом стиле популярны. Думаю, вам будет интересен этот скрипт для uCoz.

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

Оповещение о сообщениях ВКонтакте для uCoz


Установка

Включите API в "Общих настройках" Панели управления.

Вставьте следующий код здесь:

Панель управления - Управление дизайном - Нижняя часть сайта.

Код
<!--Оповещение ЛС-->

<?if($USER_LOGGED_IN$)?>
<div id="one_pm"></div>

<script type="text/javascript">  
var no_ava = 'https://yraaa.ru/images/noavatar.gif';

var this_mess_link = '';
function m_reload() {
if($('#one_pm').html()=='') {
$.get('/index/14?'+Math.random(), function (data) {  
$('b.unread', data).each(function (i,index) {  
getLink = $(index).parent().attr("href");  
this_mess_link = getLink;
getText = $(index).parent().text();  
getAuthorName = $(index).parent().parent().children('a').eq(1).text();  
getAuthor = $(index).parent().parent().children('a').eq(1).attr("href");  
getID = '#one_pm'+i;
var xml = $.ajax({
  type: 'GET',
  url: '/api/index/8-0-'+getAuthorName.replace('-','~'),
  dataType: 'xml',
  async: false
  }).responseText;
var urlAvatar = $(xml).find('struct:first member:contains("USER_AVATAR")').find('string').text();
var userName = $(xml).find('struct:first member:contains("USER_NAME")').find('string').text();
$('#one_pm').html('<div id="one_pm'+i+'" style="display:none">'
+'<div class="h_newpm">'  
+'<div class="h_npin"><a class="h_nover" href="'+getLink+'"></a>'  
+'<div class="h_nptitle">Новое сообщение</div><span class="h_del" onclick="h_del();return false;"></span>'
+'<div class="h_npl"><div class="h_npimg"><a href="#" id="hnp_avatar"></a></div></div>'
+'<div class="h_npr"><a href="#" id="hnp_author"></a> <a id="hnp_text" href="'+getLink+'">'+getText+'</a></div>'
+'</div>'
+'</div>'
+'</div><div id="hnp_sound"></div>');
$(getID+' #hnp_author').attr('href', getAuthor);  
$(getID+' #hnp_avatar').attr('href', getAuthor);
$(getID+' #hnp_author').html(userName);  
$(getID+' #hnp_avatar').html('<img src="'+ (urlAvatar == '' ? no_ava : urlAvatar )+'">');  
setTimeout(function(){$(getID).slideDown(200);},200);  
$('#hnp_sound').html('<audio src="https://yraaa.ru/images/vk.mp3" volume="1" autoplay></audio>');setTimeout(function(){$('#hnp_sound').html('')},2000);
});  
});
}  
}
function h_del() {$('#one_pm').fadeOut(200,function(){$('#one_pm').html('<i></i>')});$.get(this_mess_link);}
m_reload();setInterval(function(){m_reload()}, 15000);
</script>

<style type="text/css">
#one_pm {position:fixed;left:20px;bottom:0px;cursor:pointer;font-family:Tahoma,Arial,Verdana,sans-srif}
#hnp_sound {position:absolute;top:-1000px;left:-1000px}
#hnp_author span {display:none}
.h_newpm {position:relative;width:350px;height:110px;margin-bottom:20px;background:rgba(0,0,0,0.7);text-shadow:0 1px 3px rgba(0,0,0,0.5);box-shadow:0 0 10px #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.h_newpm #hnp_author {color:#a4dcfa;font-weight:bold;text-decoration:none;}
.h_newpm #hnp_author:hover {color:#a4dcfa;text-decoration:underline}
.h_npin {padding:14px;padding-top:10px}
.h_nptitle {color:#FFF;font-size:13px;font-weight:bold;padding-bottom:12px}
.h_npimg {width:57px;height:57px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.3);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.h_npimg img {width:100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.h_npl {position:absolute;left:13px;top:38px;z-index:3;width:70px}
.h_npr {position:absolute;left:84px;top:38px;z-index:3;color:#FFF;font-size:13px;padding-right:14px}
.h_npr #hnp_text, .h_npr #hnp_text:hover {display:block;text-decoration:none;color:#FFF}
.h_newpm:hover .h_del {display:inline-block;}
.h_del {position:absolute;display:none;top:12px;right:12px;z-index:3;cursor:pointer;background:url('https://yraaa.ru/634294/del023.png') 0px 0px;width:18px;height:18px}
.h_del:hover {background-position:0px 18px}
.h_nover {position:absolute;top:0px;left:0px;width:100%;height:100%;}
</style>

<?endif?>
  • https://yraaa.ru/images/noavatar.gif – замените на свое изображение "noavatar" или загрузите на свой сайт предложенный вариант.
  • И вообще, настоятельно рекомендуем загрузить изображения и звуки на свой сайт.

Особенности данного оповещения

Продублирую текст с картинки выше, поскольку с мобильного телефона его не удобно будет читать, да и просто для такого по сути простого материала интересно было попробовать организовать довольно внушительную презентацию. Скорее всего вы не пройдете мимо и захотите хотя бы попробовать установить данный скрипт на своей uCoz сайт.

  • Нажимая на область уведомления, пользователь переходит на страницу сообщения;
  • Показывается аватар и имя отправителя;
  • Тема сообщения;
  • По нажатию кнопки "Закрыть", уведомление исчезает, а сообщение считается прочитанным;
  • Дизайн ВКонтакте;
  • Звуковое оповещение;
  • Анимация

Больше ВКонтакте?

На сайте не раз выкладывались материалы с каким-либо намеком на ВКонтакте или в прямом ключе. Предлагаем посмотреть несколько таких материалов. Возможно, вы найдете еще что-то интересно. Вот список:


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (37)
Витя 2016-02-17 в 14:30 / МатериалСпам
Спасибо денис, всегда ствлю себе этот скрипт.
0
Павел 2015-08-24 в 18:17 / МатериалСпам
Еще раз убедился, что если много сообщений за раз приходит, а у меня их в день по 30 минимум, идет сильная нагрузка и меня блокирует из за частого запроса, 403.
1
Денис Абдуллин 2015-07-12 в 19:49 / Материал
Добавьте к ссылкам <a href... атрибут target="_blank"
0
svevas 2015-07-12 в 14:40 / Материал
Поставила этот скрипт,замечательно работает и все показывет,но некоторые пользователи не совсем довольны,что при нажатии личкау открывает в этом же окне а не в новом и не всплывающем (как на сайте при нажатии на сообщения),в итоге то что читаешь на форуме закрывается.Как сделать (что добавить) чтоб сообщения открывались в новом диалоговом окне а не в том же?
0
Kophack 2015-07-23 в 19:29 / МатериалСпам
Я уверен те у которых скрипт не работает делают что-то неправильно у меня в скрипте все отлично работает.
0
Павел 2015-07-02 в 02:30 / МатериалСпам
Сильно нагружает сайт.
0
Владислав 2015-06-15 в 20:33 / Материал
Включите API в "Общих настройках" Панели управления.
0
Кирилл Катровский 2015-06-15 в 20:49 / МатериалСпам
Это включено.
0
Кирилл Катровский 2015-06-15 в 20:18 / МатериалСпам
Действительно, аватар не отображается, как имя пользователя, собственно. Никто из присутствующих не мог бы подсказать, в какую сторону копать?
0
Владислав 2015-06-09 в 23:16 / Материал
У нас хватает работы. Если желаете что бы все решили за Вас, пишите в нашу техническую поддержку, а не администраторам!
0
Мистер-Х 2015-06-09 в 19:35 / МатериалСпам
Все работает, только ава отправителя не видно и все! Установил как написано так и установил по инструкция.
0
Мистер-Х 2015-06-08 в 23:13 / МатериалСпам
Почему ава отправителя не видно ? место ава показывает картинка noavatar.gif
0
Денис Минов 2015-06-07 в 18:20 / МатериалСпам
Надеюсь хотя б этот будет нормально работать :3
0
Денис Минов 2015-06-07 в 18:51 / МатериалСпам
Спасибо! Всё работает на отлично!
0
Сергей Александрович 2015-06-09 в 10:11 / Материал
Если у вас по какой то причине не работает скрипт то обращайтесь в нашу тех.поддержку. Если у всех работает, а у вас нет то это значит что вы делаете что то не правильно.
0
Алексей 2015-06-03 в 11:20 / МатериалСпам
К сожалению не работает полностью, окно сообщений появляется но в содержимом не отображается ник и аватар. API включен
0
Ангелина 2015-05-31 в 20:57 / МатериалСпам
Хорош рипчик )
0
Владислав 2015-05-31 в 11:33 / Материал
Если вы обнаружили баг, то пожалуйста, сообщайте об этом мне, а не Денису, у него и так работы полно.
1
Тигран 2015-05-30 в 16:53 / МатериалСпам
Пффф ну давайте теперь репу понижать друг другу
4
Денис Абдуллин 2015-05-30 в 08:13 / Материал
Не, нифига, он про то, что ты писал мне ВКонтакте.
0
Тигран 2015-05-30 в 08:25 / МатериалСпам
Мог бы просто написать, что нету. Почему сразу глупый вопрос?
0
Тигран 2015-05-30 в 00:42 / МатериалСпам
Так теперь обнаружение бага - это глупый вопрос?
0
Дмитрий Мокрушин 2015-05-29 в 21:51 / МатериалСпам
И что даже IP не баниться из-за get-запросов?
1
Денис Абдуллин 2015-05-29 в 15:56 / Материал
Исправил.
3
Владислав 2015-05-29 в 18:47 / Материал
были бы отзывчивы и ВКонтакте, если бы не такие глупые сообщения:)
0
Тигран 2015-05-29 в 15:37 / МатериалСпам
У меня не открывается
0
Тигран 2015-05-29 в 17:16 / МатериалСпам
А здесь ты отзывчевие чем Вконтакте
1
Денис Абдуллин 2015-05-29 в 15:34 / Материал
Должен, и оно открывается, если всплывающие окна не заблокированы браузером.
2
Тигран 2015-05-29 в 15:07 / МатериалСпам
А при нажатии на сообщение скрипт должен открывать окно с сообщением?
0
Денис Абдуллин 2015-05-29 в 13:58 / Материал
Включите API
4
1 2 »
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.