Облако тегов для uCoz

Одна из самых популярных статей, которые я писал ранее, восстановлена, но просто так скопипастить (пусть даже свой текст) я не мог, а поэтому статья обновлена и дополнена.

Многие видели наверняка сайты, на которых есть «чудо» облако, которое представляет из себя некую сферу, состоящую из тегов (реже картинок), причём данная сфера активировалась при наведении и начинала крутиться. Это модная вещь называется WP Cumulus и создавалась она как плагин для Wordpress. (автор плагина Roy Tanck)

В этом посте, я опишу процедуру установки удобного flash облака тегов Cumulus, уже адаптированного под систему uCoz.  Для того чтобы было понятно всем, расписано по шагам с примерами.

Приступим к установке.

1. Активируем раздел «Поиск по сайту». Он будет играть ключевую роль в работе тегов, поэтому делаем это обязательно.

2. Добавляем теги.

2.1 Для того чтобы добавить теги, нужно открыть страницу с материалом (новостью, файлом, статьёй и т.д.), открыть панель модератора и нажать на первую кнопку в панели. (смотрите скриншот)

2.2 Заполняем окно, которое открылось и сохраняем.

2.3 Проделываем операции 2.1, 2.2, со всеми материалами, которые вам потребуются.

3. Создаём информер. Заходим в панель управления и выбираем пункт «Информеры». Вы информерах нажимаем «Создать инфомер» и заполняем. Рекомендуемые настройки:

Название: Теги (вообще без разницы, но так удобней)
Раздел: Теги
Способ вывода: Облако тегов
Модули: Все модули на которых собираетесь поставить облако тегов.
Количество тегов: 50

Готово, с информером всё. теперь мы можем использовать теги на сайте используя код вида $MYINF_1$ (зависит от конкретного случая). Но, мы не остановимся на этом, как и планировалось, сделаем это облако «настоящим облаком», «обернём», так сказать, простые ссылки во флэш обёртку.

4. Для этого создаём на сайте папку «tags» и заливаем в неё 2 файла:

http://demo.gblog.pp.ru/ucoz-tags/swfobject.js
http://demo.gblog.pp.ru/ucoz-tags/tagcloud.swf

Далее в место, где хотим видеть облако, ставим скрипт:

<div id="tag">$MYINF_1$</div>
<script  type="text/javascript"  src="http://yoursite/tags/swfobject.js"></script>
 <script  type="text/javascript">
 var flashvars = {};
 flashvars.mode  = 'tags';
 flashvars.minFontSize = '8';
 flashvars.maxFontSize  = '22';
 flashvars.tcolor = '0xffffff';
 flashvars.tcolor2 =  '0×0be4f8';
 flashvars.hicolor = '0xd95800';
 flashvars.distr =  'true';
 flashvars.tspeed = '100'; 

 eTagz =  document.getElementById('tag').getElementsByTagName('A');
 flashvars.tagcloud  = '<tags>';
 for (var i=0; eTagz[i]; ++i) flashvars.tagcloud  += '<a href=\'' + eTagz[i].getAttribute('href')
 + '\'  style=\'' + parseInt(eTagz[i].style.fontSize)
 + '\'>' +  eTagz[i].text + '</a>';
 delete eTagz;
 flashvars.tagcloud  += '</tags>';
 var params = {};
 params.wmode =  'transparent';
 params.bgcolor = '#333333';
 params.allowscriptaccess  = 'always';
 var attributes = {};
 attributes.id = 'tag';
 attributes.name  = 'tagcloud';
 swfobject.embedSWF('http://yoursite/tags/tagcloud.swf',  'tag', '300', '250', '9.0.0', false, flashvars, params, attributes);
 </script>

Естественно меняем «yoursite» на адрес вашего сайта.

Небольшие пояcнения к скрипту в строке

“swfobject.embedSWF(”http://yoursite/tags/tagcloud.swf”, “b-cumulus”,  “300″, “250″, “9.0.0″, false, flashvars, params, attributes); ”

300 – это ширина виджета в пикселях.

250 – это высота виджета в пикселях.

# flashvars.minFontSize = “8“; – минимальный размер шрифта.
# flashvars.maxFontSize = “22“; – максимальный размер шрифта.
# flashvars.tcolor = “0xffffff“; – цвет самого редкого ярлыка.
# flashvars.tcolor2 = “0×0be4f8“; – цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
# flashvars.hicolor = “0xd95800“; – цвет текста при наведении курсора на ярлык.
# flashvars.tspeed = “100“; – скорость вращения Flash Облака тегов
# params.wmode = “transparent“; – этот параметр обозначает прозрачный фон.
# params.bgcolor = “#333333“; – цвет фона Flash Облака тегов.

Кому-то, эта статья покажется слишком «умной», но интересной, учебники html, css, flash вам в руки и удачи в начинаниях

Кому-то эта статья покажется глупой, Мои советы-блог для умных, а эта статья явно не для вас.

А всем остальным, удачи и успехов в использовании облака. Пользуйтесь на здоровье.

P.s. Скрипт поддерживает кириллицу.