Ковыряясь в исходниках tagcloud.swf я пришёл к выводу, что Аманда Фазани () подошла к вопросу создания виджета на базе этого творения Роя Танка () “спустя рукава”. Все возможности заложенные в эту флешку не были использованы, хотя я и не берусь оспаривать её изобретательность. И вот, мой дотошный читатель, я представляю на твой скорый, но, надеюсь, справедливый суд виджет b-cumulus, виджет созданный своими руками.
Почему другое название? Поясняю. Flash-приложение tagcloud – это приложение выводящее облако тегов в любое место любого HTML файла, требующее определённого обрамления. Это ядро виджета. А сам виджет – это код подготавливающий вывод данных с помощью этого “ядра” в нужном месте и в нужное время. Собственно говоря, Рой Танк на базе этого флеш-файла создал виджет wp-cumulus для WordPress, Аманда Фазани создала свой Blogumus для Blogger, Пратул Калия () и Бьёрн Якоб () создали cumulus для Drupal, я создал b-cumulus для Blogger.
b-cumulus vs Blogumus
Чем отличается b-cumulus от Blogumus? По большому счёту, только тем, что выводит метки в облако тегов используя разный размер и цвет шрифта, в зависимости от “веса” метки. Именно так и задумывалось Роем Танком. Именно из-за этого я затеял свой b-cumulus.
Код:
|
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 33 34 35 36 37 38 39 40 |
<b:widget id='Label99' locked='false' title='Облако меток' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js' type='text/javascript'/>
<script type='text/javascript'>
var flashvars = {
mode: "tags",
minFontSize: "6",
maxFontSize: "22",
showTagWeight: "true",
tcolor: "0x0be4f8",
tcolor2: "0x0be4f8",
hicolor: "0xffffff",
distr: "distr",
tspeed: "100",
tagcloud: "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>"
};
var params = {
//wmode: "transparent",
bgcolor: "#333333",
allowscriptaccess: "always"
};
var attributes = {
id: "b-cumulus",
name: "tagcloud"
};
swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
<div id='b-cumulus'>
<a href='http://www.adobe.com/go/getflashplayer'>
<img alt='Get Adobe Flash player' src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif'/>
</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> |
Установка
Скопируйте код и вставьте его в шаблон виджета, там где считаете нужным. Или добавьте гаджет “Labels”, а затем найдите его в шаблоне и замените на вышеприведённый код.
b-cumulus (55,0 Кб, 1 205 скачиваний)
Flash облако меток для Blogger-блога. Локализовано. Дополнительная функциональность.
- tagcloud.swf изменён специально для работы b-cumulus с Blogger
- wp-cumulus работает в WordPress c swfobject.js версии 1.5
b-cumulus-old (53,0 Кб, 513 скачиваний)
Старая версия b-cumulus
Параметры
Найдите следующий код:
|
1 |
swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); |
FILE_HOST_NAME – Замените на хост вашей копии tagcloud.swf
“300″ – ширина виджета в пикселах. Замените на нужную.
“250″ – высота виджета в пикселах. Замените на нужную.
Найдите следующие параметры и измените по вкусу 
flashvars.minFontSize = “8“; – минимальный размер шрифта метки
flashvars.maxFontSize = “22“; – максимальный размер шрифта метки
flashvars.showTagWeight = “true”; – показывать “вес” метки, при наведении на неё курсора мыши.
flashvars.tcolor = “0xffffff“; – цвет метки с самым малым “весом”
flashvars.tcolor2 = “0x0be4f8“; – цвет метки с самым высоким “весом”. Для остальных меток будет выбран цвет на линейке между этими двумя цветами.
flashvars.hicolor = “0xffffff“; – цвет метки под курсором мыши, при наведении курсора на метку
flashvars.tspeed = “100“; – скорость вращения облака
//params.wmode = “transparent“; – прозрачный фон. Раскомментируйте, если хотите иметь прозрачный фон.
params.bgcolor = “#333333“; – цвет фона. Обратите внимание, что он задаётся через #, а не через 0x.
Обновления
02.02.2009
- добавлена возможность показывать “вес” метки, при наведении на неё курсора мыши
- исправлены баги
© 2009 – 2012, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Популярность: 100%
Похожие статьи:
Спасибо! Я очень признателен за Ваш ответ. Теперь я разобрался, всё работает отлично. Заново собрал swf файл на основе ихсодников Роя с добавлением Ваших замечаний. Обязательно укажу Вас в качестве разработчиков с ссылкой на ваш ресурс. Результат моих наработок на моём сайте
Ещё раз спасибо!
Здравствуйте,обьясните пожалуйста что значит – FILE_HOST_NAME – Замените на хост вашей копии swfobject.js, FILE_HOST_NAME – Замените на хост вашей
копии tagcloud.swf ?
И еще,скачал пакет поддержки,а что с ним дальше делать -не знаю
(кроме логотипа плеера больше ничего не добился)
Для начала почитайте эту статью. Если возникнут вопросы – задавайте, отвечу …
Премного благодарен, немного украсил свой блог.
Спасибо за инфу. А вот у меня такой вопрос – можно ли организовать своеобразное анимированное облако тэгов для блока ссылок Adsense? было бы прикольно
Боюсь, что нет. Выдернуть ссылки из скрипта AdSense будет трудновато … Да и пункт о неправомочном использовании (изменение внешнего вида рекламы) …
мдя, а было бы интересненько ))
Уважаемый Админ! НЕ могли бы вы подробно описать – как самому добавить flash облако тегов к обычному сайту ( не wordpress и т.п.) , принцип работы или материал где можно научиться. Пол нета облазил – один wordpress да плагины.
Заранее благодарен!!!
Это вопрос уже поднимался и я на него отвечал. Или непонятно ответил, или Вы не читали комментарии. Допустим, что первое
Вот код пригодный для любого HTML:
обратите внимание на эту строку:
именно эта строка отвечает за ввод меток. Метки могут быть заданы в ручную, кодом javascript, PHP препроцессором … Главное, что бы это была следующая структура:
Прибольшое СПАСИБО за ответ!!!
Но что – то не получается! Подскажите что не так???
Делаю так :
Скачал swfobject и tagcloud.(пробовал b-cumulus и b-cumulus-old).
HTML:
Облкао тегов
var flashvars = {};
flashvars.mode = “tags”;
flashvars.minFontSize = “8″; //минимальный размер шрифта метки
flashvars.maxFontSize = “22″ ;//максимальный размер шрифта метки
flashvars.showTagWeight = “true”; // показывать “вес” метки, при наведении на неё курсора мыши.
flashvars.tcolor = “0xffffff”; //цвет метки с самым малым “весом”
flashvars.tcolor2 = “0x0be4f8″; //цвет метки с самым высоким “весом”.
flashvars.hicolor = “0xffffff”; //цвет метки при наведении курсора на метку
flashvars.distr = “true”;
flashvars.tspeed = “100″; //скорость вращения облака
flashvars.tagcloud = tags.xml;
var params = {};
//params.wmode = “transparent”; //прозрачный фон.
params.bgcolor = “#333333″; //цвет фона.
params.allowscriptaccess = “always”;
var attributes = {};
attributes.id = “b-cumulus”;
attributes.name = “tagcloud”;
swfobject.embedSWF(“tagcloud.swf”, “b-cumulus”, “300″, “250″, “9.0.0″, false, flashvars, params, attributes);
flashvars.tagcloud = пробовал сюда вставлять :
Метка 1
Метка 2
…
Метка N
и в отдельный файл выносил “tags.xml”, думал в кавычках дело – нет. Пути к swfobject.js и tagcloud.swf проверил.
На вас одна надежда!!!
На первый взгляд у вас всё Ok. Единственное, что приходит в голову: Если Вы пытаетесь это дело опробовать на локальном компьютере, то у Вас может блокироваться выполнение javascript. Попробуйте создать структуру в виде строки и воткнуть её в кавычках прямо в код (как в Blogger):
flashvars.tagcloud = ‘<tags>’;
Я бы уточнил, что для Интернет Эксплорера нужно все-таки использовать
другие кавычки. И, значит, также нужны escape-последовательности.
То есть, значение должно быть типа таким
flashvars.tagcloud = “%3Ctags%3E%3Ca%20href%3D%22%23%22%20style%3D%2210%22%20rel%3D%22nofollow%22%3EМетка1%3C/a%3E%3C/tags%3E”;
Cпасибо за статью! Очень понятно и приятно.
Здравствуйте, уважаемый Админ!
Сразу предупреждаю, что я новичок и образование у меня не техническое.
Очень хочется вставить облако тегов на свой блог. Внимательно прочитала Ваши статьи, но не все поняла…
Была бы очень признательна, если бы Вы глянули на мой блог и сказали конкретно и понятно для меня (гуманитарного юзера), что мне необходимо сделать, чтобы облако тегов появилось на моей страничке.
Заранее благодарна!
1. Зайдите в Панель управления-Макет-Изменить HTML.
2. Нажмите на галочку “Расширить шаблоны виджета”.
3. Найдите строку
это начало гаджета, выделите до первого следующего появления строки
4. Вместо выделенного текста вставьте текст приведённый в статье.
5. Сохраните шаблон, расслабьтесь и наслаждайтесь
Можно ли становить на сайт?
Если да, то подскажите как.
Внимательно прочитайте комментарии – там есть ответы на все Ваши вопросы … И для ucoz кто-то это уже сделал
minimus, зделал все по мануалу, но не пойму в чем трабл – само тело swf отображается, а тегов не видно. Подскажите в чем причина?
Возможно у Вас стоит transparent=true, а цвет тегов совпадает с цветом фона, это обычное дело …
Огромное спасибо! Очень долго искал способ сделать такое облако на blogspot, уже разочаровался и думал, что это невозможно. Промучался пару часов, но в конце концов вышло очень даже неплохо! В благодарность админу ссылочка на “ВАС” в моем блоге!!!
P.S. Очень полезный блог, нашел очень много интересной информации!
Помогите пожалуйста! Все делал по инструкции. Вроде бы все оке (пересматривал 2 раза), но отображается только значок флеш плеера =( В чем может быть проблема?
блог:
заранее спасибо за ответ!
Это уже у кого-то было …
Ваш код:
Должно быть:
Спасибо за ответ! Но исправил и все равно не работает =(
Попробуй наоборот:
Здравствуйте! Никак не соображу,в чем дело – облако тегов есть, вроде все ок – крутится-вертится, но в нем не нажимаются сами теги – при нажатии на любой из них перехожу на ваш блог)). Можете что-то подсказать, чтоб при нажатии на теги выводило на сообщения, помеченные этими тегами?!
1. Вы используете специальную версию облака, модифицированную мной специально для . Эта версия облака НИКОГДА НЕ РАСПРОСТРАНЯЛАСЬ и ссылка на ресурс размещения спец-версии НИКОГДА НЕ АФИШИРОВАЛАСЬ. Очень интересно кто её Вам подсунул.
2. Ресурс на котором находится это спец-облако давно закрыт. Почему оно всё-таки работает? Сам удивлён
3. Вы конечно можете попытаться использовать облако с другого , некоторые так делают не смотря на то, что разрешения на использование облака с этого ресурса я НИКОМУ НЕ ДАВАЛ. К тому же ресурс уже очень перегружен (использование разрешённого объёма траффика – 97%) и Вы рискуете оказаться без облака в конце каждого месяца.
Кто виноват и что делать:
Кто виноват Вам лучше знать (я догадываюсь кто), а делать надо следующее:
1. Скачать у меня облако.
2. Разместить, предварительно заведя аккаунт, на собственном ресурсе.
Здраствуйте! Вы бы не могли мне помочь.
У меня таже проблема с ссылкой на adobe flash player.Хотя я всё попробовал что было уже изложино .Вот мой блог
Подскажите в чем причина?
У Вас та же проблема, что и здесь … Попробуйте заменить на это:
Изменил . Но все по старому??? Почему…..
Попробуйте изменить кавычки:
и ещё, у Вас swfobject версии 1.4, а нужен 2.1 … Можно грузить отсюда:
Большое спасибо! Но у меня новая проблема “.Облако есть , даже не облако а чёрный квадрат ???
Для начала закомментируйте transparent (двумя слэшами) … А дальше посмотрим …
Я извиняюсь за тупость, но можна подробней.Как закоментируй? и что такое слэш?
превращаем в
это и есть “закомментировать”
А сейчас серый квадрат !?
Доброго времени суток!
У меня вот такая проблемка:
почему-то облако тегов совсем не отображается в блоге (не отображается даже название самого модуля), хотя на вкладке “Элементы страницы” гаджет присутствует и можно зайти в его настройки. В чём может быть проблема?
На каком блоге?
Не нашёл я на вашем блоге кода облака …
Очень странно! Вот скриншот панели инструментов моего блога (вкладка “Элементы страницы”):
А это код вставленный в xml-шаблон блога:
Нет его там
Честно говоря, не знаю почему так происходит. Всё сделал как вы описывали в начале данного поста. Создал произвольный гаджет во вкладке “Элементы страницы”, после чего зашёл в редактор xml-сайта, нашёл созданный гаджет и в расширенным режиме вставил приведённый вами код облака.
(на скрине не расширенный режим)
Во вкладке “Элементы страницы”, если нажать на настройки гаджета, то появляются его настройки (скриншот приводил выше), однако в блоге облако не отображается, даже название гаджета не отображается!
Пробовал вставить код произвольно созданный гаджет (без непосредственного вмешательства в XML-шаблона), появилась область облака, после чего, производя с кодом некоторые манипуляции, приведённые в комментариях к данной статье, начал отображаться сначала значок Adobe Flash, а после смены параметра прозрачности на вид приведённый ниже, гаджет начал отображаться в виде серого прямоугольника без каких-либо меток.
//params.wmode = “transparent”;
Уже лучше …
У Вас не парсится содержимое переменной flashvars.tagcloud, попробуйте поменять местами кавычки – снаружи поставьте двойные, внутри одиночные …
Удачи!
На данный момент переменная выглядит так :flashvars.tagcloud = ‘<tags><b:loop var=”label” values=”data:labels”><a expr:href=”data:label.url” expr:style=”data:label.count” rel=”nofollow”><data:label.name/></a></b:loop></tags>’;
По какой-то причине редактор не сохраняет изменения в содержимом переменной, возвращая на место поставленных одиночных кавычек двойные кавычки! В блоге вместо серого прямоугольника снова появляется значок Adobe Flash.
Я слегка изменил код – попробуйте, может, наконец, получится …
Всё получилось СПАСИБО!
А можно ли убрать рамку, которая выделяет тег при наведении курсора??
Заранее большое спасибо!
Увы, нет …
Очень жаль.
Спасибо за ответ!