| ||||||
|
Как проще всего создать облако тегов?Информация, представленная в этой статье ориентирована в первую очередь для начинающих 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. С локальной загрузкой вспомогательных файлов.Если первый вариант не работает по причине, которую я описал, попробуйте использовать этот вариант. Здесь вспомогательные файлы будут размещены на вашем сервере и эффект будет работать корректно, независимо от установленных протоколов.
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master. Скачайте и распакуйте архив с исходным материалом в отдельную папку на компьютере. Откройте файл demo.html в браузере и проверьте работу облака. HTML-код установки облака отличается лишь способом подгрузки файлов swfobject.js и tagcloud.swf. В данном конкретном случае демонстрационный файл demo.html должен находиться в одной директории с папкой со вспомогательными файлами. Возможные настройки
Еще раз хочу заострить внимание - копируйте и вставляйте код так, как он представлен, не вносите никаких изменений, кроме возможных регулировок, адресов и названий ссылок. Особенно, это касается нижней части кода - там, где ссылки. И всё будет отлично работать.
Это всё о создании простого варианта облака тегов. До свидания. Ваш Л.М. |
|||||
|