Блоговод | 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 795 скачиваний)
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 621 скачиваний)
Старая версия 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]

Андрей – 28.01.2010 - 19:42:

ответ

Здравствуйте. Скажите пожалуйста, а можно ли где-то раздобыть исходники этого замечательного облака? Заранее спасибо.
- minimus – 28.01.2010 - 23:57:
  
  ответ
  
  В блоге Роя Танка есть ссылка …
SubonAir – 18.02.2010 - 11:44:

ответ

Спасибо за разработку!!!
Хочу обратить внимание на то, что в коде ссылка идет как:
‘//ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js’
Я по привычке изменял путь файла до названия, а само название оставлял прежним (т.е. “swfobject_src.js”). Тогда как в архиве объект называется “swfobject.js”. Из-за этой разницы в названиях промучился с установкой несколько часов, пока наконец нашел свою оплошность. Поэтому, будущим пользователям – БУДЬТЕ ВНИМАТЕЛЬНЫ!
SubonAir – 18.02.2010 - 13:12:

ответ

Подскажите пожалуйста, каким должно быть значение “hicolor:”, что при наведении курсора цвет не менялся, а просто появлялась рамка, как это сделано у Вас?
SubonAir – 19.02.2010 - 12:09:

ответ

Подскажите пожалуйста как убрать тонкую рамку из точек вокруг виджета? Появляется, когда нажимаешь на каком-нибудь теге из облака.
Евгений Лукин – 24.07.2010 - 10:23:

ответ

Спасибо большое… Поставил – все классно работает. Вообще очень хороший и полезный блог.
Евгений Лукин – 24.07.2010 - 10:25:

ответ

Добавил ваш блог в список блогов на свой блог. Всех буду направлять к вам)
Azer Safarov – 12.01.2011 - 12:33:

ответ

Здравствуйте, спасибо за статью. Скрип установил. Но только не могу понять что написать вместо FILE_HOST_NAME. Когда пишу адрес своего блога, он показывает что надо скачать флеш плеер. Когда пишу путь к файлу на хостинге, то же самое. Попробовал и этот скрипт: //blogohelp.blogspot.com/2008/12/blogumus-flash-blogger.html#comment-127774474 Только там проблемы с русским шрифтом. Помогите пожалуйста разобраться в чем проблема.
- minimus – 12.01.2011 - 15:44:
  
  ответ
  
  Вам нужно где-то разместить файлы плагина … Почитайте здесь.
Алексей – 03.02.2011 - 08:53:

ответ

Подскажите, а данные плагин ещё действует?
Перепробовал все варианты, и с //fileave.com , загрузил туда и swfobject.js и tagcloud.swf, но что-то облако не заработало! Подскажите.
- minimus – 03.02.2011 - 11:02:
  
  ответ
  
  Актуально … Всё должно работать … Дайте URL …
  - Алексей – 03.02.2011 - 18:31:
    
    ответ
    
    Ставил на //management.noetikos.info/
    
    Сейчас поставил настройки Ваши из блога:
    //ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js
    и
    //tests.blogcoding.ru/js/tagcloud.swf
    
    =(
    Что делать?
Хозяин Лягушатника – 09.02.2011 - 22:12:

ответ

Спасибо, установил себе на блог lyagushatnik.blogspot.com
Вроде все работает)))
Скажите, а куда лучше заливать файлы плагина, чтобы быстрее грузилось?
Я залил на Гугл сайты, – нормальный вариант?

И еще вопрос. Ссылки на этом облаке поисковики видят или нет? Просто решение установить анимированное облако тегов у меня возникло в связи с борьбой дубликатов страниц, помеченных ярлыками. Просто всем известный код на запрет индексирования гуглом ярлыков не очень работает. Всеравно выдает в поиске.
- minimus – 13.02.2011 - 13:16:
  
  ответ
  
  1. Я всем советую FileAve, Google Sites – не самый лучший вариант, но тоже сойдёт …
  2. Увы, нет. Времени нет на доработку 🙁
Ches – 26.02.2011 - 20:08:

ответ

Добрый день!
Проследовал всей вашей инструкции почитал коменты обьясните пожалуйста как поставить.У меня только квадрат и все а тэгов там нет
вот блог
ches-it.blogspot.com/
- minimus – 27.02.2011 - 11:42:
  
  ответ
  
  У Вас почему-то не разворачивается выражение для tagcloud …
  - Ches – 27.02.2011 - 14:32:
    
    ответ
    
    Спасибо за ответ.
    Но можно более подробно ?И как это исправить?
  - Ches – 05.03.2011 - 16:22:
    
    ответ
    
    Доброго времени суток.
    Я понимаю что у вас есть дела более важнее но не могли бы Вы дать свою аську или скайп чтобы вы мне помогли разобраться так как Вы знаете в жтом намного больше меня.
    - minimus – 05.03.2011 - 18:56:
      
      ответ
      
      Был в деловой поездке …
      
      Вы вставили код виджета как контент виджета HTML, а нужно было руками вставить в исходник …
      
      Мне можно написать на minimus(AT)blogcoding.ru
Татьяна Федоренко – 13.06.2011 - 19:54:

ответ

Спасибо огромное за подробное описание действий! Когда я впервые увидела это облако, моему восторгу не было предела. Но информацию о его создании на blogspot нигде не могла найти. И наткнувшись на ваш сайт была просто счастлива! Еще раз спасибо!
Дмитрий – 21.06.2011 - 00:22:

ответ

Ничего не получается уже который раз(( Все сделал, как вы написали в статье, но у меня появляется надпись “Облако меток” и больше ничего. А, когда отсюда удаляю scr «swfobject_src.js», то появляется табличка с установкой адоб флэш плейер. Уже кучу статей перечитал таких, но ничего не получается.
Дмитрий – 22.06.2011 - 00:36:

ответ

Оказывается все работает у меня. Вот только в опере это облако не отображается(( В гугл хром и ИЕ отображается нормально. Как же под оперу оптимизировать облако?
42 – 02.10.2011 - 18:41:

ответ

Здравствуйте, автор!
Спасибо за облако! Это единственный работоспособный вариант флэш облака тегов из всех, которые я видел.
Но меня беспокоит одна вещь: мелкий шрифт тегов в облаке, размером всего 1-2 пикселя. Возможно, это следствие новенького блога, но хочу узнать, так ли это, не можете подсказать?
42 – 02.10.2011 - 18:57:

ответ

Автор, можете не отвечать, я ступил, использовал не оптимизированную под ваш код флешку, извините 🙂 .
Алексей – 31.10.2011 - 21:17:

ответ

Полдня ушли насмарку – так ничего и не получилось ((
Алекснадр – 19.11.2011 - 15:18:

ответ

Доброго времени суток. Очень понравилось созданное вами облако тегов. Но как не пытаюсь не получаеться установить. Почитал коментарии не какой информации не нашел. Прошу помогите мне)) Ходмоих действий установки был таков: 1 зашел в настройку блога 2 Нажимал Изменить HTML тут огромный обьем кодов и куда вставлять этот когд я так и не нашел, пробовал впихнуть много где, но шаблон от этого по разному менялся, а облако не появлялось. Еще пробовал создать HTML/JavaScript каджет и вставить код туда, но кроме изображения, про адоб флеш плеер не чего не появилось. Обьясните пожалуйста что я не так делаю?
Tatiana – 04.01.2012 - 15:56:

ответ

Уважаемый Минимус, вы видели (ну, наверное, видели, просто не могу не написать о своем возмущении) вот этот блог (и в частности конкретное сообщение): //www.damir-tote.ru/2011/06/oblako-tegov-na-blog-blogspot.html.
Это же ваше облако, преподносимое, как свое… И не только облако, в других постах есть тоже похожие на ваши продукты.
Эти товарищи вводят в заблуждение людей, ведь пользуются же… я поначалу тоже у них облако взяла, а потом уже нашла ваш блог.
=(
- minimus – 06.01.2012 - 14:42:
  
  ответ
  
  Прискорбно, но это происходит уже не в первый раз … 🙁 Время всё расставит по своим местам … 😉 Спасибо за участие!
  - Tatiana – 06.01.2012 - 15:14:
    
    ответ
    
    Спасибо вам за красивое облако! 😉
  - damir-tote – 19.01.2012 - 08:21:
    
    ответ
    
    Я не копировал ваш код, тем более этот как я понимаю не давно тут. Да и само Облако тегов не ваше изобретение. Не понимаю претензий этой девушки.
    - minimus – 20.01.2012 - 12:26:
      
      ответ
      
      Мне, как бы это мягче сказать, по барабану то что Вы думаете и чего не понимаете. Свой код от чужого я отличить могу. Впрочем, не Вы первый и не Вы последний …
      
      P.S. А Ваш отжиг насчёт “недавно” мне понравился. Действительно, больше двух лет можно считать “недавно”. 🙂