Ковыряясь в исходниках tagcloud.swf я пришёл к выводу, что Аманда Фазани (Amanda Fazani) подошла к вопросу создания виджета на базе этого творения Роя Танка (Roy Tank) “спустя рукава”. Все возможности заложенные в эту флешку не были использованы, хотя я и не берусь оспаривать её изобретательность. И вот, мой дотошный читатель, я представляю на твой скорый, но, надеюсь, справедливый суд виджет b-cumulus, виджет созданный своими руками.
Почему другое название? Поясняю. Flash-приложение tagcloud – это приложение выводящее облако тегов в любое место любого HTML файла, требующее определённого обрамления. Это ядро виджета. А сам виджет – это код подготавливающий вывод данных с помощью этого “ядра” в нужном месте и в нужное время. Собственно говоря, Рой Танк на базе этого флеш-файла создал виджет wp-cumulus для WordPress, Аманда Фазани создала свой Blogumus для Blogger, Пратул Калия (Pratul Kalia) и Бьёрн Якоб (Björn Jacob) создали 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='//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("//FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); </script> <div id='b-cumulus'> <a href='//www.adobe.com/go/getflashplayer'> <img alt='Get Adobe Flash player' src='//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 КиБ, 2 795 скачиваний)
Flash облако меток для Blogger-блога. Локализовано. Дополнительная функциональность.
- tagcloud.swf изменён специально для работы b-cumulus с Blogger
- wp-cumulus работает в WordPress c swfobject.js версии 1.5
Взять исправленную русскую версию пакета, которая будет работать и в wp-cumulus и в Blogumus, можно здесь:
b-cumulus-old (53,0 КиБ, 1 621 скачиваний)
Старая версия b-cumulus
Параметры
Найдите следующий код:
|
1 |
swfobject.embedSWF("//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 – 2015, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Спасибо! Я очень признателен за Ваш ответ. Теперь я разобрался, всё работает отлично. Заново собрал 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пасибо за статью! Очень понятно и приятно.
Здравствуйте, уважаемый Админ!
Сразу предупреждаю, что я новичок и образование у меня не техническое. 🙂
Очень хочется вставить облако тегов на свой блог. Внимательно прочитала Ваши статьи, но не все поняла…
Была бы очень признательна, если бы Вы глянули на мой блог //intellviv.blogspot.com и сказали конкретно и понятно для меня (гуманитарного юзера), что мне необходимо сделать, чтобы облако тегов появилось на моей страничке.
Заранее благодарна!
1. Зайдите в Панель управления-Макет-Изменить HTML.
2. Нажмите на галочку “Расширить шаблоны виджета”.
3. Найдите строку
это начало гаджета, выделите до первого следующего появления строки
4. Вместо выделенного текста вставьте текст приведённый в статье.
5. Сохраните шаблон, расслабьтесь и наслаждайтесь 😉
Можно ли становить на сайт?
Если да, то подскажите как.
Внимательно прочитайте комментарии – там есть ответы на все Ваши вопросы … И для ucoz кто-то это уже сделал 😉
minimus, зделал все по мануалу, но не пойму в чем трабл – само тело swf отображается, а тегов не видно. Подскажите в чем причина?
Возможно у Вас стоит transparent=true, а цвет тегов совпадает с цветом фона, это обычное дело … 😉
Огромное спасибо! Очень долго искал способ сделать такое облако на blogspot, уже разочаровался и думал, что это невозможно. Промучался пару часов, но в конце концов вышло очень даже неплохо! В благодарность админу ссылочка на “ВАС” в моем блоге!!!
P.S. Очень полезный блог, нашел очень много интересной информации!
Помогите пожалуйста! Все делал по инструкции. Вроде бы все оке (пересматривал 2 раза), но отображается только значок флеш плеера =( В чем может быть проблема?
блог: //www.discotune.ru/
заранее спасибо за ответ!
Это уже у кого-то было …
Ваш код:
Должно быть:
Спасибо за ответ! Но исправил и все равно не работает =(
Попробуй наоборот:
Здравствуйте! Никак не соображу,в чем дело – облако тегов есть, вроде все ок – крутится-вертится, но в нем не нажимаются сами теги – при нажатии на любой из них перехожу на ваш блог)). Можете что-то подсказать, чтоб при нажатии на теги выводило на сообщения, помеченные этими тегами?!
1. Вы используете специальную версию облака, модифицированную мной специально для моего блога на Blogger. Эта версия облака НИКОГДА НЕ РАСПРОСТРАНЯЛАСЬ и ссылка на ресурс размещения спец-версии НИКОГДА НЕ АФИШИРОВАЛАСЬ. Очень интересно кто её Вам подсунул.
2. Ресурс на котором находится это спец-облако давно закрыт. Почему оно всё-таки работает? Сам удивлён 😉
3. Вы конечно можете попытаться использовать облако с другого моего ресурса, некоторые так делают не смотря на то, что разрешения на использование облака с этого ресурса я НИКОМУ НЕ ДАВАЛ. К тому же ресурс уже очень перегружен (использование разрешённого объёма траффика – 97%) и Вы рискуете оказаться без облака в конце каждого месяца.
Кто виноват и что делать:
Кто виноват Вам лучше знать (я догадываюсь кто), а делать надо следующее:
1. Скачать у меня облако.
2. Разместить, предварительно заведя аккаунт, на собственном ресурсе.
Здраствуйте! Вы бы не могли мне помочь.
У меня таже проблема с ссылкой на adobe flash player.Хотя я всё попробовал что было уже изложино .Вот мой блог
//mfl-yaris.blogspot.com/
Подскажите в чем причина?
У Вас та же проблема, что и здесь … Попробуйте заменить на это:
Изменил . Но все по старому??? Почему…..
Попробуйте изменить кавычки:
и ещё, у Вас swfobject версии 1.4, а нужен 2.1 … Можно грузить отсюда:
Большое спасибо! Но у меня новая проблема “.Облако есть , даже не облако а чёрный квадрат ???
Для начала закомментируйте transparent (двумя слэшами) … А дальше посмотрим …
Я извиняюсь за тупость, но можна подробней.Как закоментируй? и что такое слэш?
превращаем в
это и есть “закомментировать” 😉
А сейчас серый квадрат !?
Доброго времени суток!
У меня вот такая проблемка:
почему-то облако тегов совсем не отображается в блоге (не отображается даже название самого модуля), хотя на вкладке “Элементы страницы” гаджет присутствует и можно зайти в его настройки. В чём может быть проблема?
На каком блоге?
//housecompiler.blogspot.com
Не нашёл я на вашем блоге кода облака …
Очень странно! Вот скриншот панели инструментов моего блога (вкладка “Элементы страницы”):
//s004.radikal.ru/i205/1001/d1/4e0415383602.jpg
А это код вставленный в xml-шаблон блога:
//s005.radikal.ru/i210/1001/3a/8411a29721b2.jpg
Нет его там
Честно говоря, не знаю почему так происходит. Всё сделал как вы описывали в начале данного поста. Создал произвольный гаджет во вкладке “Элементы страницы”, после чего зашёл в редактор xml-сайта, нашёл созданный гаджет и в расширенным режиме вставил приведённый вами код облака.
//s003.radikal.ru/i202/1001/1f/85771ff47710.jpg (на скрине не расширенный режим)
Во вкладке “Элементы страницы”, если нажать на настройки гаджета, то появляются его настройки (скриншот приводил выше), однако в блоге облако не отображается, даже название гаджета не отображается!
Пробовал вставить код произвольно созданный гаджет (без непосредственного вмешательства в 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.
Я слегка изменил код – попробуйте, может, наконец, получится …
Всё получилось СПАСИБО!
А можно ли убрать рамку, которая выделяет тег при наведении курсора??
Заранее большое спасибо!
Увы, нет …
Очень жаль.
Спасибо за ответ!