Как проще всего создать облако тегов?

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

Облако тегов, Облако меток, или Облако ключевых слов (англ. tag cloud, wordle) — визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определённого сайта неких слов, терминов, имён отображается в специальной области в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем чаще использовался данный тег (слово, термин или имя).
Материал из Википедии — свободной энциклопедии.

Путешествуя в Интернете по различным сайтам, Вы, наверняка, видели что-либо подобное. Кстати, этот пример один из многих существующих. Помимо красивого дизайна облако тегов имеет ряд преимуществ и полезных применений. Это своего рода довольно нестандартный элемент навигации, набор ссылок, по которым можно легко найти соответствующие темы и ориентироваться в содержимом сайта. «Облако» в удобной и приятной глазу форме динамически определяет и визуально выделяет наиболее важные и популярные темы. Очень спорно его использование в качестве навигации по сайту, но как дополнительное средство ориентировки в наиболее интересных разделах сайта, оно может играть не последнюю роль. Так же с его помощью можно привлечь целевых пользователей, т.е. увеличить целевой трафик с поисковых систем. Да и использовать его можно где угодно, в зависимости от широты вашей фантазии.

Подходя к вопросу установки данного эффекта на свой блог, хочу сказать, что в связи с нововведением защищенного протокола HTTPS и перехода многих сайтов на работу на этом протоколе иногда случаются нестыковки. И происходит это именно в нашем случае. Например, если вспомогательные файлы для работы облака (swfobject.js и tagcloud.swf), будут загружаться удаленно с сайта //freeviral.ru, который на сегодняшний день (14.05.2017) работает по протоколу HTTP, то на сайте с протоколом HTTPS, облако работать не будет. Но, выход есть - нужно, чтобы вспомогательные файлы подгружались локально. Поэтому, давайте рассмотрим оба варианта, а Вы сможете выбрать, который Вам подойдет.

Вариант №1. С удаленной загрузкой вспомогательных файлов.

Для размещения этого варианта облака тегов на странице вашего сайта необходимо выполнить всего один шаг.

Код, который Вы видите внизу, нужно вставить в раздел body страницы вашего сайта, в то место, где планируется расположение облака:

<div align="center">

<script type="text/javascript" src="//freeviral.ru/swfobject.js"></script>

<div id="con"><p align="center">Для отображения Облака ссылок
<br>необходим<br><b>Adobe Flash Player 9</b><br>или выше.</div>

<script type="text/javascript">
var rnumber = Math.floor(Math.random()*99);
var widget_so = new SWFObject("//freeviral.ru/tagcloud.swf?r="+rnumber, "tagcloudflash", "700", "450", "9");
widget_so.addParam("wmode", "transparent");
widget_so.addParam("allowScriptAccess", "always");
widget_so.addVariable("tcolor", "0x006633");
widget_so.addVariable("tspeed", "100");
widget_so.addVariable("distr", "true");
widget_so.addVariable("mode", "tags");
widget_so.addVariable("tagcloud", "<tags><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a><a href='//leonidmuzyka.ru/' style='font-size:2pt;'>Название ссылки</a></tags>");
widget_so.write("con");
</script>

</div>

Вариант №2. С локальной загрузкой вспомогательных файлов.

Если первый вариант не работает по причине, которую я описал, попробуйте использовать этот вариант. Здесь вспомогательные файлы будут размещены на вашем сервере и эффект будет работать корректно, независимо от установленных протоколов.

Скачайте и распакуйте архив с исходным материалом в отдельную папку на компьютере. Откройте файл demo.html в браузере и проверьте работу облака. HTML-код установки облака отличается лишь способом подгрузки файлов swfobject.js и tagcloud.swf.

В данном конкретном случае демонстрационный файл demo.html должен находиться в одной директории с папкой со вспомогательными файлами.

Возможные настройки

1. Скопированный и вставленный код должен оставаться в таком виде, как он представлен в таблице вверху или в демо-материале. Особенно, это касается ссылок - они должны идти одна за другой (цугом или паровозом с вагонами), иначе удачи не видать;
2. Проставьте свои названия и адреса ссылок - в противном случае они будут некликабельны. Если облако будет отображаться некорректно, а именно, в каракулях, смените кодировку на соответствующую кодировке вашего сайта;
3. При удаленном подключении:
   //freeviral.ru/swfobject.js - путь к файлу swfobject.js (с сайта //freeviral.ru);
   //freeviral.ru/tagcloud.swf - путь к файлу tagcloud.swf (с сайта //freeviral.ru);
4. 700x450 - это размеры облака (величина поля),    9   - минимально допустимая версия Adobe Flash Player;
5. "wmode", "transparent" - фон облака прозрачный;
6. "tcolor", "0x006633" - цвет самого частого текста в облаке тегов в RGB формате. 0x не трогать;
7. "tspeed", "100" - скорость вращения (большую скорость выставлять не рекомендуется, иначе посетители сайта не «поймают» ваши ссылки);
8. "distr", "true" - тип вращения облака, может принимать значение "true" или "false";
9. <a href='Ссылка' style='font-size:2pt;'>Название ссылки</a> - код ссылки, где нужно проставить название и адрес. Ссылок может быть столько, сколько Вам необходимо.

Это всё о создании простого варианта облака тегов. До свидания. Ваш Л.М.