Делаем flash-облако тегов.
Установка:
1. Создайте информер по образцу, написанному выше, и способ вывода выберите "Облако тегов"
2. Скачайте архив:
3. Распакуйте архив и закачайте его содержимое (swfobject.js и tagcloud.swf) на свой сайт (можно в любую папку).
4. Затем, в том месте, где будет flash-облако тегов, вставьте код:
$MYINF_4$
<div id="yoblako" align="center">$MYINF_4$</div>
<script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.mode = 'tags';
flashvars.minFontSize = '8';
flashvars.maxFontSize = '14';
flashvars.tcolor = '0x1D3D61';
flashvars.tcolor2 = '0x4D6D91';
flashvars.hicolor = '0xd193978';
flashvars.distr = 'true';
flashvars.tspeed = '100';
eTagz = document.getElementById('yoblako').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].innerHTML.replace(/&/i, '%26') + '</a>';
delete eTagz;
flashvars.tagcloud += '</tags>';
var params = {};
params.wmode = 'transparent';
params.bgcolor = '#FFFFFF';
params.allowscriptaccess = 'always';
var attributes = {};
attributes.id = 'yoblako';
attributes.name = 'tagcloud';
swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Этот
код нельзя вставлять в другие информеры (информеры нельзя вкладывать
друг в друга, то есть нельзя вставлять содержимое информера $MYINF_4$
внутрь содержимого $MYINF_5$ и т.п.)
Пояснения:
Применяя условный оператор для
$USER_AGENT$='ie' && $USER_AGENT_VER$<7 - запрещаем выводить flash-облако для версии IE ниже 7 (для этих пользователей будет отображаться обычное текстовое облако)
id="yoblako"
- это идентификатор контейнера с облаком, в который будет помещён
флеш-объект. Для идентификатора можно задать стили в CSS В таблицу
стилей (CSS) добавьте параметр:
#yoblako{outline:0;}Параметр запрещает отображение пунктирной рамки вокруг всего
flash-объекта при нажатии на него. Можно выровнять контейнер по центру,
добавляя align="center" внутрь тега div.
$MYINF_4$ -
это код Вашего информера, соответствующего облаку тегов юКоза, измените
цифру, если необходимо. (В настройках информера "Теги" укажите число
выводимых тегов: 50. Проверьте, что способ вывода установлен на "
Облако тегов" )
В строках
Quote
<script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script> ... swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
Вместо "
ссылка_на_файл_swfobject.js" и "
ссылка_на_файл_tagcloud.swf" вставьте соответствующие ссылки.
Настройка:
В строке:
Quote
swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
- ширина облака в пикселях;
200 - высота облака в пикселях.
*
flashvars.minFontSize = "8"; - минимальный размер шрифта.
*
flashvars.maxFontSize = "14"; - максимальный размер шрифта.
*
flashvars.tcolor = "0xffffff"; - цвет самого редкого ярлыка.
*
flashvars.tcolor2 = "0x0be4f8"; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
*
flashvars.hicolor = "0xd95800"; - цвет текста при наведении курсора на ярлык.
*
flashvars.tspeed = "100"; - скорость вращения Flash-Облака тегов
*
params.wmode = "transparent"; - этот параметр обозначает прозрачный фон.
*
params.bgcolor = "#333333"; - цвет фона Flash-Облака тегов.
Дополнения:
Если требуется поддержка символов расширенной латиницы (например,
символов ĀāČčĒēĢģĪīĶķĻļŅņŠšŪūŽž), то скачивать и устанавливать
этот архив
Была решена проблема с символов & при помощи замены его используя аналог обозначения & в 16-ричной системе %26.
eTagz[i].innerHTML.replace(/&/i, '%26')Чтобы удалить битые теги (которые остались в облаке, но материалы с ними удалены):
1.
Заходим на страницу любого пользователя, кроме тех, которые имеют
материалы. (можно создать локального пользователя для этого дела,
например, с именем MrProper)
2. Находим модер-панель и кнопку "Удаление записей пользователя" (вот такой значок -
)
3. Выбираем любой модуль, который может содержать теги (например, модуль Новости сайта). Ставим галочку.
4.
Включаем мозг. Думаем. Есть ли материалы у этого пользователя в этом
модуле. Если пользователь создан Вами, как "мистер Пропер", то он не
добавлял материалы, значит и ничего не удалится. Можно смело удалять
несуществующие материалы.
5. Вводим код проверки и жмём "удалить".
- Это ещё более изящный метод тыка, придуманный разработчиками для очистки битых тегов, но он работает.
- Будьте осторожны с этими манипуляциями: не удалите случайно материалы пользователей.
- Перед чисткой убедитесь, что у пользователя нет материалов.
- Время самостоятельного обновления информеров - 15 минут.
Чтобы не ждать 15 минут, а обновить сразу же информер с тегами, делаем по методу webanet:
1. Надо пройти в Панель Управления сайтом >> Информеры - найти Ваш информер с тегами - нажать на значок гаечного ключа (
) - всплывет окно для редактирования.
2. Вы
ничего не меняете, а просто жмёте сохранить.
3. Идете на страницу с облаком, перезагружаете её и не находите битых тегов.
Как добавить логотип внутрь облака (это оптическая иллюзия, на самом деле, логотип сзади):
Если поступить просто, то нужно всего лишь присвоить контейнеру стиль с фоновым изображением. Например для ячейки таблицы:
Quote
<td style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </td>
Или контейнера
Quote
<div style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </div>
Если поступить сложнее, то:
В Таблице стилей (CSS) создать отдельный класс для контейнера облака. В случае с ячейкой таблицы:
Quote
td.backoblako { background-image: url('images/logobgoblako.png'); /* Путь к фоновому рисунку */
background-position: center center; /* Положение фона Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom] */
background-repeat: no-repeat; /* Отменяем повторение фона */ }
- ссылка на логотип. На страницах сайта, там где вставляется код облака, для ячейки присваиваем класс backoblako
Quote
<td class="backoblako"> Код для вставки облака </td>
Если требуется сделать объект на всю ширину (или высоту) ячейки таблицы.
Поможет вот что:
<table
border="0" width="100%" cellpadding="0" cellspacing="0" topmargin="0"
leftmargin="0" rightmargin="0" bottommargin="0">
1
2
А в теле ячейки (td) нужно удалить все style="padding-left:15px;" и прочее, тогда отступов от границ таблицы не будет.
Вопрос-ответ:
В: Почему, когда я смотрю сайт в Internet Explorer 6, то мне вместо флеш-облака тегов показывается обычное?
О: Так и должно быть. С помощью строки:
Мы
для пользователей ИЕ версии меньше 7 показываем обычное облако, иначе
при нажатии на тег во флеш-облаке, будет выводиться страница с символами
типа едактор.
В: Когда я щелкаю на один из тегов, в большинстве случаев страница
отображается коряво, а именно: смещается куда-нибудь второй контейнер,
как правило вниз. Место на котором раньше находился контейнер становится
занято найденными краткими описаниями статей и т.д.
О: Это
связано с ограничением количества выводимых символов в результатах
поиска. Например, иногда материал обрывается на полуслове или происходит
прерывание таблицы (если материал добавлялся в виде таблицы), в
результате вышестоящая (относящаяся к дизайну) таблица, преждевременно
закрывается. Старайтесь вставлять материалы используя контейнеры
<div>. Это у всех так,и это нельзя исправить.
В: Все сделал, но флеш-облако не отображается.
О:
Посмотрите, прописаны ли теги к материалу, проверьте, чтобы теги
материалов не содержали спецсимволы типа ', &, " . Также,
посмотрите, не заблокировал ли Ваш фаерволл все флеш-объекты с сайта.
О: Если облако сделано с помощью
виджета 3D облака тегов
, то между его вставкой и появлением на странице может пройти некоторое
время. Пока облако не появится будет просто пустой блок.
О:
Если скриптовое облако вставлено на сайте, где используется
конструктор, то есть не через дизайн, то облако может не отображаться
из-за того, что могло произойти вложение блоков друг в друга.
O:
Возможно не отображение облака на сайтах, работающих через дизайн.
Когда код скрипта вставлялся в глобальный блок средствами бб кодов.
Javascript нужно вставлять исключительно в html! Панель бб кодов делает
скрипт нерабочим.
В: Я создал флеш-облако тегов, но там всего отображается 35 тегов, хотя прописано больше.
О: Возможно, Вы использовали
виджет 3D облако тегов, а там 35 - максимальное количество тегов. Для того, чтобы сделать больше, поставьте флеш-облако тегов согласно инструкции.
В:
Теги выводятся по умолчанию через /search/tag1... но дело в том, что
директория /search сначала была запрещена в robots.txt, потом в файле я
снял это ограничение. Но при выводе самого информера облака тегов все
теги выводятся в noindex, что собственно мне и нужно убрать, чтобы
ссылки на теги были открыты для Яндекса.
О: Это сделано
специально, т.к. открытие для поисковиков страниц с результатами поиска
может привести к частичному выкидыванию сайта из индекса поисковиков.
Подробнее в письме от Платона Щукина
В: Где можно посмотреть обозначения цветов в 16-ричной системе?
О:http://www.artlebedev.ru/tools/colors/ Цвет тегов нужно прописывать так: '0xцвет' , т. е. с одинарными верхними кавычками и через 0х , где 0 - цифра.
В: Создал облако тегов. При добавлении новых тегов, они не появляются в облаке.
О: Подождите. Время обновления информеров = 15 минут.
Благодарности:
- Спасибо -RomB-, за хирургическое извлечение ссылок облака и его html-код для вставки облака на страницу
- Отдельная благодарность minimus'у за решение проблемы кодировки URL
- Ну и конечно же мега-респект Рою Танку, за его плагин для Вордпресс - флеш облако тегов
- Большая благодарность webanet, за помощь в настройке и интеграции с системой юКоз
- Огромное спасибо -F13- за сбор всей этой информации.
щелкните на значке "Теги материала", в появившемся AJAX-окне через запятую введите ключевые слова, относящиеся к данному материалу 
