Aprenda a criar um widget PHP para o Twitter – Parte II

Na primeira parte deste artigo, trabalhámos a API do Twitter, criámos uma classe e importamos os últimos tweets. Agora é altura de colocarmos o conteúdo no seu lugar, ou seja, nos templates HTML. Isto é bastante simples de fazer, utilizando os 2 templates que definimos anteriormente: O template do widget, e o template do tweet. Se pretende criar um widget PHP para o Twitter, não perca a continuação deste artigo!

Este tutorial é a primeira parte de uma série de artigos, pelo que se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

ANÁLISE DOS TEMPLATES

No artigo anterior definimos 2 templates: O template do widget ($WidgetTemplate) e o template do tweet ($TweetTemplate).

No template do widget, o código {TWEETS} define onde o template do tweet ($TweetTemplate) irá aparecer.

$t->WidgetTemplate =
	'<div>' .
	'<img src="{profile_image_url}" />' .
	'<strong>{name}</strong>'
	'<ul>{TWEETS}</ul>' .
	'</div>';
$t->TweetTemplate =
	'<li>Tweet {statuses_count}: {text} {created_at}</li>';

O código necessita de extrair todos os {named-values}, depois veriica se o valor existe nos dados do Twitter e substitui de acordo com o especificado. Assim, é necessário criar uma função (privada) para o fazer:

private function ParseStatus($data, $template) {

O ParseStatus aceita 2 valores:

$data que é uma secção do formato JSON para um tweet individual
$template que é o template HTML (tanto o $WidgetTemplate como o $TweetTemplate irão ser tratados)

Depois, o primeiro passo é localizar todos os {named-value} utilizando uma expressão regular:

preg_match_all('/{(.+)}/U', $template, $m);

a função preg_match() devolve um array com dois elementos. O primeiro é um array que contém todas as strings {named-value} e o segundo é outro array que contém os caracteres encontrados nas expressões regulares, como por exemplo “named-value” (sem as aspas).

É possível fazer um loop através de cada valor para determinar se está nos dados do Twitter ou não. De realçar que poderá existir dentro da secção “user” (como um array sub-associado)

for ($i = 0, $il = count($m[0]); $i < $il; $i++) {
	$name = $m[1][$i];
	// Twitter encontrou o valor?
	$d = false;
	if (isset($data[$name])) {
		$d = $data[$name];
	}
	else if (isset($data['user'][$name])) {
		$d = $data['user'][$name];
	}

No final do código, $d ou é falso ou um valor do tweet que tem uma correspondência. Agora podemos utilizá-lo dentro de str_replace(), mas há dois casos especiais que necessitam da nossa atenção primeiro:

“text” é a string do tweet que contém os URL, @ids ou #hashtags. É necessário convertê-los para aquilo que necessitamos, então iremos pegar nesses dados e passá-los para uma nova função chamada ParseTwitterLinks().
“created_on” é a data/hora em que o tweet foi criado/enviado. As datas também necessitam de formatação, então iremos introduzir o valor dentro de uma string {DATE:…}.

		// substituir dados
		if ($d) {
			switch ($name) {
				// tratar os estados dos links
				case 'text':
					if ($this->ParseLinks) {
						$d = $this->ParseTwitterLinks($d);
					}
					break;
				// Data do tweet
				case 'created_at':
					$d = "{DATE:$d}";
					break;
			}
			$template = str_replace($m[0][$i], $d, $template);
		}
	}
	// end of loop
	return $template;
}
// Final do ParseStatus

PROCESSAMENTO DE LINKS

Agora necessitamos de uma função privada ParseTwitterLinks() para fazer o processamento dos links nos tweets. Primeiro passamos uma string simples:

private function ParseTwitterLinks($str) {

Depois será necessário adicionar alguma magia com uma expressão regular. Primeiro iremos procurar os URL, para o caso não nos interessa se estão bem formatados, apenas se começam com http e contenham caracteres válidos:

$str = preg_replace('/(https{0,1}:\/\/[\w\-\.\/#?&=]*)/', '<a href="$1">$1</a>', $str);

Agora procuramos por @ids e substituímos pelo link apropriado:

$str = preg_replace('/@(\w+)/', '@<a href="http://twitter.com/$1" class="at">$1</a>', $str);

Finalmente, procuramos as #hashtags usando um link de pesquisa do twitter:

$str = preg_replace('/\s#(\w+)/', ' <a href="http://twitter.com/#!/search?q=%23$1" class="hashtag">#$1</a>', $str);

RENDERIZAR O WIDGET

Já temos todo o código necessário para fazer a conversão do feed para um widget HTML. Isto é feito com um novo método, público, chamado Render(). Primeiro capturamos os dados do feed e verificamos se foi devolvido um resultado:

$json = $this->FetchFeed();
if ($json) {

Agora definimos 2 strings para o widget e um conjunto de todas as actualizações de estado:

$widget = ' ';
$status = ' ';

Com um loop, podemos verificar todos os tweets:

for ($t = 0, $tl = count($json); $t < $tl; $t++) {

Se este for o primeiro tweet, iremos substituir os valores para o $WidgetTemplate. Isto só será feito uma vez:

if ($t == 0) {
			$widget .= $this->ParseStatus($json[$t], $this->WidgetTemplate);
		}

Substituímos os valores dentro do $TweetTemplate pelos valores de cada tweet:

$status .= $this->ParseStatus($json[$t], $this->TweetTemplate);

Terminamos o loop e criamos uma string $render. Esta contém o html do $widget mas os {TWEETS} são substituídos com o HTML $status:

$render = str_replace('{TWEETS}', $status, $widget);

Assumindo que estamos a utilizar o $WidgetTemplate e o $TweetTemplate, o HTML resultante será algo como isto:

<div>
<img src="http://escolacriatividade.com/imagem.png" />
<strong>Escola Criatividade</strong>
<ul>
<li>
Tweet 9:
Visite <a href="http://escolacriatividade.com">http://escolacriatividade.com</a>
{DATE:Fri Jun 15 10:10:18 +0000 2010}
</li>
<li>
Tweet 8:
Olá @<a href="http://twitter.com/despinha" class="at">despinha</a>
{DATE:Fri Jun 15 10:05:01 +0000 2011}
</li>
<li>
Tweet 7:
We love  <a href="http://twitter.com/#!/search?q=%23javascript" class="hashtag">#javascript</a>
{DATE:Fri Jun 15 10:00:00 +0000 2010}
</li>
</ul>
</div>

ESTÁ A ACOMPANHAR?

Tem alguma sugestão ou dúvida sobre o artigo? Se estiver com dificuldades em acompanhar o artigo através deste sistema passo a passo, poderá obter o código completo aqui e observar tudo em conjunto. É justo, nem toda a gente gosta de trabalhar dessa maneira, passo a passo. Participe e comente o artigo!

Até Já!