Текущие дата и время: 19 марта 2024, 09:47:00

Смайлики и HTML-коды в комментариях от Disqus

Обсуждение авторских смайликов и т.п.

Смайлики и HTML-коды в комментариях от Disqus

Сообщение DmitryS » 21 октября 2012, 18:10

КАК СДЕЛАТЬ ОТОБРАЖЕНИЕ СМАЙЛИКОВ В DISQUS ?

Изображение

1. Регистрируемся (если ещё не зарегистрированы) на сайте https://disqus.com/
2. Создаём там систему комментирования и копируем предложенный код на свою страницу.
3. Добавляем картинку и всплывающее окно с подсказкой, как показано выше на скриншоте.
(можно выполнить в виде 2-х блоков <div>...</div> со значениями style="position: absolute;")
4. Добавляем в тег <body> событие «onload»: <body onload="IsST();">
5. Вставляем перед тегом </head> следующий код:

<script language="JavaScript" type="text/javascript">
<!--
var isss = 0;
function IsST() {
isss = window.setInterval('IsSmiles();', 1000);
};
function IsSmiles() {
var bbt = "";
var cbt = 0;
var sbt = 0;
var ebt = 0;
var lbt = 0;
var idbt = 0;
var tbt = "";
bbt = document.getElementsByTagName('body')[0].innerHTML;
if (bbt) {
bbt = bbt.replace(/^\s+|\s+$/g, "");
if (bbt.length > 0) {
while (cbt < bbt.length) {
sbt = -1;
sbt = bbt.indexOf('"dsq-comment-text-', cbt);
if (sbt == -1) {cbt = bbt.length + 1};
if (sbt != -1) {
sbt = sbt + 1;
ebt = -1;
ebt = bbt.indexOf('"', sbt);
if (ebt == -1) {cbt = bbt.length + 1};
if (ebt != -1) {
lbt = 0;
lbt = ebt - sbt;
cbt = ebt + 1;
if (lbt > 0) {
idbt = "";
idbt = bbt.substr(sbt, lbt);
idbt = idbt.replace(/^\s+|\s+$/g, "");
if (idbt.length > 0) {
tbt = "";
tbt = document.getElementById(idbt).innerHTML;
if (tbt) {
if (tbt.length > 0) {
if ((tbt.indexOf(":-)", 0) != -1) || (tbt.indexOf(":-(", 0) != -1) || (tbt.indexOf(";-)", 0) != -1) || (tbt.indexOf(":-D", 0) != -1) || (tbt.indexOf("O:)", 0) != -1) || (tbt.indexOf("o:)", 0) != -1) || (tbt.indexOf("8-)", 0) != -1) || (tbt.indexOf(":-p", 0) != -1) || (tbt.indexOf(":-P", 0) != -1) || (tbt.indexOf(":-[", 0) != -1) || (tbt.indexOf("=-O", 0) != -1) || (tbt.indexOf("=-o", 0) != -1) || (tbt.indexOf(":-*", 0) != -1) || (tbt.indexOf(":-{}", 0) != -1) || (tbt.indexOf(":'-(", 0) != -1) || (tbt.indexOf(":'(", 0) != -1) || (tbt.indexOf("%-)", 0) != -1) || (tbt.indexOf(":)))", 0) != -1) || (tbt.indexOf(";-D", 0) != -1) || (tbt.indexOf("[:-}", 0) != -1) || (tbt.indexOf("[:}", 0) != -1) || (tbt.indexOf("]:-}", 0) != -1) || (tbt.indexOf("}:-}", 0) != -1) || (tbt.indexOf("]:}", 0) != -1) || (tbt.indexOf("}:}", 0) != -1) || (tbt.indexOf(":-!", 0) != -1) || (tbt.indexOf(":-\\", 0) != -1)) {
tbt = tbt.replace(/:-\)/g,'<img src="https://vrcp.ru/smiles/light/00.gif" alt="" title="" />');
tbt = tbt.replace(/:-\(/g,'<img src="https://vrcp.ru/smiles/light/01.gif" alt="" title="" />');
tbt = tbt.replace(/;-\)/g,'<img src="https://vrcp.ru/smiles/light/02.gif" alt="" title="" />');
tbt = tbt.replace(/:-D/g,'<img src="https://vrcp.ru/smiles/light/03.gif" alt="" title="" />');
tbt = tbt.replace(/O:\)/g,'<img src="https://vrcp.ru/smiles/light/04.gif" alt="" title="" />');
tbt = tbt.replace(/o:\)/g,'<img src="https://vrcp.ru/smiles/light/04.gif" alt="" title="" />');
tbt = tbt.replace(/8-\)/g,'<img src="https://vrcp.ru/smiles/light/05.gif" alt="" title="" />');
tbt = tbt.replace(/:-p/g,'<img src="https://vrcp.ru/smiles/light/06.gif" alt="" title="" />');
tbt = tbt.replace(/:-P/g,'<img src="https://vrcp.ru/smiles/light/06.gif" alt="" title="" />');
tbt = tbt.replace(/:-\[/g,'<img src="https://vrcp.ru/smiles/light/07.gif" alt="" title="" />');
tbt = tbt.replace(/=-O/g,'<img src="https://vrcp.ru/smiles/light/08.gif" alt="" title="" />');
tbt = tbt.replace(/=-o/g,'<img src="https://vrcp.ru/smiles/light/08.gif" alt="" title="" />');
tbt = tbt.replace(/:-\*/g,'<img src="https://vrcp.ru/smiles/light/09.gif" alt="" title="" />');
tbt = tbt.replace(/:-{}/g,'<img src="https://vrcp.ru/smiles/light/09.gif" alt="" title="" />');
tbt = tbt.replace(/:'-\(/g,'<img src="https://vrcp.ru/smiles/light/10.gif" alt="" title="" />');
tbt = tbt.replace(/:'\(/g,'<img src="https://vrcp.ru/smiles/light/10.gif" alt="" title="" />');
tbt = tbt.replace(/%-\)/g,'<img src="https://vrcp.ru/smiles/light/11.gif" alt="" title="" />');
tbt = tbt.replace(/:\)\)\)/g,'<img src="https://vrcp.ru/smiles/light/12.gif" alt="" title="" />');
tbt = tbt.replace(/;-D/g,'<img src="https://vrcp.ru/smiles/light/13.gif" alt="" title="" />');
tbt = tbt.replace(/\[:-}/g,'<img src="https://vrcp.ru/smiles/light/14.gif" alt="" title="" />');
tbt = tbt.replace(/\[:}/g,'<img src="https://vrcp.ru/smiles/light/14.gif" alt="" title="" />');
tbt = tbt.replace(/]:-}/g,'<img src="https://vrcp.ru/smiles/light/15.gif" alt="" title="" />');
tbt = tbt.replace(/}:-}/g,'<img src="https://vrcp.ru/smiles/light/15.gif" alt="" title="" />');
tbt = tbt.replace(/]:}/g,'<img src="https://vrcp.ru/smiles/light/15.gif" alt="" title="" />');
tbt = tbt.replace(/}:}/g,'<img src="https://vrcp.ru/smiles/light/15.gif" alt="" title="" />');
tbt = tbt.replace(/:-!/g,'<img src="https://vrcp.ru/smiles/light/16.gif" alt="" title="" />');
tbt = tbt.replace(/:-\\/g,'<img src="https://vrcp.ru/smiles/light/17.gif" alt="" title="" />');

document.getElementById(idbt).innerHTML = tbt;
};
};
};
};
};
};
};
};
};
};
};
//-->
</script>

6. Меняем в вышеприведённом коде скрипта все ссылки https://vrcp.ru/smiles/ на путь к папке (на своём сайте), содержащую собственные графические изображениями смайликов (формат .GIF, .PNG, .JPG или другой, поддерживаемый браузерами формат).
7. В папку, которую указали в п.6, копируем все файлы смайликов, которые планируем использовать в комментариях и которые прописаны в вышеуказанном коде скрипта (отмечено зелёным цветом).

Если необходимо добавить ещё несколько смайликов, то выполняем следующие действия:
а) В код скрипта, помеченного синим цветом, добавляем || (tbt.indexOf(":-)", 0) != -1), где вместо :-) прописываем новый текстовый код смайлика, который планируется заменять в комментарии на графическое изображение.
б) В код скрипта, помеченного зелёным цветом, добавляем новую строчку:
tbt = tbt.replace(/:-\)/g,'<img src="https://vrcp.ru/smiles/light/00.gif" alt="" title="" />');
где, также как и в предыдущем пункте, заменяем :-\) на новый текстовый код смайлика (учитывая изолирующие символы), который будет заменяться в комментарии на графическое изображение, а 00.gif заменяем на имя файла, содержащего то самое графическое изображение нужного смайлика.



КАК ИЗМЕНИТЬ СТИЛЬ ТЕКСТА В DISQUS ?

Изображение

1. Регистрируемся (если ещё не зарегистрированы) на сайте https://disqus.com/
2. Создаём там систему комментирования и копируем предложенный код на свою страницу.
3. Добавляем картинку и всплывающее окно с подсказкой, как показано выше на скриншоте.
(можно выполнить в виде 2-х блоков <div>...</div> со значениями style="position: absolute;")
4. В поле ввода сообщения текст можно заключать в HTML-теги (которые поддерживает Disqus), например в те, которые указаны в подсказке на скриншоте выше, но для того чтобы текст выглядел по разному, в частности различался цвет текста для каждого HTML-тега, необходимо каждому тегу прописать свой стиль. Для переопределения стилей, назначенных самой системой Disqus, необходимо после её кода вставить дополнительный код <style type="text/css">...</style>, например такой:

<style type="text/css">
<!--
.dsq-comment-text p { // обычный текст
font-weight: bold;
color: #663300;
}
.dsq-comment-text a { // ссылка
font-weight: bold;
color: #000099;
}
code { // код программы
font-weight: normal;
color: #006600;
}
cite { // сноска
font-weight: normal;
color: #990000;
}
q { // цитата
font-weight: normal;
color: #333333;
}
i { // наклонный текст
font-weight: normal;
color: #000000;
}
u { // подчёркнутый текст
font-weight: normal;
color: #000000;
}
s { // зачёркнутый текст
font-weight: normal;
color: #000000;
}
b { // жирный текст
font-weight: bold;
color: #000000;
}
-->
</style>



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


Аватара пользователя
DmitryS
 
Основатель
Основатель
 
Сообщения: 285
Зарегистрирован: 10 октября 2011, 14:53
Откуда: Russia, Moscow
Возраст: 43
Пол: муж.
 
Контакты:

Вернуться в Dizzy/Диззи смайлы, эмотиконы

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 5

cron