Aprendi a customizar as atualizações do twitter no site tweet.seaofclouds.com, e adaptei os códigos para Blogs, Tumblr e WordPress. Entrando neste site, lá  em baixo, você encontra os arquivos necessários para a customização, disponíveis para download.

 

Baixando um dos arquivos, você vai encontrar um documento chamado: jquery.tweet.

Para quem sabe alguma coisa de programação, abrindo o documento no seu notepad++ ou dreamweaver você vai encontrar logo no inicio esta parte:

auto_join_text_default  ” I said, ”
auto_join_text_ed ” I “,
auto_join_text_ing  ” I am “,
auto_join_text_reply  ” I replied to ”
auto_join_text_url  ” I was looking at ”

 

Original

 

O que vem entre aspas (“”) você pode modificar,  são os seus tweets, retweets, respostas dos tweets, que você pode customizar do seu jeito.

 

 

nomes-664

 

Caso você não saiba editar, sem pânico, eu editei e fiz o upload dele sem as frases.

Show Code a ser usado para este estilo de atualização será:

$(“.tweet”).tweet({

 

Vamos aos códigos: entre <head> e </head> você vai adicionar este código:

<script language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” type=”text/javascript”></script>

<script language=”javascript” src=”http://static.tumblr.com/hqb6dzr/D8Ymlmu7a/jquery.tweet” type=”text/javascript”></script>

<script type=’text/javascript’>
jQuery(function($){
$(“.tweet”).tweet({
username: “marcozerorec”,
join_text: “auto”,
avatar_size: 32,
count: 5,
loading_text: “loading tweets…”
});
});
</script>

 

Este primeiro JQuery foi feito pelo site, não precisa modificar nada.

<script language=”javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” type=”text/javascript”></script>

Este segundo, foi o que eu modifiquei e as frases.

<script language=”javascript” src=”http://static.tumblr.com/hqb6dzr/D8Ymlmu7a/jquery.tweet” type=”text/javascript”></script>

username: seu twitter
avatar_size: tamanho do avatar, caso não queira avatar deixe 0 (zero)
count: numero de tweets que vão aparecer

 

count

 

loading_text: é o texto que vai aparecer enquanto estiver carregando seus tweets

 

loading

 

Entre <style>  e </style>, que é seu CSS, você vai adicionar este código:

/* Twitter by seaofclouds.com*/
.tweet, .query {text-indent: 4px;  font-family: ‘calibri’;  font-size: 11px;  color: #8b8b8b;}

.tweet_list {list-style: none; margin: 0px; padding: 0;overflow-y: hidden;  -webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; width:230px;}

.tweet_list li {background-color: #575757; overflow-y: auto;overflow-x: hidden;padding: 0.5em;list-style-type: none; margin-bottom: 1px;}

.tweet_list .tweet_even {background-color: #3f3f3f;}

.tweet_list li a {color: #797979;}

.tweet_list li a:hover {color: #959595;}

.tweet_list .tweet_avatar {margin-left: -5px; margin-right: 4px; float: left;}

.tweet_list .tweet_avatar img { border: 2px solid #44443f; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; vertical-align: middle;  box-shadow: 1px 2px 2px rgba(0,0,0,0.05);}

/* Fim*/

 

 .tweet, .query: modifique a fonte e o tamanho.

.tweet_list li / .tweet_list .tweet_even: modifique as cores do background (fundo) em background-color.

.tweet_list li: troque as cores dos links

.tweet_list .tweet_avatar img:  mude a cor da borda do seu avatar (border: 2px solid #44443f;) |  -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  – Borda arredondada.

 

Estilização

 

Onde você vai querer que suas atualizações apareçam, coloque este código:

<div class=”tweet”></div>

Não mude nada, não vai funcionar se modificar. No final, suas atualizações ficaram assim:

 

Primeira

 

Cuidado ao customizar as atualizações, qualquer dúvida deixe nos comentários.

 

Share.

About Author

Marco Zero

Post escrito por mais de um colunista, um parceiro convidado, ou um artigo enviado por um de nossos leitores. Para colaborar conosco, ou sugerir alguma pauta, basta enviar um e-mail para contato@marcozero.rec.br.


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/marcozer/public_html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273