Как сделать облако тегов на PHP.

10 Июн 2008

Облако теговОблако тегов” или “Облако меток” (англ. tag cloud) — визуальное представление списка ярлыков. Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова.

Теги для многих удобнее категорий, и, наверное, поэтому без них сейчас не обходится ни один проект в концепциях Web 2.0. Для многих CMS есть модули или плагины, выводящие облако тегов. WordPress поддерживает такую функцию начиная с версии 2.3.

Но мне захотелось вывести такую штуку на самописном движке сайта “Коллеги: 1000 IT-блогов“. Реализация оказалась проще, чем я думал.

  • 1. Создал таблицу соответствий “Тег – Число”.
  • 2. Заполнил её (несложная функция, подсчитывающая число вхождений тега в таблице блогов).
  • 3. Рассчитал максимальное значение и исходя из него – популярность каждого тега в процентах.
  • 4. Разделил теги на группы по популярности и назначил им CSS-классы.
  • 5. Подготовил соответствующие CSS-классы для отображения.
  • 6. Вывел облако на страницу блоком.

скачать PHP скриптTagCloud.phps - формирование облака тегов.

В тексте исходника – все инструкции, дамп таблицы и CSS-классы. Посмотреть этот код в действии можно в “Коллегах”.

Жилинский Владимир.






 

EvilFaeton     .

Написано 10 июня 2008 года в 13:34


Спасибо попробую, в свое время для вывода облака использовал вот этот код:
http://www.hawkee.com/snippet/1485/

 

Жилинcкий Владимир     .

Написано 10 июня 2008 года в 13:35


Тоже вариант =)

 

Vadimych     .

Написано 10 июня 2008 года в 13:50


В целом у меня гораздо более коряво :D
Но довольно похоже, что меня, как псевдопрограммера радует :D
Еще бы была расписана отдельно тэговыковыривалка, которая в моем случае расписана аж на 25 строк
Создание жестких CSS – гуд, я не заморочился и долго игрался с расчетами размеров тэга посредством натуральных логарифмов :D

 

Жилинcкий Владимир     .

Написано 10 июня 2008 года в 13:54


К теговыковыривалке есть два подхода – грамотный и мой :-)
Грамотный в плане хранения данных – хранить соответствие Тег – Элемент в отдельной множественной таблице.

Тогда подсчёт тегов будет элементарный – селектом с одним условием равенства.

Я использую более простой, но более медленный способ – теги хранятся в поле таблицы блогов, при необходимости их получить делается explode(), но эта необходимость есть только для пересчёта таблицы тегов. А выборка блогов по тегу делается через %LIKE%. Знаю, что медленно, но меня пока устраивает. Подробнее рассказывать? :-)

 

Vadimych     .

Написано 10 июня 2008 года в 14:04


Не надо :)
У меня так и работает :D

 

Лёхха     .

Написано 10 июня 2008 года в 14:27


“рассчёт” правильнее писать с одной с :)

 

Жилинcкий Владимир     .

Написано 10 июня 2008 года в 14:28


У меня новая жуткая клавиатура. К ней в комплекте должен идти бесплатный спеллчекер… =(

 

tot_ra     .

Написано 10 июня 2008 года в 15:19


Меня больше интересует в “Коллегах” возможность повторной проверки сайта чем облака, а то у меня rss-feed неправильный.. Да и что случается если у сайта 404?

 

Жилинcкий Владимир     .

Написано 10 июня 2008 года в 15:24


С повторной проверкой не всё так просто. У тебя, например, 6 фидов на странице, я даже представить себе не могу как скрипт мог угадать нужный :-)
И с иконками такая же ерунда – у каждого свои представления о формате…
Фид поправил.

Если 404 – происходит обработка следующего фида. Если постоянно 404 – я удаляю фид из матрицы =)

 

Воффка     .

Написано 12 июня 2008 года в 11:29


Без PRIMARY KEY :-/

 

Серега     .

Написано 12 июня 2008 года в 18:27


Спасибо за рекомендации, облако тегов – шутка полезная. )

 

Жилинcкий Владимир     .

Написано 15 июня 2008 года в 11:00


Вот тоже вариант, тоже как-то укуренно, но тоже работает ;-)

http://bolzamo.org.ru/175/#more

 

Петр     .

Написано 15 июня 2008 года в 17:31


Одна из нормальных рекомендаций, буду пользоваться. Хотя преимуществ (выше ссылка была) , не углядел.

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:07


Мда, код написан. Работает. Но вот я не понимаю зачем сначала Вы кладете данные в массив, а потом в цикле их обрабатываете? Можно сделать все в одном цикле.
А второе замечание – поиск максимального элемента в таблице можно сделать средствами MySQL.

И думаю тогда будет все отлично!

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:10


Блин, написал комментарий, а он не отображается.. :(

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:11


Похоже какая-то беда с опен ИД была… Просто только что его зарегистрировал. =)

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 00:12


Отображается =) Просто первый комментарий пользователя идёт на премодерацию.

Почему 2 цикла… Ну тут у меня скорее логическое разделение на случай выполнения в разных местах. Можно и одним циклом, согласен.

А вот на счёт максимума через mysql … Это идея, надо её подумать =)

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:35


просто я сейчас начал делать нечто подобное fotki.yandex.ru, и если будет много меток (а их там будет МНОГО), то все будет тормозить. поэтому необходима правильно-спроектированная структура БД, со всеми ключами. Так что замечание Воффки тоже уместно..

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 00:38


Покажи потом чего получится если не сложно =)
Воффка правильно говорит, не вижу препятствий – теги же уникальны по определению.

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:40


И еще бы все это дело обернуть в класс, передавать туда имя таблицы, наименование поля с весом тега, и, массив стилей – будет вообще конфетка :)

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 00:42


На Яндексе ещё, по-моему используются управляемые элементы, то есть там не все теги, а те, что доктор прописал. Тоже нужно обыграть.

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:44


ага, дизайн нарисовал я… БД сделали, а больше пока показывать нечего.. Дизайн, должен признать, 90%-ная копия fotki.yandex.ru

Просто я долго сидел, думал, пытался что-то сделать свое, уникальное… Но смотря на ТЗ, и видя тот же функционал, те же блоки, почти тоже-самое и вышло… :(

Одно радует, ОПЫТ, полученный при разработке незаменим :)

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:47


всмысле? по-поводу тегов? можно по-подробнее.. Там вроде, как я понял, используется просто таблица уникальных тегов и таблица связей между тегами.

Причем каждая связь имеет тоже свой вес.

У нас будет как бы метки пользователей, и вдобавок ко всему – свои метки, т.е. модерируемые.

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 00:48


Я не уверен, но думаю, что на ЯФ выводятся отмодерированные теги. Если бы выводились сырые – было бы много, если бы выводились самые популярные – были бы другие. Там логичные и синтаксически правильные теги, значит это премодерация.

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:52


Ну м.б. просто меток с матом там не много, т.к. их чистят, или вовсе удаляют. А для генерации дерева меток ( оно на yandex слева ) используются только отмодерированные фото. И тогда, думаю все должно быть ок..

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 00:55


я когда просматривал yandex fotki, не нашел фоток с тупыми метками. Но данный способ вывода меток, возможен только при наличии большого количества фоток. А первоночально, возможно у них и были все разделы(метки) модерируемые.. хз-хз..

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 00:58


Присмотрелся. “Все метки” – это похоже на правду. А “Популярные метки” – премодерация всё-таки. Как бы там не было, метка “Я” отсутствует – не попадает под формат, а она очень популярна. И не только =)

Так что в ТЗ класса можно добавить: получение массива меток на входе ;-)

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 01:06


да хто его знает. Может там просто поп. метки от 2-х символов? =)

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 01:08


Ну, мы уже нашли как минимум три логичных способа нормальной реализации, какая разница как у них :-)

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 01:14


Кста, еще давно заметил, что у них в поп. метках присутствует город, а он берется по IP посетителя :)

И, возвращаясь к нашим баранам, во че нашел: http://chir.ag/tags/

Генерация облачков + неплохой слайдер на JS (не глючит, если при нажатой клавиши мыши вывести курсор за пределы браузера и там отпустить. maps.google есть чему поучиться! =) )

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 01:25


Красивая штука. Только нужны ли метки в разрезе времени? Мне кажется имеет смысл только сиюминутный срез, в этом и соль.

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 01:31


ну да. по времени нафиг. Хотя тому же yandex не помешалобы по времени разделить, ведь они выводят последние поп. за неделю. Хотя, не. Это уже излишество..

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 01:34


а, и еще, по поводу скрипта, можно же не использовать так много if – else при “определении класса для тега из его популярности”, а заменить на switch – case. Хотя ща посмотрел готовые скрипты, везде if – else. :)

 

Жилинcкий Владимир     .

Написано 16 июня 2008 года в 01:36


Switch кодеры по какой-то причине побаиваются – я давно заметил. Некоторые не умеют готовить, а некоторые утверждают, что влияет на скорость. Тут вполне можно и switch =)

 

Дмитрий Богданов     .

Написано 16 июня 2008 года в 01:38


а насчет поп. меток, скрипт http://chir.ag/tags/ просто-напросто, использует список стоп слов. И модерировать метки не придется. =)

 

rgbeast     .

Написано 17 июня 2008 года в 08:56


ИМХО, будет лучше выглядеть, если в качестве меры популярности использовать логарифм от числа заметок. Конструкцию if можно переписать в таком виде:

$classlist = array(‘smallest’,’small’,’medium’,’large’,’largest’);
$i = intval($percent/100*count($classlist));
$i = ($i=count($classlist))?(count($classlist)-1):$i);
echo $class = $classlist[$i];

 

rgbeast     .

Написано 17 июня 2008 года в 09:27


Кусок третьей строчки съелся. Имел в виду следующее:
$i = ($i<0)?0:( ($i>=count($classlist))?(count($classlist)-1):$i);

 

Игорь Бойко | Блог о заголовках     .

Написано 17 июня 2008 года в 09:39


В виде класса все смотрелось бы получше.

 

Жилинcкий Владимир     .

Написано 17 июня 2008 года в 11:48


Ну это же просто концепт, а не готовый солюшен =)
Принцип понятен, а дальше можно накрутить что угодно =)

 

Знахарь     .

Написано 20 июня 2008 года в 12:43


Очень полезная статья,я вот как раз собирался заняться этим .

 

Андрей     .

Написано 28 июня 2011 года в 02:28


Видел кто-нибудь облако тегов в виде планеты? Если да, то как этот плагин называется для WP?

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

You must be logged in to post a comment.

© 2007-2010 Блог интернет-разработчика, автор — Zhilinsky.ru.
При использовании информации ссылка на источник обязательна.