Como criar caixa com seus tweets recentes

Como Fazer Um Site >> Extras Para o Seu Site >> 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.

twitter-updates

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

  1. 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.

  2. 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://api.twitter.com/1/statuses/user_timeline.json?screen_name=comofazerumsite&include_rts=true&count=3&callback=twitterCallback2"></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.

  3. 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:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.