Смайлики в комментариях

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

Форумы уже давно обзавелись возможностью автоматически переводить текстовые смайлики в изображения. Блогерам же, по большому счету, в этом отказано. Пора нам исправить эту несправедливость!

Начнем с того, что для конвертации текстовых смайлов в графические, вы можете как задействовать мой скрипт с отобранными лично мной смайликами, так и сделать на его основе что-то свое. Чтобы определиться, какой из вариантов для вас предпочтительней, загляните под спойлер:

	-	:-)   :)   =)
	-	:-(   :(   =(
	-	;-)   ;)
	-	:-\   =\   :-/   =/
	-	:-D   :D   =D
	-	8-)   8)
	-	:-P   :-p   :P   :p   =P   =p   :-Ъ   :-ъ   :Ъ   :ъ   =Ъ   =ъ   :-Ь   :-ь   :Ь   :ь   =Ь   =ь
	-	:~(   :'(   :_(
	-	XD   :lol:
	-	:-[   :[   =[
	-	%О   %0
	-	8-0   8-O   O_o   о_О
	-	:beer:
	-	:friends:
	-	:help:   :sos:
	-	:fool:   :idiot:   :wall:
	-	:thanks:
	-	:rtfm:
	-	:-@   :@   =@   :angry:   :mad:
	-	:gigi:

* Буквы Р, р, О, о в смайликах, комбинации активации которых не ограничены двоеточием, могут быть как в латинской, так и кириллической раскладке - без разницы.

Если вы решили остановиться на использовании непосредственно моего скрипта с отобранными мной смайликами, тогда откройте редактор шаблона (Дизайн->Изменить HTML) и добавьте перед закрывающим тэгом </head> следующую строку:

<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'/>
</head>

* Если перед тэгом </head> уже имеется ссылка на скрипт jquery.min.js, то дублировать ее не стоит. Достаточно одного указания на библиотеку jQuery.

В зависимости от того, какой формат комментариев - линейный или иерархический - вы используете, под тот спойлер и заглядываете:

Перед закрывающим тэгом </body> добавляем следующую строку:

<script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPZjRsaDJEYzlyLUU' type='text/javascript'/>
</body>

Единственное, что еще можно сделать, это проинформировать читателей о возможности использования смайлов. Для этого, думаю, вам стоит ознакомиться со статьей "Всплывающая подсказка".

Перед закрывающим тэгом </body> добавляем следующую строку:

<script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPQ0laa09hNnFRbmM' type='text/javascript'/>
</body>

Единственное, что еще можно сделать, это проинформировать читателей о возможности использования смайлов. При желании можно получить примерно следующее:

Для этого создаем картинку, аналогичную этой:

После этого в редакторе шаблона ставим галочку напротив "Расширить шаблоны виджета" и ищем вторую строку вида <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> и добавляем под нее ссылку на свою картинку. Примерно так:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<img border="0"  height="60" width="415" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkxXt-qRT3XNl0MLsHafqfP4UvFWR37lhu_lsTacJgLxPGRv8S4BeFqL05YaOeZcS9CKsrhLoA9mIZ-9ZkqDlbbA20mg4lXOEtk6Tb2bZsv0lFjqgvxPdZ6ZyBJY_pGIgmOFVpPDNVMu4/" title="Добавляем смайлики в сообщение" />

Все! Можете смело "насиловать" комментарии своего блога, проверяя все возможные комбинации активации смайликов

Теперь поговорим с теми, кто не ищет легких путей и предпочитает во все вникать сам. Для вас, уважаемые, код скрипта (для демонстрации используется скрипт для иерархического формата комментариев):

var p = '<img src="https://drive.google.com/uc?export=download&amp;id=';
var u = '" border="0" />';
if(document.getElementsByClassName == undefined) {
  var smiles = $('#comments').find('.comment-content')
} else {
  var smiles = document.getElementById('comments').getElementsByClassName('comment-content')
}
for (key in smiles) {
  var smile = smiles[key]
  if (smile.innerHTML) {
    smile.innerHTML = smile.innerHTML.replace(/(:-?|=)\)/ig, p+"0B3_dGXEjBVdPejFuX2hHeUZTLVk"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:-?|=)\(/ig, p+"0B3_dGXEjBVdPeExVNkJ6Ry1WQXc"+u);
    smile.innerHTML = smile.innerHTML.replace(/;-?\)/ig, p+"0B3_dGXEjBVdPVFlCUG9DdWpZaVU"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:-|=)[\\\x2F]/ig, p+"0B3_dGXEjBVdPendKYVdYUGMyVUk"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:-?|=)D/g, p+"0B3_dGXEjBVdPVjZ2NklUMHVjd3c"+u);
    smile.innerHTML = smile.innerHTML.replace(/8-?\)/ig, p+"0B3_dGXEjBVdPaEUtLXNkRlRZcVE"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:-?|=)[pръь]/ig, p+"0B3_dGXEjBVdPa1E2Y3NLU0dkWUk"+u);
    smile.innerHTML = smile.innerHTML.replace(/:(_|~|\')\(/ig, p+"0B3_dGXEjBVdPT3pmaHZkUEFTWFU"+u);
    smile.innerHTML = smile.innerHTML.replace(/(XD)|(:lol:)/g, p+"0B3_dGXEjBVdPZmtUenZORDlqRms"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:-?|=)\[/ig, p+"0B3_dGXEjBVdPanJLakJPdFhWTlE"+u);
    smile.innerHTML = smile.innerHTML.replace(/%[0OО]/g, p+"0B3_dGXEjBVdPOERQWXNUREZUT0U"+u);
    smile.innerHTML = smile.innerHTML.replace(/(8-[0OО])|([OО]_[oо])|([oо]_[OО])/g, p+"0B3_dGXEjBVdPbm4zdjVqV1I5TU0"+u);
    smile.innerHTML = smile.innerHTML.replace(/:beer:/g, p+"0B3_dGXEjBVdPRDA0NmtESkcxcWs"+u);
    smile.innerHTML = smile.innerHTML.replace(/:friends:/g, p+"0B3_dGXEjBVdPekFjWmFoVXpZWTA"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:help:)|(:sos:)/g, p+"0B3_dGXEjBVdPNE1XdzNnS1B6Rjg"+u);
    smile.innerHTML = smile.innerHTML.replace(/(:fool:)|(:idiot:)|(:wall:)/g, p+"0B3_dGXEjBVdPWFNoQ1FMZHhOWHM"+u);
    smile.innerHTML = smile.innerHTML.replace(/:thanks:/g, p+"0B3_dGXEjBVdPU09uUWpuTUZnSUU"+u);
    smile.innerHTML = smile.innerHTML.replace(/:rtfm:/g, p+"0B3_dGXEjBVdPTm92TEJ6TVZNeVE"+u);
    smile.innerHTML = smile.innerHTML.replace(/((:-?|=)\@)|(:angry:)|(:mad:)/g, p+"0B3_dGXEjBVdPVEpGZE4tMWZRX1E"+u);
    smile.innerHTML = smile.innerHTML.replace(/:gigi:/g, p+"0B3_dGXEjBVdPZFdoT0FaQ3Ita1E"+u);
  }
}

Скрипт построен так, что файлы смайликов должны находиться по схожему пути. Обратите внимания на подсвеченные строки 1 и 2. В них задается путь к конечным файлам и почти полностью выстраивается тэг <img>. Окончательная сборка тэга публикации картинки производится в конце каждой строки, начинающейся с "smile.innerHTML = smile.innerHTML.replace". Если вы захотите задать свои ссылки на смайлики, соблюдая условия схожего пути, то вам придется их поправить под свой путь. Если же пути будут разные, то просто удалите 1 и 2 строку кода, а во всех строках, начинающихся с "smile.innerHTML = smile.innerHTML.replace" замените конструкцию 'p+"<набор символов>"+u' на полную ссылку до вашего смайлика.

Обратите внимание на подсвеченную строку 29. Она наиболее наглядно демонстрирует набор комбинаций активации смайлика. Комбинации формируются в отрезке "((:-?|=)\@)|(:angry:)|(:mad:)". Чтобы понять, что за "белиберда" здесь написана и как она преобразуется в варианты комбинаций активации смайлика, вам необходимо хотя бы немного изучить синтаксис специальных символов в регулярных выражениях JavaScript
Еще хотелось остановиться на одном моменте: смайлики для светлого фона и смайлики для темного фона различаются. Так, смайлики для темного фона несколько "рваные" по краям на светлых фонах. Но они отлично смотрятся на темной подложке. Смайлики же для светлого фона отлично смотрятся на белой и светлой подложке, но на темной они выглядят как бы с белыми обводами. Ознакомиться с различными наборами смайликов и скачать их можно, к примеру, здесь.

Фух, закончил. Дерзайте! Теперь дело за вами