Главная » Администрирование сайта » Управление шаблонами » Gravatar в комментариях на jQuery

Gravatar в комментариях на jQuery

19.01.2012 в 17:30
Автор: DPolyakov   
Начну издалека... Думаю что такое "аватарка" знают все. Для тех кто не в курсе - поясню - это маленькая картинка, которая ассоциируется с пользователем. Многие в качестве аватарки ставят свою фотку или выбирают какую либо картинку. И причем многие хотели бы, чтобы аватарка появлялась рядом с их каждым сообщением в сети. Кроме того, существует такой сервис Gravatar (http://ru.gravatar.com/). И он как раз призван удовлетворять желание этих самых пользователей. Дело в том, что с его помощью можно привязать аватарку к e-mail`у, а указывая этот ящик на сайтах, подключивших Gravatar добиться показа своей аватарки.
Если вы пользователь, то все просто - регистрируйтесь в сервисе, указывайте ящик и привязвайте к нему картинку.
Для тех, кто хочет подключить Gravatar к своему сайту инструкция ниже:

Что нам потребуется:
Библиотека md5 для jQuery, скачать ее можно здесь: http://easyclip.googlecode.com/svn-history/r2/trunk/jquery.md5.js . Сохраните этот файл как jquery.md5.js, загрузите его к себе на сайт и подключите на странице после тега , где хотите выводить граватары:
Code
  
<script type="text/javascript" src="путь_к_файлу/jquery.md5.js"></script>  


После этого вставляем этот код:
Code
  
<script type="text/javascript" language="javascript">  
function userpic(email,id,name) {  
$('.'+id +' > .userpic').html('<img alt="'+name+'"'  
+'src="http://www.gravatar.com/avatar/'+$.md5(email)+'?d=wavatar&s=50&r=g" >');  
}  
</script>  


Верстка комментария должна быть примерно такой:
Code
  
<div class="comment">  
<div class="u-info ent$ID$">  
<div class="userpic"><script type="text/javascript" language="javascript">userpic('$EMAIL$','ent$ID$','$NAME$');</script>  
</div>  
</div>  
текст комментария  
</div>  


Теперь немножко о переменных, которые мы передаем функции:
$EMAIL$ — собственно e-mail комментатора.
ent$ID$ — id блока комментария. Внутри этого блока должен быть элемент с классом userpic. Скрипт найдет этот элемент и вставит в него сгенерированную картинку.
$NAME$ — имя комментатора, будет указано в качестве альтернативного текста к картинке.
Вот в принципе и всё.

комментарии, Gravatar, аватар, jquery

Рейтинг: 1  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 8008          Комментариев:

Похожие инструкции