Блоговод | b-cumulus – анимированное Облако тегов для Blogger

b-cumulus – анимированное Облако тегов для Blogger

Ковыряясь в исходниках 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

b-cumulus vs Blogumus

Чем отличается b-cumulus от Blogumus? По большому счёту, только тем, что выводит метки в облако тегов используя разный размер и цвет шрифта, в зависимости от “веса” метки. Именно так и задумывалось Роем Танком. Именно из-за этого я затеял свой b-cumulus.

Код:

<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>

<b:widget id='Label99' locked='false' title='Облако меток' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

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>

</a>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Внимание!

Код приведённый выше ВСТАВЛЯТЬ НЕПОСРЕДСТВЕННО В XML ШАБЛОН Blogger!

Установка

Скопируйте код и вставьте его в шаблон виджета, там где считаете нужным. Или добавьте гаджет “Labels”, а затем найдите его в шаблоне и замените на вышеприведённый код.

ВНИМАНИЕ! Этот виджет работает с SWFObject версии 2.1 (Blogumus с версией 1.5). SWFObject версии 2.1 не имеет обратной совместимости с версиями 1.x, поэтому, если Вы использовали Blogumus, Вам необходимо поменять не только файл tagcloud.swf, но и файл swfobject.js.

Скачать пакет поддержки виджета b-cumulus (swfobject.js, tagcloud.swf):

b-cumulus (55,0 КиБ, 2 796 скачиваний)
Flash облако меток для Blogger-блога. Локализовано. Дополнительная функциональность.

Внимание!!! Использовать этот пакет с WordPress нельзя по следующим причинам:

tagcloud.swf изменён специально для работы b-cumulus с Blogger
wp-cumulus работает в WordPress c swfobject.js версии 1.5

Взять исправленную русскую версию пакета, которая будет работать и в wp-cumulus и в Blogumus, можно здесь:

b-cumulus-old (53,0 КиБ, 1 622 скачиваний)
Старая версия b-cumulus

Параметры

Найдите следующий код:

swfobject.embedSWF("//FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);

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

добавлена возможность показывать “вес” метки, при наведении на неё курсора мыши
исправлены баги

Похожие статьи:

16.01.2009 / Blogger, Виджеты (Blogger), Мои проекты / Метки: b-cumulus, Blogger, tagcloud, виджет

Поделитесь статьёй

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

[title element="h4"] Комментарии (116) [/title]

pastormouse – 19.01.2009 - 04:22:

ответ

Хорошая работа. Респект за ковыряние. У самого руки так и не дошли. Смешно было наблюдать как у некоторых висел неработающий гаджет. В знак благодарности поставил ссылку у себя на эту страницу.
Maljar – 19.01.2009 - 09:22:

ответ

Походу у меня чего-то не вышло. Вроде все верно. переделал 3 раза. все сохраняется, но отображает только, логотип флэш-плеера. Подскажи, ПЛЗ, с чем может быть связано?
minimus – 19.01.2009 - 14:45:

ответ

2 pastormouse: Спасибо!

2 Maljar:
У Вас стоит: params.wmode = “transparent“;
Должно быть: params.wmode = "transparent";
должны быть кавычки, одиночные или двойные.
Maljar – 19.01.2009 - 15:49:

ответ

Спасибо! Все встало на свои места.
Теперь по твоему блогу:
1) Не смог подписаться на RSS
2) Не нашел возможности получать комменты на почту.
- minimus – 20.01.2009 - 17:13:
  
  ответ
  
  Пришлось переустанавливать WordPress … Вроде всё наладилось. Подписки восстановились 😉
Maljar – 19.01.2009 - 19:21:

ответ

Комментарии нашел нашел 🙂 Теперь осталось подписаться.
Ёж – 29.01.2009 - 18:25:

ответ

касательно неиспользованных возможности флешки (это я из вашего текста для Блогосферы) – я ковыряясь в свое добавил простенький функционал чтобы при наведении на слово в обводящей рамочке рядом еще писалось кол-во постов по этому тегу … это довольно удобно потому как размер вращающихся слов корелируется больше перспективой чем весом тега. Если любопытно – могу сбросить изменения, которые делал .. или дополните код сами если так будет удобнее …
- minimus – 29.01.2009 - 20:05:
  
  ответ
  
  Что-ж, идея Ваша и, как мне кажется, было бы благоразумно объединить наши усилия, как минимум, в реализации этой идеи. Я уже представляю как это сделать, но Ваш вариант тоже хотелось бы посмотреть. Скиньте на minimus@blogcoding.ru . Спасибо за идею!
  
  Я подозреваю, что Вы модифицировали объект _back …
SiMBa – 01.02.2009 - 16:04:

ответ

Что-то не получается с цветом 🙁
бледно бирюзовый висит и все
SiMBa – 01.02.2009 - 16:26:

ответ

Разобрался, на самом деле
flashvars.tcolor
flashvars.tcolor2 перепутаны. соответственно я видел бирюзовый, а теги которые больше всего использованы, я не видел.
- minimus – 01.02.2009 - 17:02:
  
  ответ
  
  Это не у меня перепутано, это Рой накосячил 😉
SiMBa – 02.02.2009 - 14:58:

ответ

2minimus
🙂

ЗЫ: хотелось бы посмотреть на облако тегов со счетчиком
minimus: SiMBa, пользуйтесь меню форматирования текста! 😉
- minimus – 02.02.2009 - 15:03:
  
  ответ
  
  2 SiMBa
  На подходе. Уже всё работает, но есть чисто пользовательские нюансы, связанные с обратной совместимостью …
minimus – 02.02.2009 - 21:16:

ответ

2 SiMBa и ALL
Все особо нетерпеливые могут посмотреть первые результаты работы над b-cumulus v 1.1.1 на Блогосфере …
SiMBa – 03.02.2009 - 10:35:

ответ

Класс 🙂
хм… а можно заложить в код расположение цифр и их размер? чтобы можно было располагать не только слева а например слева-снизу, или на 10% ниже центра. И цвет отдельно бы 🙂
ну эт мои пожелания, а вобще класс афтору респект и +1
- minimus – 04.02.2009 - 10:48:
  
  ответ
  
  Конечно можно … В принципе всё можно … Вопрос только в целесообразности и наличии времени на разработку. Ну и ещё, чем больше параметров передаётся в виджет, тем больше времени требуется на саму передачу и, соответственно, времени на вывод виджета на экран 🙁
SiMBa – 05.02.2009 - 09:18:

ответ

ну расположение можно задавать цифрой 1-9, а цвет если не указан то тот же что и тега, размер тоже как один.
чтобы куча параметров не было можно попытаться использовать нечто такое:
flashvars.tagparams=”maincolor:#000000, mincolor:#000FFF, maxcolor:#FFF000″
согласен обратной совместимости не будет,
а переменные можно легко вынуть сначала разбиение в массив по “,” затем по “:”(я не вкурсе есть ли у javascript функции для работы со строками и динамическими массивами)
- minimus – 12.02.2009 - 22:56:
  
  ответ
  
  Думаю пока … Всё переделывать придётся. Рой Танк не узнает своё творение 😉
amigurumiroo – 25.02.2009 - 12:35:

ответ

У меня тоже отображается только значок Get Adobe Flash Player.Кавычки вроде стоят.Я в блогах совсем новичок, помогите, пожалуйста, так хочется ваш замечательный b-cumulus заполучить:-)!

amigurumiroo – 25.02.2009 - 12:40:

ответ

Мой блог //amigurumiroo.blogspot.com/. Значок Get Adobe Flash Player вверху.

minimus – 25.02.2009 - 16:06:

ответ

Вы неправильно используете кавычки в определении параметра 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>";

1	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>";

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

flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count' rel="nofollow"><data:label.name/></a></b:loop></tags>";

1	flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count' rel="nofollow"><data:label.name/></a></b:loop></tags>";

Попробуйте – должно всё получиться. 😉

amigurumiroo – 25.02.2009 - 23:07:

ответ

Получилось! Спасибо большущее!!! Я на вас ссылку сделаю на своей странице)). У меня только получается,если удаляю гаджет “Ярлыки”, который внизу b-cumulus, то облако опять превращается в значок Get Adobe Flash Player .Непонятно, как избавиться…
- minimus – 25.02.2009 - 23:33:
  
  ответ
  
  Он у вас там два раза. Попробуйте убрать лишнее в редакторе HTML – или в Blogger, или на компьютере.
amigurumiroo – 26.02.2009 - 08:39:

ответ

Спасибо, все работает 🙂 ! Классный плагин!

minimus – 24.03.2009 - 19:52:

ответ

Ответ на вопрос Alex’а:
Код виджета b-cumulus может быть установлен в любой HTML или XML файл. Только этот код является специфическим для Blogger-блога:

flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count' rel="nofollow"><data:label.name/></a></b:loop></tags>";

1	flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count' rel="nofollow"><data:label.name/></a></b:loop></tags>";

Он отвечает за передачу массива меток в облако (tagclowd.swf). Таким образом, если обеспечить сборку массива данных (руками или в цикле) для переменной flashvars.tagcloud, то облако будет работать на любой платформе. Формат массива выглядит так:

<tags>
  <a href="Адрес ссылки на страницу метки 1" style="Количество статей с меткой 1" rel="nofollow">Метка 1</a>
  <a href="Адрес ссылки на страницу метки 2" style="Количество статей с меткой 2" rel="nofollow">Метка 2</a>
  ...
  <a href="Адрес ссылки на страницу метки N" style="Количество статей с меткой N" rel="nofollow">Метка N</a>
</tags>

<tags>

<a href="Адрес ссылки на страницу метки 1" style="Количество статей с меткой 1" rel="nofollow">Метка 1</a>

<a href="Адрес ссылки на страницу метки 2" style="Количество статей с меткой 2" rel="nofollow">Метка 2</a>

...

<a href="Адрес ссылки на страницу метки N" style="Количество статей с меткой N" rel="nofollow">Метка N</a>

</tags>

Родион – 25.03.2009 - 18:15:

ответ

А как сылки в блогер добавить??
- minimus – 25.03.2009 - 20:56:
  
  ответ
  
  Честно говоря, не понял вопроса … Попробуйте конкретизировать … Что именно Вы хотите сделать или узнать?
Родион – 26.03.2009 - 17:02:

ответ

я новичек в этом деле я не понял как его поставить! верней понял… у мну показывает тока логотип ! как теги добавить? туды…
- minimus – 26.03.2009 - 17:11:
  
  ответ
  
  Если Вы сделали всё как положено, должен показывать облако. Если показывает логотип, значит где-то ошибка. Дайте URL сайта, я посмотрю …

Zet – 17.04.2009 - 04:40:

ответ

Поделитесь вашими flash sources наработками. Очень интересно взглянуть. Каким-то образом только ваша версия работает с кодировкой используемой поисковым модулем Юкоза. Я не могу сам скомпилировать нормальную версию используя исходники Роя Танка.
Буду очень признателен.

minimus – 17.04.2009 - 12:42:

ответ

Какая именно версия Вас интересует? Их две (третья – личная, не в счёт): для WordPress (практически оригинал) и для Blogger (сильно подправленная) …

Zet – 17.04.2009 - 15:38:

ответ

Какая именно версия я точно не скажу, меня интересуют исходники вот этого файла //forum.wafl.ru/files/freeman/tagcloud.swf
полагаю это как раз версия на этой странице, названная “Flash облако меток для Blogger-блога. Локализовано. Дополнительная функциональность.”
Очень хочется понять, каким образом решена проблема русской кодировки для URL
Вот то, что выводит файл, который я создаю из исходников Роя Танка (предварительно добавляя русскую кодировку по его же мануалу)
//zetclan.com/search/%C7%ED%E0%EC%E5%ED%E8%F2%EE%F1%F2%E8/
Это в облаке тегов отображается как тег “Знаменитости”,

а вот что выводит ваш swf файл при нажатии на тег “Знаменитости”
//zetclan.com/search/%D0%97%D0%BD%D0%B0%D0%BC%D0%B5%D0%BD%D0%B8%D1%82%D0%BE%D1%81%D1%82%D0%B8/
Последний вариант верен.
Я не могу разобраться почему они отличаются в силу малых познаний в данной области

minimus – 17.04.2009 - 19:42:

ответ

Понятно! 😉 Рой у себя в блоге пишет, что облако выдаёт encoded линк. Но на самом деле это не так!
По Рою (tag.as):

private function mouseUpHandler( e:MouseEvent ):void {
    var request:URLRequest = new URLRequest( _node["@href"] );
    navigateToURL(request,"_self");
}

private function mouseUpHandler( e:MouseEvent ):void {

var request:URLRequest = new URLRequest( _node["@href"] );

navigateToURL(request,"_self");

}

Мой вариант:

private function mouseUpHandler( e:MouseEvent ):void {
    var request:URLRequest = new URLRequest( encodeURI( _node["@href"] ) );
    navigateToURL(request,"_self");
}

private function mouseUpHandler( e:MouseEvent ):void {

var request:URLRequest = new URLRequest( encodeURI( _node["@href"] ) );

navigateToURL(request,"_self");

}

Что касается freeman’а – то этот воришка несколько моих виджетов выдаёт за свои. В том числе и этот.

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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