Aprenda a Criar uma Nuvem de Tags (Tag Cloud) com php

Esse recurso esta sendo muito utilizado na web, e é muito útil, pois reuni as mais importantes tags, permitindo que os usuários encontrem informações mais úteis, relevantes e com maior rapidez. E ainda fornece uma navegação alternativa e intuitiva para os usuários.

Para criar o Tag Cloud ou nuvem de tag utilizaremos a classe em php TagCloud Maker, criada pelo Cal Evans (calevans.com) sobre a Licença GPL 2.0. Essa classe faz o processamento de todas as tag, selecionando as mais repetidas e assim gerando a nuvem de tag. A TagCloud Maker mostrar as tag mais importantes (repetidas) com tamanhos diferentes e informando a quantidades de vezes que ela se repete. Mais para ela funcionar necessita de uma array com as tags. Essa array pode ser criada manualmente, onde você pode digitar as tags, ou pode se gerada por um banco de dados.

Download da Classe TagCloud Maker zipada e já com uma página de exemplo.

Criando array para utilização da TagCloud Maker

Para criar a array manualmente, basta apenas substituir a palavra Tag pela tag que você deseja, e acrescentar mais quantas tags você quiser.

$Array = array();
$ Array [ ]='Tag1';
$ Array [ ]=' Tag1';
$ Array [ ]='Tag2';
$ Array [ ]=' Tag2';
$ Array [ ]='Tag3';

Para criar a array através de um banco de dados vamos utilizar o código abaixo:

$hostname_conn = "servidor"; /*Endereço do servidor MySQL */
$database_conn = "database"; /* Nome do banco de dados */
$username_conn = "usuario"; /* Usuario do banco de dados */
$password_conn = "senha"; /* senha do banco de dados */
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_conn, $conn);
$query_rsTagCloud = "SELECT tag FROM tags";
$rsTagCloud = mysql_query($query_rsTagCloud, $conn) or die(mysql_error());
$row_rsTagCloud = mysql_fetch_assoc($rsTagCloud);
$totalRows_rsTagCloud = mysql_num_rows($rsTagCloud);
$Array = array();
do {
$tag = $row_rsTagCloud['tag'];
$ Array []=$tag;
} while ($row_rsTagCloud = mysql_fetch_assoc($rsTagCloud));

Instalação da classe TagCloud Maker

Agora como já temos as tags inseridas em uma Array vamos instalar o TagCloud Marker

<?php
require_once('TagCloud.php'); /* Localização da Classe */
$o = new Cal_TagCloud($Array); /* Chama a classe passando a array com as tag */
$o->setSpacer(" ") /* Elemento que vai separar as tag */
->setMaxTags(25) /* Qunatidade de Tags que serão mostrada */
->setShowScore('score')
->setLink('http://www.marceloramos.blog.br/tutorial/buscar_tag.php?tag=%s') /* Paginá que realizará a busca das tag */
->buildCloud();
?>
<div id="tag_cloud">
<?php echo $o->outputCloud; ?>
</div>

Para exibir as tags em tamanho diferentes basta apenas inserir essa folha de estilo, a classe vai selecionar automaticamente os estilos para cada tag exibida

/* Nuvem de Tag */
.tagcloud_1 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .3;
font-size: 8pt;
line-height: 18pt;
}
.tagcloud_2 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .4;
font-size: 9pt;
line-height: 18pt;
}
.tagcloud_3 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .4;
font-size: 10pt;
line-height: 18pt;
}
.tagcloud_4 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .5;
font-size: 11pt;
line-height: 18pt;
}
.tagcloud_5 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .5;
font-size: 12pt;
line-height: 18pt;
}
.tagcloud_6 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .6;
font-size: 13pt;
line-height: 18pt;
}
.tagcloud_7 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .7;
font-size: 14pt;
line-height: 18pt;
}
.tagcloud_8 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .8;
font-size: 15pt;
line-height: 18pt;
}
.tagcloud_9 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
opacity: .9;
font-size: 16pt;
line-height: 18pt;
}
.tagcloud_10 {
font-family: "Trebuchet MS", Verdana, Arial, Geneva, Tahoma, Helvetica, sans-serif;
font-size: 17pt;
line-height: 18pt;
}

Qualquer dúvida envie um email para marcelo@marceloramos.blog.br ou acesse meu blog www.marceloramos.blog.br

Escrito por Marcelo Ramos on abril 17, 2008. Arquivado em PHP. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

3 respostas a Aprenda a Criar uma Nuvem de Tags (Tag Cloud) com php

  1. Opa…
    Marcelo bom dia.
    seu link ai ta quebrado chefia.. tem como dispor novamente o arquivo?!
    obrigado.

  2. è… link ta quebrado aruma ai quem sabe pode ser util para alguem que nao intende muito :)

  3. muito bom o artigo parabens.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>