Hvordan lage en unik Website Your Twitter Updates
16 mai 2008 av chriscoyier · 6 Kommentarer 
Buzz This Post 
Digg This Post 
Reddit 
Snuble This Post
Twitter tilbyr et API som du kan bruke til å trekke informasjon fra Twitter for din egen bruker. Enda enklere, har de en liten javascript widget som automatisk bruker denne APIen og returnerer enkel HTML i dine siste tweets.
La oss lage en unik nettsted for våre Twitter oppdateringer utnyttet denne widgeten.
1. Design i Photoshop
Opprett et nytt dokument og fyll bakgrunnen med en mørk grå farge. Jeg brukte # 222222 her.
Velg en lysere grå forgrunnsfargen (# 545454). Lag et nytt lag på toppen av bakgrunnslaget. Velg gradient verktøyet (sub-verktøyet for maling bøtte verktøyet). I den øverste linjen vil det være noen innstillinger spesielt for gradient verktøyet. Kontroller at de er satt til «Forgrunn til gjennomsiktig" og "Radial".
På nytt lag, drar ut en gradient. Å gjøre dette på et nytt lag som er best, fordi da kan du dra den rundt og få det akkurat hvordan du liker.
Nå Google rundt og prøve å finne en fin Twitter-lignende Blue Bird. Nedenfor er en jeg kjøpte fra iStockphoto. Du kan kjøpe den til eller surfer rundt etter noe som samsvarer med områdets personlighet.
Nå legger fuglen, til litt tekst, og en boks hold tweets. Fonten jeg brukte det var Agenda Black. Boksen er bare et fyll av blå (# 0081e2) på 18% dekkevne og en 2px hvit slag satt til "Overlay" Blend Mode.
Nå eksporterer hele greia (Fil> Lagre for Web & Devices) og kaller det "side-bg.jpg". Nå er vi klare til å bygge nettsted!
2. Opprette Basic Webpage
Lag en enkel HTML-fil struktur:
<!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> Og den grunnleggende CSS-fil. Vi vil bruke bildet vi opprettet som et bakgrunnsbilde for kroppen, stakk til øvre venstre.
/* 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. Hent koden fra din Twitter-side
Først går du logge deg på Twitter og gå til hjemmesiden din. Klikk på "Få oppdateringer på nettstedet knappen".
Velg "Annet".
Vi ønsker at HTML / JavaScript-kode.
Velg ditt valg (som hvor mange oppdateringer du vil), og deretter kopiere ut koden de gir deg.
Sette sammen vår side
Nå som du har koden, kan du gå inn og lim den inn i body-delen av index.html filen. Det vil se omtrent slik ut:
<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> Hvis du laster inn siden nå, vil det fungere, men alle oppdateringene vil være helt unstyled slik:
La oss løse det ved å legge til våre 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; } Og der har vi det! En ganske kul og unik ser Twitter oppdateringer siden.
Ganske bra tutorial jeg har alltid ønsket å oppdatere min Twitter-side, men fikk aldri tid til å lære det gjennom, vil dette definitivt hjelpe meg gjøre det nå.
Very nice, Chris. Ikke noe jeg alle som er interessert i å gjøre (jeg bruker Twitter noen ganger), men det var flott å se opplæringen prosessen.
Dette er kjempebra! Men hva skal være dimensjonene av det opprinnelige Photoshop-dokument?
Jeg prøvde, men det fungerer ikke.
Jeg vet ikke hvor du skal plassere koden som Css leveranser.
Jeg kan tyde på nærmere please.
Takk.
Takk for denne opplæringen!
Det er nice!