Colocando Twitter no seu site/blog

Para usar as últimas "tweetadas" como atualização, siga as instruções abaixo:
  1. Coloque o seguinte código no seu blog ou site e substitua "InfoWebit" pela sua ID do twitter: 
    <div id="twitter_div"><ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/InfoWebit" 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/InfoWebit.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.

  2. Coloque o seguinte código, CSS, entre as tags <head> e </head> do seu documento html. No blogger você pode optar por ir nos elementos da página, clicar em "designer de modelo do blogger"/"avançado"/"adicionar css", e adicionar o código no espaço em branco. 

#twitter_div {
        width: 250px; /* largura */
        background: #fff; /* cor do fundo */
        align: center;
        margin: 10px;
        padding: 5px;
        background-position: 22px 5px;
        background-repeat: no-repeat;
        font-family: Verdana, Arial, Helvetica; 
        border: 1px solid #0CF; /* cor da borda */
        }
        #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: #000; /* cor do link */
        }
        #twitter_div ul li a:hover {
        text-decoration: none;
        color: #000; /* cor do link ao passar o mouse */
        }
        .twitter-link {
        padding: 0px;
        display:block;
        text-align:right;
        font-size: 10px; 
        font-color: #000;
        }
Só precisa seguir os comandos e fazer as atlerações e você terá as últimas "tweetadas" no seu site ou blog.

Update:
Veja também como adicionar uma caixa fan box do twitter, igual a do blog em:
Até mais
Marcadores: ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)