A utilização do Twitter tem subido imenso nos últimos tempo, principalmente desde que foi lançada a língua Portuguesa, fazendo com que muitos utilizadores web aderissem a esta rede social. Neste artigo o alvo são os utilizadores web que possuem um site pessoal e que gostariam de divulgar os seus tweets favoritos ao mundo. É pouco provável que você ainda não tenha ouvido falar sobre o Twitter, mas caso não saiba do que estamos a falar, o Twitter é uma rede social de microblogging que permite aos usuários enviar e receber atualizações pessoais de outros contatos (em textos de até 140 caracteres, conhecidos como “tweets”), através do website, por SMS e por softwares específicos para as várias plataformas, incluíndo Windows, Mac OS, Android e iOS. Os tweets são exibidos no perfil de um usuário em tempo real e também enviadas a outros usuários que sejam seus seguidores. As atualizações de um perfil ocorrem por meio do site do Twitter, por RSS, por SMS ou um programa especializado como referimos acima. Assim, para si que utilizar esta rede social, apresentamos-lhe neste artigo Como divulgar os seus Tweets favoritos usando PHP e jQuery.

Não perca alguns artigos relacionados com o Twitter:

twitter

1. CRIAR O HTML

Para mostrar os seus tweets favoritos ao mundo, é necessário ter um sitio para o fazer. Assim necessitamos de criar um layout em um documento web para inserirmos os dados dos tweets. O primeiro passo é criar o HTML dentro de um ficheiro PHP que será o nosso ficheiro principal. Crie um ficheiro PHP e insira o seguinte código:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Divulgue os seus tweets favoritos ao mundo com PHP e jQuery</title>
        <link rel="stylesheet" href="css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

		<div id="container">
	        <?php $tweets->generate(4);?>
        </div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="js/jquery.splitlines.js"></script>
        <script src="js/script.js"></script>

    </body>
</html>

Tirando partido do plugin Splitlines, conseguiremos introduzir cada um dos tweets em uma div diferente, facilitando assim a estilização dos tweets, podendo aplicar algumas propriedades que de outra forma seria difícil aplicar. O generate() define a quantidade de tweets que você quer mostrar, altere esse número de acordo com a sua preferência.

Para a obtenção dos tweets é necessário criar uma class em PHP que irá fazer esse trabalho automaticamente, criando ainda a markup de cada tweet.

2. CRIANDO A CLASS PHP

A class PHP é o que vai fazer algum trabalhinho “sujo” por nós. Este código irá fazer a ligação ao Twitter para obter os seus tweets favoritos e de seguida criar a markup para os mostrar no seu navegador. Assim, crie o ficheiro listadetweets.class.php e insira o seguinte código:

<?php

class ListaDeTweets{
	private $username;
	const cache = "cache_tweets.ser";

	public function __construct($username){
		$this->username = $username;
	}

	public function get(){

		$cache = self::cache;
		$tweets = array();

		if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

			$tweets = unserialize(file_get_contents($cache));
		}
		else{

			$tweets = json_decode($this->fetch_feed());
			file_put_contents($cache,serialize($tweets));
		}

		if(!$tweets){
			$tweets = array();
		}

		return $tweets;
	}

	public function generate($limit=10, $className = 'tweetFavList'){

		echo "<ul class='$className'>";

		$tweets = array_slice($this->get(),0,$limit);

		foreach($tweets as $t){

			$id			= $t->id_str;
			$text		= self::formatTweet($t->text);
			$time		= self::relativeTime($t->created_at);
			$username	= $t->user->screen_name;
			$retweets	= $t->retweet_count;

			?>

			<li>
				<p><?php echo $text ?></p>
				<div class="info">
					<a href="http://twitter.com/<?php echo $username ?>" class="user"
						title="Ir para o Twitter de <?php echo $username?>"><?php echo $username ?></a>

					<?php if($retweets > 0):?>
						<span class="retweet" title="Retweets"><?php echo $retweets ?></span>
					<?php endif;?>

					<a href="http://twitter.com/<?php echo $username,'/status/',$id?>"
                    	class="date" target="_blank" title="Partilhado à <?php echo $time?>"><?php echo $time?></a>
				</div>

                <div class="divider"></div>

            </li>

            <?php
		}

		echo "</ul>";
	}

	private function fetch_feed(){
		return file_get_contents("http://api.twitter.com/1/favorites/{$this->username}.json");
	}

	private static function relativeTime($time){

		$divisions	= array(1,60,60,24,7,4.34,12);
		$names		= array('segundo','minuto','hora','dia','semana','mês','ano');
		$time		= time() - strtotime($time);

		$name = "";

		if($time < 10){
			return "agora";
		}

		for($i=0; $i<count($divisions); $i++){
			if($time < $divisions[$i]) break;

			$time = $time/$divisions[$i];
			$name = $names[$i];
		}

		$time = round($time);

		if($time != 1){
			$name.= 's';
		}

		return "$time $name atrás";
	}

	private static function formatTweet($str){

		$str = preg_replace(
			'/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/i',
			'<a class="link" href="$1" target="_blank">$1</a>',
			$str
		);

		$str = preg_replace(
			'/(\s|^)@([\w\-]+)/',
			'$1<a class="mention" href="http://twitter.com/#!/$2" target="_blank">@$2</a>',
			$str
		);

		$str = preg_replace(
			'/(\s|^)#([\w\-]+)/',
			'$1<a class="hash" href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>',
			$str
		);

		return $str;
	}
}

?>

Uma vez criada a class PHP necessária, é altura de a incluir no ficheiro PHP que criámos no primeiro passo. Assim, adicione o seguinte código antes da linha <!DOCTYPE html>

<?php

require "listadetweets.class.php";

$tweets = new ListaDeTweets('nome_de_utilizador');

?>

Onde está nome_de_utilizador deverá ser substituído pelo seu nome de utilizador do Twitter, a fim de definir onde ir buscar os tweets favoritos.

3. INTRODUZIR O JQUERY

jQuery é uma parte integrante deste processo, e uma vez que contamos com a preciosa ajuda do plugin splitlines, apenas temos de criar um loop e chamar o plugin splitlines. Crie o ficheiro script.js e insira o seguinte código:

$(function(){
	var width = $('ul.tweetFavList p').outerWidth();

	// Looping through the p elements
	// and calling the splitLines plugin

	$('ul.tweetFavList p').each(function(){
		$(this).addClass('sliced').splitLines({width:width});
	});
});

4. ESTILIZAÇÃO

A estilização do documento é algo que vai fazer com que este processo de mostrar ao mundo os seus tweets favoritos se torne visualmente atrativo para quem visita o seu website. Assim crie um ficheiro style.css e insira o seguinte código:

html{
	background-color: #CFF;
}

body{
	color:#fff;
	padding:10px;
	min-height:600px;
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}

#container{
	padding:200px 0 140px 0;
}

ul.tweetFavList{
	margin:0 auto;
	width:700px;
	list-style:none;
}

ul.tweetFavList p{
	background-color: #999;
	color: #000;
	display: inline;
	font-size: 28px;
	line-height: 2.25;
	padding: 10px;
}

ul.tweetFavList a.link		{ color:#F00;}
ul.tweetFavList a.mention	{ color:#960;}
ul.tweetFavList a.hash		{ color:#33F;}

ul.tweetFavList p.sliced{
	background:none;
	display:block;
	padding:0;
	line-height:2;
}

ul.tweetFavList li p div{
	background-color: #999;
	box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
	display: inline-block;
	margin-bottom: 6px;
	padding: 0 10px;
	white-space: nowrap;
}

ul.tweetFavList .info{
	overflow: hidden;
	padding: 15px 0 5px;
}

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
	float:left;
	padding:4px 8px;
	color:#fff !important;
	text-decoration:none;
	font-size:11px;
	box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
	background-color:#f00;
}

ul.tweetFavList .retweet{
	background-color:#960;
	cursor:default;
}

ul.tweetFavList .date{
	background-color:#33f;
}

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	background-color: #000;
	border-radius: 50% 50% 50% 50%;
	height: 12px;
	margin: 60px auto 80px;
	width: 12px;
	position:relative;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
	margin:0;
	position:absolute;
	content:'';
	top:0;
	left:-40px;
}

ul.tweetFavList .divider:after{
	left:auto;
	right:-40px;
}

ul.tweetFavList li:last-child .divider{
	display:none;
}

Você poderá alterar as cores e estilização introduzida neste ficheiro CSS de acordo com a sua preferência, ajustando as cores, tamanho do texto, posição entre outros elementos, assemelhando-se assim ao esquema que você utiliza em seu website. De notar que se você pretender mostrar os tweets favoritos de outro utilizador que não você, isso é possível, bastanto introduzir o nome do utilizador em questão na linha $tweets = new ListaDeTweets(‘nome_de_utilizador’); substituindo o nome de utilizador por aquele que você pretender. Este artigo foi baseado no tutorial da TutorialZine, e o plugin splitlines utilizado é gratuito. Este artigo poderá ser utilizado de várias formas no seu website, podendo criar uma secção com testemunhos no twitter relativamente ao seu trabalho, dar realce a tweets que façam parte da sua inspiração, ou simplesmente realçar os seus próprios tweets que acha relevante mostrar em uma determinada página. Seja criativo, utilize de acordo com o que necessitar!

Abraço!

 

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!

Templates Incríveis para seus Projetos:

  • Cube+ | One Page Parallax Joomla Theme
  • UniCourse Responsive Moodle Theme
  • ZT Two Joomla Creative Template
  • EXCEPTION - Responsive Business Drupal Theme
  • deKor - Responsive Interior Joomla Template
  • Premium Layers: Joomla vCard & Resume Template
  • Neko - Responsive Bootstrap App Landing Page
  • Meetup | Conference & Event Joomla Template
  • MegaShop - Multipurpose Responsive Joomla Template
  • Jarvis - Onepage Parallax Joomla Template
  • Real Estate – The Functional Real Estate Joomla Te
  • Trizzy - Multi-Purpose eCommerce Drupal Theme

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



Comentários dos Alunos

Comente o Artigo!

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

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