Blogumus - Flash облако тегов для Blogger

вторник, 23 декабря 2008 г.
Наверное, многие из вас видели подобное облако тегов в разных stand-alone блогах на Wordpress. С недавних пор хорошие люди внедрили эту фишку для Blogger.com. Вот для сравнения как выглядят два варианта облака тегов:
Облако тегов Blogger  блог
Оба они не совсем стандартные для Blogger.com, то есть для их установки потребуются дополнительные действия. О том, как реализовать первый вариант я рассказывал здесь. Сейчас поговорим о втором.

Установка виджета Blogumus

Чтобы установить подобное облако тегов скачиваем архив (зеркало).

В нем содержится 2 файла, которые включают русскую локализацию плагина (оригинальный скрипт не отображает кириллические теги в блоге). Вам потребуется записать эти файлы на какой-то стабильно работающий хостинг, чтобы можно было их вызывать.

Далее заходим в админку блога, раздел «Макет», меню «Изменить HTML». Ставим галочку «Расширить шаблоны виджета» в верхнем правом углу текстового поля с кодом.

Находим в коде строку
<b:section class='sidebar' id='sidebar' preferred='yes'>
По сути, это начало блока боковой панели блога. Можно найти в шаблоне любое другое место, где вы хотите расположить облако тегов. Но делать следует это очень аккуратно, предварительно сохранив работающих код в какой-то текстовый файл.

Сразу после этой строчки или в другом выбранном вами месте добавляете код:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://путь_к_файлу/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://путь_к_файлу/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Обратите внимание, что в нем нужно исправить пути на файлы архива, который вы скачивали в самом начале. После этого можно сохранить шаблон. Если никаких ошибок не возникло и облако тегов отображается, то все сделано правильно.

Настройка виджета

Виджет имеет ряд настроек, которые можно изменить. Это:

1. Ширина и высота блока облака тегов (240 и 300 по умолчанию). Изменяется здесь:
var so = new SWFObject("http://путь_к_файлу/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
2. Цвет фона:
var so = new SWFObject("http://путь_к_файлу/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
Цвет текста:
so.addVariable("tcolor", "0x333333");
Обратите внимание в каком формате указывается код цвета, он без символа #.
Размер текста:
("tagcloud", "<tags><b:loop  values='data:labels' var='label'><a expr:href='data:label.url'  style='12'>
Поэтому для каждого шаблона вы сможете подобрать нужный вам вариант отображения.

Альтернативная реализация

Через некоторое время появилась модифицированная версия плагина, альтернативная можно сказать. Она может понадобиться, если после выполнения всех пунктов установки виджета, он так и не заработает. Это может быть вызвано использованием сторонних Flash виджетов или длинных названий тегов. Алгоритм реализация данной версии полностью аналогичен оригинальному, отличается лишь кодами – посмотреть можно здесь.

Преимущества и недостатки обоих вариантов

Если сравнивать две реализации облака тегов, то я все-таки остановил бы выбор на первой. Да, Flash смотрится очень ярко, креативно, но вместе с тем в большинстве случаев там сложно сориентироваться. В то время как стандартный блок отображает теги по алфавиту.

Кстати, в процессе использования я нашел один очень неприятный глюк – это неработающие ссылки в русских тегах. То ли там какая-то проблема в кодировке, то ли при локализации допущена ошибка, но данный досадный факт, по сути, ставит под сомнение возможность использования виджета. Ведь главная задача не визуальная красота, а возможность найти нужную информацию, пройдя по интересующим тегам.

P.S. На создание данного поста меня вдохновил Сергей Мариловцев, любезно предоставив материалы на английском языке. Мне оставалось лишь ознакомиться и разобраться. Кстати, в одном из его блогов вы также можете найти работающее облако тегов.

Еще одно описание установки виджета было найдено в блоге о блогосфере. Там есть и другие интересные посты по системе Blogger! Рекомендую заглянуть.

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

Спонсоры поста:
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails