Como criar caixa com seus tweets recentes

Como Fazer Um Site >> Add-ons e Suplementos >> Como criar caixa com seus tweets recentes

Existe um API que pode ser usado para ir buscar informação ao twitter. Com um pouco de código javascript podemos fazer um widget para o nosso site que usa aquele API e devolve HTML simples para mostrar os nossos tweets recentes.

Vamos então ver como podemos criar uma caixa com os nossos tweets recentes usando aquele API:

Crie uma imagem do twitter que será usada na imagem de fundo da sua caixa de tweets recentes. Esta imagem é que vai dizer aos leitores que o conteúdo da caixa vem do twitter. Escolha por isso uma imagem apelativa. No meu caso usei uma imagem com um tamanho de cerca de 220 de largura, por 60 pixels de altura, que resultou bem para a caixa que eu defini.

Coloque o seguinte código no seu blog ou site e substitua "comofazerumsite" pela sua ID do twitter:
<div id="twitter_div"><ul id="twitter_update_list"></ul>
<a href="http://twitter.com/comofazerumsite" class="twitter-link">Siga o Twitter</a></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/comofazerumsite.json?callback=twitterCallback2&count=3"></script>
Na última linha a instrução "count=3" define que serão mostrados 3 tweets. Podemos alterar para o número de tweets que desejarmos.
Se não fizer mais nada os posts recentes do twitter já aparecem na sua página, mas desorganizados, sem formatação, sem uma aparência agradável.
Temos então que configurar a div "twitter_div" e o elemento ul. Para isso usamos CSS que é o próximo passo.

Coloque o seguinte código entre as tags <head> e </head> do seu documento html alterando o endereço da imagem:
<style type="text/css">

#twitter_div {
align: center;
margin: 60px 15px 15px 15px;
width: 495px;
padding: 45px 30px 10px 62px;
background-image: url('http://www.seusite.com/imagens/twitter.jpg');
background-position: 22px 5px;
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica;
border: 1px solid #0CF;
}

#twitter_div ul li {
color: #000;
list-style: none;
font-size: 11px;
text-align: left;
padding: 7px;
border-bottom: 1px dotted #666;
}

#twitter_div ul li a {
text-decoration: underline;
color: #d22929;
}

#twitter_div ul li a:hover {
text-decoration: none;
color: #000;
}

.twitter-link {
padding: 0px;
display:block;
text-align:right;
font-size: 10px;
font-color: #d22929;
}

</style>

Repare que esta é apenas uma formatação possível que foi optimizada por mim para uma caixa com 495px de largura. Tem um fundo branco, um contorno azul claro, letras a preto, e links a vermelho.

Faça as alterações que precisar a este código css, defina as suas próprias configurações, para obter uma caixa de posts recentes do twitter que certamente se vai encaixar de uma forma perfeita no seu site ou blog, e será única e exclusiva.

Registro de Dominio:

Na Namecheap pode comprar domínios a preços acessíveis. Serviço de privacidade é gratuito.

Alojamento para seu site:

Uma das empresas de alojamento mais conhecidas e mais procuradas por quem faz sites:

Criar Site Grátis:

Como fazer um site no WebNode

Como criar um site no Wix

Como fazer um site no Weebly

Fazer site grátis no Jimdo

Como montar um site no Yola

Loja Virtual Grátis:

Como criar uma loja virtual grátis

Loja virtual grátis para Blogger