Como fazer um site exclusivo para o seu Twitter Updates
16 de maio de 2008 por chriscoyier »6 Comentários 
Twitter oferece uma API que você pode usar para recuperar informações de Twitter para seu próprio uso. Ainda mais fácil, eles oferecem um widget javascript que automaticamente usa essa API e retorna HTML simples de seus tweets recente.
Vamos criar um site exclusivo para atualizações de nosso Twitter utilizando esse widget.
1. Desenho no Photoshop
Criar um novo documento e preencha o fundo com uma cor cinza escuro. Eu usei # 222222 aqui.
Selecione uma cor mais clara do primeiro plano de cinza (# 545454). Criar uma nova camada no topo da sua camada de fundo. Selecione a ferramenta gradiente (sub-ferramenta do balde de tinta). Na barra superior, haverá algumas definições especificamente para a ferramenta de gradiente. Certifique-se que são definidas como "Foreground to Transparent" e "Radial".
Em sua nova camada, arraste um gradiente. Fazer isso em uma nova camada é melhor, porque então você pode arrastá-la e buscá-la do jeito que você gosta.
Agora, o Google ao redor e tentar encontrar um Twitter nice-como o pássaro azul. Abaixo está uma que eu comprei da iStockphoto. Você pode comprá-lo ou navegar em torno de algo que corresponde à personalidade de seu site.
Agora adicione o pássaro, algum texto e uma caixa para armazenar seus tweets. A fonte que usei não havia Agenda Negro. A caixa é apenas preencher uma de azul (# 0081e2) com 18% de opacidade e um traço branco 2px definido como o "blend mode Overlay".
Agora a coisa toda de exportação (File> Save for Web & Devices) e chamá-lo de "page-BG.jpg". Agora estamos prontos para construir o site!
2. Criação do Web Site Básico
Criar uma estrutura de arquivos HTML básico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Twitter Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> E o arquivo CSS de base. Usaremos a imagem que criamos como uma imagem de fundo para o corpo, preso ao canto superior esquerdo.
/* Twitter Page Chris Coyier http://css-tricks.com */ * { margin: 0; padding: 0; } body { font-size: 62.5%; font-family: Georgia, serif; background: url(images/page-bg.jpg) top left no-repeat #2f2e2c;} 3. Vá buscar o código da sua página do Twitter
Primeiro, vá Entrar no Twitter e ir para sua página inicial. Clique no botão "Receba as atualizações em seu site o botão".
Escolha "Outro".
Queremos que o código HTML / Javascript.
Escolha suas opções (como o número de atualizações que você quer), e copie o código que eles lhe dão.
Juntando a nossa página
Agora que você tem o código, você pode ir dentro e cole isso na seção do corpo do seu ficheiro index.html. Será algo parecido com isto:
<body> <div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/chriscoyier.json?callback=twitterCallback2&count=10"></script> </body> Se você carregar a página agora, ela irá funcionar, mas todas as atualizações serão completamente formatada como este:
Vamos corrigir isso através da adição ao nosso CSS:
#twitter_div { position: absolute; left: 186px; top: 99px; width: 376px; height: 360px; overflow: auto; } ul#twitter_update_list { list-style: none; font-size: 14px; } ul#twitter_update_list li { margin-bottom: 10px; padding: 10px; color: #7a8a99; background: url(images/transpBlue.png); } a { color: #96997a; } E aí temos isso! A pretty cool e único olhar Twitter página de atualizações.
Muito bom tutorial eu sempre quis atualizar minha página do Twitter, mas nunca tenho tempo para aprendê-la completamente, isso vai certamente me ajudar a fazer isso agora.
Muito bom, Chris. Não é algo que eu estou tão interessado em fazer (eu uso o Twitter ocasionalmente), mas foi muito bom ver o processo de iniciação.
Isto é incrível! No entanto, o que deve ser as dimensões do documento original do Photoshop?
Eu tentei mas não funciona.
Eu não sei onde colocar o código que as entregas Css.
Eu poderia indicar mais detalhes por favor.
Obrigado.
Obrigado por este tutorial!
Isso é bom!