Någonting som jag tycker är bra är att försöka samla hela sin onlineprofil på sin webbsida. Därför tänkte jag här gå igenom hur jag gick till väga för att få mitt twitterfeed visat här på sidan.

Baronen har ett inlägg på sin sida angående just detta, men jag vill påpeka att jag redan hade en idé då om att jag skulle skriva det här inlägget. Till skilnad från Baronen så visar jag alla tweets i ditt feed inte bara dina egna, det medför att du måste logga in på ditt twitterfeed och det är därför som cURL kommer att användas.

Tillvägagångssätt

Jag kommer först att gå igenom mina php-klasser och hur man initierar koden, sedan går jag igenom jQuery koden för att animera och hämta nya tweets.

Förinställningar

För att sllippa hicka på sidan har jag valt att cacha twitterfeedet på min server. För att göra detta måste man skapa en fil sin server och sätta fulla rättigheter på den och mappen den ligger i. Det här gör att min PHP-kod kan skriva över filen i katalogen jag valt när den cachar ett nytt twitterfeed.

Jag skapade en mapp på serven som heter cache och sedan en fil som heter feed.xml. Jag kör FileZilla som mitt FTP-program så jag markerade mappen och högerklickade och valde filrättigheter. På numerisktvärde valde jag 777 som betyder att alla kan ändra i mappen. Sedan bockar man för upprepa i underkataloger och sedan väljer man verkställ på filer och underkataloger så att filen kan skrivas över.

Se screenshoot av rutan för filrättigheter

Dax att skriva lite PHP-kod!

För att skapa Twitterfeedet programmerade jag i PHP eftersom min server stödjer det. Jag skapade fyra klasser en view-klass, en handler-klass, en help-klass och en config-klass. Utöver detta skapadejag två PHP-filer till, en indexfil och en cache-fil som man med hjälp av Ajax kan hämta data ifrån.

View-klassen – FeedView

Den här klassen skriver ut en lista med tweets, som har olika färger beroende på rad samt får en speciell färg om twitter användaren har samma username som ägare till feedet.

Se kod för view-klassen

Hanterings-klassen – FeedHandler

Den här klassen cachar feedet från Twitter i en fil på din server under en speciferad tid sedan när tiden har gått ut cachas feedet igen. Man kan också hämta ut feedet som returneras som en xml-fil.

Se kod för handler-klassen

Hjälp-klassen – FeedHelper

Den här klassen används för att räkna ut förfluten tid från twittet har skapats. Den används också för att förkorta en sträng till ett specifierat antal tecken. Strängen klipps aldrig av mitt i ett ord utan slutar på det sista ordet innan begränsningen av antal tecken.

Config-klassen – Identity

I den här klassen lagras anvädaruppgifter för det feed som visas. Variabeln för användarnamnet och lösenordet är protected så den kan bara kommas åt av klasser som ärver från den.

Se kod för config-klassen

Index-filen

Här cachas twitterfeedet och en lista över tweets skrivs med hjälp av view-klassen

Se kod för index-filen

Cache-filen för Ajax

Här skrivs listan ut utan ul-taggar för att den skall kunna hanteras utav jQuery via Ajax. Haär chachas också filen annars som kommer inget nytt innehåll när man gör Ajax-anrop.

Se kod för cache-filen

Koda lite jQuery

Jag använder jQuery för att animera listan, jag valde att bygga en plugin så man lätt kan återvända koden.

jQuery Spy pluginen

Jag har använt mig av Remy Sharps tutorial om en jQuery spy. Det jag har gjort annorlunda är att ha lagt till lite extra parametrar. Jag har också byggt in så man kan välja att hindra att man får två identiska element efter varandra. Det går också välja att bara animera in nya objekt genom att titta på ett timestamp som måste finnas med i markupen.

Så här fungerar jQuery spy pluginen i olika steg;

1. Den synliga listan på sidan delas den vid den maxgräns som är satt.
2. En osynlig temporär lista skapas som de överflödiga objekten läggs i.
3. Översta objekt tas bort från temporära listan och tonas in överst på den synliga listan.
4. Samtidigt tonas det sista objektet ut på den synliga listan och tas bort.
5. Proceduren upprepas från steg 3 tills bara två objekt finns kvar på temporära listan då görs ett ajax-anrop.
6. Via ajax-anropet hämtas en lista från cache-filen och läggs in i temporära listan.
7. Proceduren upprepas från steg 3.

Se kod för jQuery spy plugin

Onload scriptet

För att initiera koden har jag valt att göra ett onload-script för att slippa skriva inline-kod.

Se kod för onload script

CSS för att snygga till tweetsen

Jag skapade ett utseende på twitterlistan som skulle passa med layouten på min sida.

Se CSS-kod

Sammanfattning

Jag har skapat ett gäng php klasser som användas för att importera ditt twitterfeed. Det är inte bara dina egna tweets som visas utan alla som du premunerar på eller tweets från alla som skriver i ditt feed.

• Se mitt demo
• Ladda ner mitt demo