Hoe om een unieke website voor uw Twitter-updates maken
16 mei 2008 door chriscoyier · 6 Reacties
Twitter biedt een API die u kunt gebruiken om informatie te trekken van twitter voor je eigen gebruik. Nog eenvoudiger, bieden ze een beetje javascript widget die automatisch gebruik maakt van deze API en keert eenvoudige HTML van uw recente tweets.
Laten we een unieke website voor onze Twitter updates gebruik te maken van deze widget te ontwerpen.
1. Design in Photoshop
Maak een nieuw document en vul de achtergrond met een donkergrijze kleur. Ik gebruikte # 222222 hier.
Selecteer een lichtere grijze voorgrondkleur (# 545454). Maak een nieuwe laag op de top van je achtergrond laag. Selecteer het gereedschap Verloop (sub-tool van de verf emmer tool). In de bovenste balk zal er specifiek worden een aantal instellingen voor de gradient tool. Zorg ervoor dat ze zijn ingesteld op 'Voorgrond naar transparant "en" Radial ".
Op uw nieuwe laag, sleept u een gradiënt. Door dit te doen op een nieuwe laag is het beste want dan kun je slepen rond en krijgen zoals u dat wilt.
Nu Google rond en proberen een leuke Twitter-achtige Blue Bird te vinden. Hieronder is een die ik gekocht van iStockPhoto. Je kan het kopen of bladeren rond voor iets dat van uw site persoonlijkheid past.
Voeg nu de vogel, wat tekst, en een box om je tweets te houden. Het lettertype heb ik er was Agenda Black. De doos is gewoon een vulling van blauw (# 0081e2) op 18% dekking en een 2px witte streep ingesteld op de "Overlay" blend mode.
Nu exporteren de hele zaak (Bestand> Opslaan voor web en apparaten) en noemen het "page-bg.jpg". Nu zijn we klaar om de website te bouwen!
2. Het maken van de Basic webpagina
Maak een basis HTML-bestand structuur:
<!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> En de basis CSS-bestand. We gebruiken het beeld dat we gemaakt als een achtergrondafbeelding voor het lichaam, vast aan de linker bovenhoek.
/* 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. Haal de code van je Twitter-pagina
Ga eerst inloggen op Twitter en ga naar je homepage. Klik op de "Get updates op uw site button".
Kies "Andere".
We willen dat de HTML / Javascript-code.
Kies uw opties (zoals hoeveel updates je wilt), en kopieer de code die ze u geven.
Het samenstellen van onze pagina
Nu dat je de code hebt, kunt u naar binnen en plak die in het lichaam sectie van je index.html bestand. Het ziet er ongeveer zo uit:
<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> Als je nu de pagina laden, zal het werken, maar alle updates wordt volledig unstyled als volgt uit:
Laten we vaststellen dat door het toe te voegen aan onze 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; } En daar hebben we het! Een pretty cool en uniek op zoek naar Twitter-updates pagina.
Een heel goede tutorial heb ik altijd wilde mijn twitter pagina bij te werken, maar kreeg nooit de tijd om het te leren door, zal dit zeker helpen me doen nu.
Zeer mooi, Chris. Niet iets wat ik al die geïnteresseerd zijn in het doen (ik gebruik Twitter af en toe), maar het was geweldig om de tutorial te zien.
This is awesome! Maar wat moet worden de afmetingen van het originele Photoshop-document?
Ik heb geprobeerd, maar het werkt niet.
Ik weet niet waar je de code die Css leveringen te zetten.
Ik zou erop kunnen wijzen meer details te behagen.
Dank u.
Bedankt voor deze les!
Dat is leuk!