ПОДРАЗДЕЛЫ


   Список статей
   АРМ с ПК PCAA
   IPAMon + HTTP
   IPAMon + SMTP
   IPAMon + EMail
   Multiple IPAMon
   Файлы из сети
   Перенос файлов
   Многопоточность
   Эмуляция флешек
   Контроль флешек
   Скорость кадров
   Скины SPRuler
   Смайлы ICQ 6/7
   Смайлы QIP
   Смайлы Disqus
   Смайлы Narod.Ru
   Смайлы на сайте

   

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

( отображение смайликов и использование HTML-кодов в веб-сервисе Disqus )



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



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


SmileDisqus


1.  Регистрируемся (если ещё не зарегистрированы) на сайте 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/light/ на путь к папке (на своём сайте), содержащую собственные графические изображениями смайликов (формат .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 ?


TextDisqus


1.  Регистрируемся (если ещё не зарегистрированы) на сайте 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>



     
  CC  BY-NC-SA   © Dmitry Saltykov (ZXDemon)  [ «Creative Commons License» ]