Делаем flash-облако тегов для самописного блога.

запостил: 20 Февраля 2010 г.

Сразу хочу извиниться, раньше этот пост имел другое название, не совсем верное, потому оно и было изменено. Standalone блог - это не обязательно блог с самописным движком, он может использовать и готовую CMS, а я хочу рассказать именно о самописном двиге. Итак, теперь приступим.

Блуждая по блогам, читая разные интересные и не очень интересные посты я как-то совершенно случайно обратил внимание на очень интересный вид облака тегов – вот это действительно облако: объемное и крутящееся. Признаюсь, настолько впечатлился этим эффектом, что решил всенепременно заиметь такое чудо и в своем блоге, ведь работа над блогом - это процесс творческий и непрерывный. Отложив все дела, включая обед, я начал разбираться, как же это было сделано.

На подступах к коду.

На подступах к коду Дизайн рассматриваемого блога очень уж сильно напоминал своим дизайном классический WP. Промотав страницу вниз я получил еще одно подтверждение этой мысли в виде строчки “Работает на WordPress”. Ну а раз так, значит, это облако наверняка является одним из многочисленных плагинов к популярнейшему блоговому двигу.

Решив внять мудрому совету, я без лишних вопросов полез в гугл, который по первой же ссылке сдал мне этот плагин с потрохами. Впрочем, вскоре выяснилось, что официальный плагин не поддерживает нашу с Вами дорогую и обожаемую кириллицу, потому я направился на сайт плагинов для WP, где и нашел то, что требовалось. Скачав этот самый плагин я понял, что всю красивую обертку мне нужно будет убирать – ни к чему она в самописном блоге. В общем, пора было отделять зерна от плевел (для блогов на WP там только зерна, конечно). Итак, открыт исходник одной из страниц (посмотрите html-код той самой страницы, которую сейчас читаете) с установленным плагином, Kate показывает сырцы во всей красе (Вы ведь уже скачали их, правда?) – пациент готов к операции. :)

WordPress, конечно, хорошо или “мы пойдем другим путем”.

Файлы swfobject.js и, конечно, сам tagcloud.swf оставляем без изменений, если интересно, можете, конечно, и поковыряться в них. Находим в html-коде строчку:

<script type="text/javascript" src="http://zeroxorblog/js/swfobject.js"></script>

Именно отсюда и начинается внимательный просмотр. Как видим, после этого начинается вывод списка тегов в списке, после чего снова начинается JavaScript, в котором, на первый взгляд, идет самый натуральный фарш. На самом же деле все не так страшно, поэтому, чтобы не томить Вас, уважаемый читатель, дам листинг того, каким образом все это получается.


function showFlashTags()
{
    $result = '<script type="text/javascript" src="'.SITE_URL.'/js/swfobject.js"></script>';
    $result_tags = '';
    $tags = $this->getTags();
    if (count($tags))
    {
        foreach($tags as $tags)
        {
            $result_tags .= '<a href="'.SITE_URL.'/tag/'.$tags->id.'/" rel="tag" style=\'font-size: 10pt;\'>'.$tags->title.'</a>';
        }
    }
    $result_tags = urlencode($result_tags);
    $result_tags = urlencode('<tags>') . $result_tags . urlencode('</tags>');
    $result .= '<ul>'.$this->showTags().'</ul><script type="text/javascript">var widget_so = new SWFObject("'.SITE_URL.'/swf/tagcloud.swf", "tagcloudflash", "245", "245", "9", "#79BBDE");widget_so.addParam("allowScriptAccess", "always");widget_so.addVariable("tcolor", "0x#ff0000");widget_so.addVariable("tcolor2", "0x#00ff00");widget_so.addVariable("hicolor", "0x#0000ff");widget_so.addVariable("tspeed", "120");widget_so.addVariable("distr", "true");widget_so.addVariable("mode", "tags");widget_so.addVariable("tagcloud", "'.$result_tags.'");widget_so.write("wpcumuluswidgetcontent");</script>';
    return $result;
}

Как видим, весь “фарш” получается простым кодированием строки ($result_tags = urlencode($result_tags);), после чего это счастье обрамляется контейнером <tags></tags> (видимо, swf-файлу это нужно), после чего собираем параметры ролика в переменную widget_so и все это дело выводим в div#wpcumuluswidgetcontent. Как видим, ничего сложного, облако тегов успешно крутится и кликается.

И еще один момент. А как же быть, если у пользователя отключен или не установлен flash-плагин в браузере? Что ж теперь – не позволять ему просматривать посты по тегам? Ничего подобного: именно для этого и есть у меня строчка <ul>'.$this->showTags().'</ul>, которая как раз и формирует список тегов, который отображается при отсутствующем либо отключенном флэше.

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

P.S. Если интересны посты подобной тематики, давайте еще что-нибудь поразбираем с Вами.

Внимание! При копировании данного материала обязательна прямая текстовая ссылка на эту страницу.

<< вернуться

На эту тему говорят:

a-lexx

23 Февраля 2010 г.

Прикольное облако. Вообще в тему смотрится.

ZeroXor

01 Марта 2010 г.

Спасибо. Есть у меня еще кое-какие планы по модернизации блога. Главное, что функциональные возможности не теряются при отключении flash и JavaScript.

HIMED

18 Сентября 2010 г.

Очень хорошо!

Татьяна

03 Ноября 2010 г.

А можно тоже самое, но для чайников? :)

Какой код вставлять в html и где можно скачать файлы swf и js ?

Спасибо!

ZeroXor

04 Ноября 2010 г.

Татьяна, файлы можно скачать. например, с моего сайта:
http://www.zeroxor.ru/swf/tagcloud.swf
http://www.zeroxor.ru/js/swfobject.js

А что касается кода, вставляемого в html, то здесь не все так просто - зависит от того, что Вам нужно. Есть предложение: напишите мне на mail@zeroxor.ru - уверен, что совместно мы разберемся, что и куда размещать. Жду письма.

Владимир

07 Ноября 2010 г.

Здравствуйте! Наконецто нашел что то близкое к теме. Хочу установить на свой сайт flash облако, но не тегов, а картинок, в качестве меню, чтобы при нажатии на картинку, открывалась та или иная страничка сайта. Мой сайт частный безовсяких платформ(юкоз, вордпресс джомла и т.д.). Возможно ли такое сделать? И если да, то я прошу у Вас помощи, конечно же не бесплатно. С уважением, Владимир.

mozgomix

13 Января 2011 г.

Внедрил сеё флэшчудо в модуль тегов своего движка.

Лицезреть можно тут:
http://delopodushe.ru/method/stats/

Спасибо!

Natalya

06 Февраля 2011 г.

Здравствуйте!
Понимаю, что немного вклиниваюсь не в тему, но "чайнику" очень нужен совет-помощь!
Возникла проблема с метками. В сайдбаре ссылки на них имеются, но при нажатии - ошибка 404...
В чем причина, так и не нашла...
Может, поможете разобраться?

ZeroXor

07 Февраля 2011 г.

Есть подозрение, что ссылки неверно отрабатываются в .htaccess (если, конечно, таковой имеется). К тому же, как я заметил, ссылки тегов из постов и ссылки тегов из сайдбара ведут на разные страницы. Определенно нужно копаться в настройках блога.

Вова

07 Февраля 2011 г.

Здравствуйте!
Я примерно понял как закинуть на мой сайт но я не могу скачать файл swf

Natalya

07 Февраля 2011 г.

По-видимому, нет...
Что делать?

Natalya

07 Февраля 2011 г.

Нашла)

Block out any script that includes a <script> tag in
URL

Я так понимаю, проблема в этом...

ZeroXor

07 Февраля 2011 г.

2 Вова: Как я уже говорил, скачать swf-файл можно по адресу http://www.zeroxor.ru/swf/tagcloud.swf

Если не качает, можно поиграть с параметрами браузера, либо воспользоваться программой, которая специально заточена для скачивания файлов по http-протоколу. Под *nix системы отлично работает wget. Что же касается Windows или Mac OS - здесь порекомендовать не могу, потому как не знаю.

2 Natalya: Все может быть, все может статься, но все же думаю, что не в том направлении Вы отправились в своих поисках (хотя, конечно, могу и ошибаться). Отпишу Вам письмо на адрес, который указан у Вас в блоге. Там попробую расписать поподробнее.

Денис

26 Февраля 2011 г.

Здравствуйте! Что-то я не пойму... Куда вставлять листинг? И как его обрамлять? php или я чего-то не догоняю((, если не очень сложно то можно поподробнее что и куда?Заранее спс огромный!

ZeroXor

01 Марта 2011 г.

Последний приведенный листинг - это да, PHP. А вот строчка <script type="text/javascript" src="http://zeroxorblog/js/swfobject.js"></script> - это пишется в контенер head html- страницы. Ну и также понадобятся файлы swfobject.js и tagcloud.swf. Взять их можно прямо у меня в блоге по этим адресам:
http://www.zeroxor.ru/swf/tagcloud.swf
http://www.zeroxor.ru/js/swfobject.js

ivan

12 Мая 2011 г.

всё путем, автору респект, правда, файлик http://www.zeroxor.ru/swf/tagcloud.swf взять не получилось. вот ещё тема. очеловечить облако картинок (прикольная хреновина). на юкозе имеется.
спасибо