Twitter på din webbplats med PHP och jQuery

twitter-flowAktiviteten på Twitter har ökat lavinartat den senaste tiden, inte minst i Sverige. Många som bloggar använder även twitter. Jag tänker i denna post beskriva hur du med hjälp av PHP och simpleXML hämtar ditt twitter-flöde och publicerar det på din egen webbplats.

När sedan biten med PHP och SimpleXML är färdig, kommer jag gå igenom hur man kan använda jQuery för att snurra twitter-flödet.

Enkel Steg för steg

Jag kommer börja med att hämta twitter-flödet med hjälp av funktionen file_get_contents. Denna funktion läser in en fil till en textsträng.

Steg två att att använda simpleXML för att tolka strängen som XML, samt plocka ut de delar i flödet jag är intresserad av.

Steg tre är att göra om flödet till XHTML och publicera det på webbplatsen.

Börja koda

Jag börjar med att skapa klassen Twitter.php. Denna klass sköter hämtningen av flödet samt hantering av XML. Klassen innerhåller en egenskap, en konstruktor och en funktion.

class Twitter
{
	private $twitterFeed;
	public function __construct($twitterFeed, $numberOfTweets = 10)
	{
		$this->twitterFeed = $twitterFeed . "&count=".$numberOfTweets;
	}
	public function processFeed()
	{
		$twitterXml = file_get_contents($this->twitterFeed);
		$xml = simplexml_load_string($twitterXml);
		$feedArray = array();
		foreach ($xml->channel[0]->item as $item) {
			$feedArray[] = array('title' => $item->title,
					 'pubDate' => $item->pubDate,
					 'link' => $item->link);

		}
		return $feedArray;
	}
}

Om vi går igenom koden lite kort så har vi en privat egenskap, $twitterFeed, denna innehåller adressen till flödet. Konstruktorn tar två parametrar, detta är alltså adressen till flödet samt hur många twitterposter vi ska hämta.

Det är funktionen processFeed som gör grovjobbet. Det första vi gör i funktionen är att läsa in hela flödet med funktionen file_get_contents. För att hantera flödet som XML används funktionen simplexml_load_string.

Efter vi läst in flödet som xml är det dags att iterera igenom det och spara undan de värden vi vill använda, i detta fall titeln, publiceringsdatumet samt länken till inlägget. Dessa värden sparar vi undan i en array, till sist returnerar vi hela arrayen.

Publicera Twitter på din sida

Jag har skapat index.php som jag kommer visa innehållet på.

Sedan första versionen av denna artikel så har adressen till ditt RSS-flöde ändrats. Numer används följande URL:
http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=XXXXXX
Där XXXXX representerar ditt användarnamn på Twitter.

processFeed();
?>

    "; echo "".$item['title']." - ".date('Y-m-d H:i', strtotime($item['pubDate'])); echo ""; } ?>

Vi börjar helt enkelt med att instansiera ett Twitterobjekt och skickar med adressen till flödet samt hur många poster vi ska hämta, i detta fallet fem. Efter vi skapat objektet anropas funktionen processFeed som returnerar arrayen med twitterposter. Därefter kan vi loopa igenom de posten med foreach.

Eftersom datumet från Twitter se ut som följande, Thu, 20 Aug 2009 10:23:23 +0000 använder jag funktionen strtotime för att göra om datumet till en timestamp. Därefter kan jag fomeratera det som jag vill med funktionen date.

Nu har vi alltså skapat en Twitter-klass som kan hämta ett visst antal poster, samt en webbsida där vi kan publicera twitterflödet.

I mitt demo har jag lagt på en stillmall för att snygga till flödet en aning. Denna CSS-fil ingår även när du laddar hem filerna.

Resultat

Se Demo av resultatet så här långt.

Snurra flödet med jQuery

Jag tänkte visa hur man kan snurra posterna med hjälp av javascript och jquery. Det jag tänkte fixa till nu är att endast visa två åt gången för att sedan animera posterna. Se demo.

  $(document).ready(function() {
	var slideInterval = 3000;
	var animationSpeed = 500;	
	
	window.setInterval(function() {
	  	var firstItem = $('#ul_list2 > li:first ');
		var itemHeight = firstItem.height() + 
				parseInt(firstItem.css("paddingTop")) + 
				parseInt(firstItem.css("paddingBottom") +
				parseInt(firstItem.css("marginTop")));

		$('#ul_list2 > li:first ')
			.animate({
				marginTop: (-itemHeight - parseInt(firstItem.css("marginBottom")))
			}, animationSpeed, "linear", function() {
				$('#ul_list2 > li:first ').remove()
				firstItem.css("marginTop", 0)
				$('#ul_list2').append(firstItem)
			})
	}, slideInterval);
  });

Var tredje sekund animerar vi flödet uppåt. För att veta hur långt vi ska flytta det uppåt räknar vi ut höjden på en post inklusive margin och padding. Sen använder vi jQuerys animate. När väl animeringen är klar, tar vi bort det översta elementet, som alltså ligger utanför boxen och flyttar ner det längst ner i listan igen.

Demo och källkod

Nu har jag visat hur man hämtar Twitter-flöde med PHP och sedan snurra posterna med jQuery.

Exempel utan javascript
Visa Demo eller Ladda ner källkoden här

Exempel med javascript
Visa Demo eller Ladda ner källkoden här

25 Replies to “Twitter på din webbplats med PHP och jQuery”

  1. Bra artikel, jag håller också på med något sånt här. Uppgraderade min jQuery spy med lite av din kod så den räknar med margin och padding på höjden av elementet… Hade också tänkte publicera en artikel om detta, faktiskt innan jag visste att du också hade en på gång 🙂 Jag har valt att ta med alla kommentarer på mitt feed men det är ju en smaksak… Jag skall nog fila lite på min artikel innan jag publicerar…

    1. Den enklaste lösningen är att lägga en radbrytning innan datumet.
      En annan lösning är att lägga till exempel en em-tag runt datumet för att sedan med css visa det som ett blockelement.
      Den tredje lösningen vore att använda en DL lista, detta kräver dock att man ändrar i javascriptet.

      Hoppas du löser det

  2. Scriptet ser jätte bra ut, men jag får det inte att fungera. inte ens när jag lägger upp det rakt av, på webbhotellet, utan modifikation. Har dock inte detta i rooten, utan i en undermap.!?
    Och vad händer: jo, inget, om jag kikar på sourcen, så skriver den ut allt, men ej det som ligger mellan “”
    Är det något krav på webbserver? PHP version?

    1. Jag har testat att lägga upp scriptet rakt av och det funkar för mig.

      Vad skriver den ut i källkoden? Rätt address till Twitter RSS?

      En anledning kan vara att webbhotellet stängt av file_get_contents. Du bör i alla fall få upp ett PHP fel.

      Du kan maila mig på baronen@ baronen.org med lite mer information så ska vi se om vi kan fixa till det.

  3. Jag har verkligen letat efter ett sätt att få mina tweets till min webbsida och tackar därför för detta. Dock får jag det inte att fungera riktigt. Mina å ä ö blir knas och jag kan för allt i världen inte förstå varför. Dessutom hamnar allt helt snett, men där antar jag att jag har något i min stilmall att tacka för det och det är väl bara att gå på jakt. Om du kunde ge något tips om varför å ä ö bråkar vore jag dock tacksam! (Jag testar här: http://www.avigt.nu/twitindex.php)

    1. Jag vet inte om du använder min kod direkt men det är sparad i UTF-8 och du verkar köra ISO-8859-1 på din sida, därav problemet med konstiga tecken.

      Att den hamnar snett beror på som du säger CSS.

      Alternativen för att fixa åäö är att spara om filerna till ISO-8859-1 eller kanske enklare att använda php-funktionen utf8-decode – http://se2.php.net/manual/en/function.utf8-decode.php

      Det skulle se ut så här:

      echo "".utf8_decode($item['title'])." - ".date('Y-m-d H:i', strtotime($item['pubDate']));
      

      Hoppas det löser sig, annars kan du höra av dig via mail till baronen@baronen.org

  4. Jag testade att tanka ner dina filer utan java, och lägga upp dom på adressen http://www.jajamensan.se/twitter – en sida som jag byggt och tidigare och nu använder för mitt experiment. Jag får följande felmeddelande: Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/userB/b0252400/public_html/jajamensan.se/twitter/Twitter.php on line 4

    Någon som vet vad det betyder?

    1. Jag är inte helt säker med jag tror det beror på att din webbserver/webbhotell kör fortfarande PHP 4.

      Du skulle kunna testa att ändra private $twitterFeed till var $twitterFeed i Twitter.php så kan eventuellt det fungera.

      Det bästa vore att uppdatera och köra PHP 5.

  5. Hello-
    How exactly do I edit the Twitter.php file…can you show me an example?
    Is it right after: private $twitterFeed; —
    sorry I don’t know how to edit my rss url in the twitter.php file-

    Thank you
    Andrea

  6. I also keep getting this error which makes me think I haven’t edited the twitter.php file correctly:

    Fatal error: Cannot instantiate non-existent class: twitter

    Here is a link to my code:

    http://pastie.org/788781

    Thanks for any help!
    Andrea

  7. Success!

    My problem was that my server (1and1) had the url fopen option disabled so I had to write a php.ini file for the directory and add:
    allow_url_fopen =on;
    memory_limit = 40M;
    upload_max_filesize = 20M;
    max_execution_time = 50000;
    browscap = /usr/local/lib/browscap.ini;
    register_globals = off;
    error_reporting = (E_ALL & ~E_NOTICE & ~E_WARNING);
    url_rewriter.tags = ?a=href,area=href,frame=src,form=fakeentry,fieldset=?;

  8. Hi Andreas- One more question for whenever you have a second to spare…I would like to display our screen name after our post and others who may have used a hashtag.
    I am going to use an RSS Aggregator so I can show our feed and search results for our hashtag #FPSF.

    Example: (Our Twitter name is FPSummerfest)

    “Remember our first Summer Fest? http://www.FreePressSummerFest.com@Free_Press #FPSF –
    FPSummerfest 7:00 pm Dec 31st”

    Example: (Poster named “Commandrea” w/ hashtag result #FPSF)

    “I can’t wait for the festival! #fpsf
    Commandrea 8:00 pm Dec 31st”

    I have a feeling it’s somewhere in here:
    echo ““.$item[‘title’].” – “.date(‘g:i a M jS ‘,strtotime($item[‘pubDate’]));

    Thank you for your help! I love your plugin!

  9. Hej Andreas,

    Jag håller på och pillar med en site som jag vill ska innehålla ett twitter-flöde med tweets som innehåller “#ipad”. Problemet är att jag bara hittar lösningar där man definerar ett username och på så sätt får ett flöde med tweets från endast en användare.(det funkar bra iaf, men inte det jag vill ha) Går det att t.ex. byta ut “username” mot “tag” eller något sådant generellt i jQuery? Svara gärna via mail.

    Mvh,
    Eric

  10. Hejsan. Går det på något sätt att få bort titeln? Jag menar, jag skall använda detta på min hemsida, därför behöver jag inte någon title.. Alltså, “titel: text – datum” Jag vill inte ha titel. Går detta att ta bort?

    Mvh Fredrik

  11. Hej igen. Joo jag såg det. Jag tänkte, om det det gick att ta bort själva användarnamnet. Och går det att få mina länkar som jag skickar på twitter, bli klickbara på tweeten på min hemsida? 🙂

    Men titeln menar jag, att just nu ser det ut såhär: jonssondesign: bla bla bla bla – 2010-16-12
    Ja vill ha det såhär: bla bla bla bla – 2010-16-12

    Men det kanske inte går? Annars blir det JÄTTE bra som det är! Du har verkligen varit till stor hjälp! Tack tack!

Din kommentar eller åsikt