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:

Endereço 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!

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:

Endereço de Email: 

 

Até Já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz