Artykuł

sty 24 2010
0

Widget Twitter w PHP i jQuery na stronie

W ostatniej dekadzie, mogliśmy zaobserwować burzliwy rozwój Web 2.0. Efektem tego, jest napływ wszelkiego rodzaju portali społecznościowych. Jednym z pierwszych takich portali była Wikipedia. Później, zaczęło się pojawiać stosunkowo dużo serwisów przeznaczonych do nawiązywania/utrzymywania relacji towarzyskich: MySpace, polska Fotka, Grono itd. Dziś, w światowym Internecie można powiedzieć, że królują dwa serwisy. Są to oczywiście Facebook oraz Twitter. Jednym z głównych czynników (przynajmniej w mojej opinii), który przyciąga użytkowników do tych serwisów, jest rozbudowane API, czynnik którego brakuje choćby polskiej Naszej-klasie, która czasy świetności ma już raczej za sobą. W dzisiejszym artykule, pokażemy jak można wykorzystać API Twittera, do publikacji najnowszych tweetów na własnej stronie domowej. Do realizacji tego zadania wykorzystamy PHP oraz bibliotekę JavaScript jQuery, za dynamizm całej operacji odpowiedzialny będzie AJAX

Informacje wstępne

Część z Was, być może zada sobie teraz pytanie dlaczego nie skorzystać z jednego z wielu widgetów dostępnych w Internecie (choćby z tych umieszczonych bezpośrednio na stronie Twittera). Dla takich osób, mam trzy argumenty. Po pierwsze pisząc własny widget, możemy nauczyć się czegoś nowego - rozwijać naszą chęć poznania. Po drugie, tworząc własny widget możemy go dostosować do naszych potrzeb, specyfiki wykorzystywanej witryny, lepiej niż w jakikolwiek inny sposób. Po trzecie (wynika to trochę z punktu drugiego), napisany przez nas widget, zawierał będzie tylko użyteczne z naszego punktu widzenia rzeczy, a tym samym powinien być szybszy i bardziej optymalny niż złożony widget, w którym będziemy wykorzystywać tylko kilka % z jego możliwości.

Przed przystąpieniem do pracy, warto zapoznać się z API udostępnionym na stronie Twittera. Twitter udostępnia kilkadziesiąt metod, które umożliwiają pobieranie danych. Dodatkowo, dane można pobierać w czterech różnych formatach: xml, json, rss oraz atom. W niniejszym artykule skorzystamy z formatu xml oraz z metody pobierającej tylko nasze statusy. Wywołanie takiej metody prezentuje się następująco:

http://twitter.com/statuses/user_timeline.xml

Jeśli w tym przypadku chcielibyśmy użyć innego formatu danych, wystarczy zastąpić rozszerzenie pliku innym dostępnym formatem (json, rss, atom). Jeśli chcielibyśmy skorzystać z innej metody, postępujemy analogicznie:

http://twitter.com/statuses/friends_timeline.format

Ten przykład umożliwia wyświetlenie do 20 ostatnich wpisów, które pojawiają się na naszej stronie. Są to tweety nasze własne jak i przyjaciół. Słowo format, na końcu URL, należy zastąpić docelowym formatem danych.

Oczywiście, przy wykorzystaniu jakiejkolwiek metody, należy się uwierzytelnić podając dane konta dla którego ma być wywołana dana metoda. Każdy z URLi możemy również podejrzeć w przeglądarce. Wystarczy przekleić adres, a następnie wprowadzić dane uwierzytelniające. Screen 1 prezentuje fragment zwróconego XMLa.

Założenia i przygotowania

Tworzony przez nas widget, zostanie utworzony przy pomocy technologi PHP 5 oraz jQuery. Do transferu danych pomiędzy PHP a jQuery wykorzystamy format danych JSON. Dane pobierane będą dopiero po całkowitym załadowaniu strony, lub po naciśnięciu przycisku odśwież.

Aby skorzystać z niniejszego kodu, musimy się również upewnić, że rozszerzenie curl w PHP jest dostępne. Aby tego dokonać skorzystamy z funkcji phpinfo():

<?php
phpinfo();
?>

Po wywołaniu skryptu, odszukajmy na ekranie sekcję curl. Jeśli rozszerzenie jest aktywne (enabled), podobnie jak na screenie 2, to możemy już przejść do kolejnego kroku. W przeciwnym przypadku, należy odkomentować linię:

extension=php_curl.dll

w pliku php.ini. Jeśli nie mamy dostępu do tego pliku, należy poprosić o to administratora naszego serwera.

Kod PHP

W PHP, pobierać będziemy dane oraz przygotowywać string JSON'a, który wyślemy następnie do jQuery. Rozważmy następujący kod w PHP:

<?php
if($_POST['twitter'] && 'show' == $_POST['twitter'])
{
	$sUserData = 'login:password';
	$oCurlObject = curl_init();
	curl_setopt($oCurlObject, CURLOPT_URL, 'http://twitter.com/statuses/user_timeline.xml');
	curl_setopt($oCurlObject, CURLOPT_USERPWD, $sUserData);
	curl_setopt($oCurlObject, CURLOPT_RETURNTRANSFER, TRUE);
	$oTwitterData = curl_exec($oCurlObject);
	$oTweets = new SimpleXMLElement($oTwitterData);
	
	$sJson = '{"tweets": [';
	$nCounter = 0;
	foreach ($oTweets->status as $oTwit) 
	{
		if($nCounter > 0)
		{
			$sJson .= ', ';								
		}
		$sJson .= '{"tweet": "'.$oTwit->text.'", "date": "'.GetDateFromTwitter($oTwit->created_at).'"}'; 
		++$nCounter;
	}
	$sJson .= ']}';
	curl_close($oCurlObject);
	echo $sJson;
}
else
{
	echo '{"tweets": []}';
}

function GetDateFromTwitter($sStringDate)
{
	$sDate = date("d F Y, H:i", strtotime($sStringDate));
	$asEnglishMonts = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
	$asPolishMonths = array('stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia', 'września', 'października', 'listopada', 'grudnia');
	return(str_replace($asEnglishMonts, $asPolishMonths, $sDate));		
}
?>

Na powyższym listingu, został przedstawiony cały kod potrzebny do realizacji wymaganego zadania. Niniejszy kod, należy umieścić w taki sposób, by podczas jego wywoływania nie były przekazywane żadne inne dane do użytkownika. Można ten kod umieścić w osobnym pliku lub w odpowiednio zaprojektowanym pliku strony (nic nie stoi na przeszkodzie by skorzystać z programowania obiektowego).

Na samym początku, sprawdzamy czy istnieje żądanie wywołania funkcjonalności Twittera. Ja, założyłem sobie, że będę robił to w następujący sposób:

twitter.php?twitter=show

Dlatego sprawdzamy, czy istnieje parametr twitter o wartości show, jeśli nie, to tworzymy string JSON'a zawierający pustą tablicę tweetów i wyświetlamy go (wysyłamy) do przeglądarki. Załóżmy jednak, że użytkownik chciał uzyskać listę tweetów i użył prawidłowych parametrów:) Dlatego wracamy do linii czwartej, w której przygotowujemy string zawierający login i hasło do Twittera odseparowane dwukropkiem, trzeba się jakoś uwierzytelnić:). Następnie inicjujemy obiekt curl. W liniach od 6-8 przekazujemy parametry dla tego obiektu. Kolejno: adres, dane logowania oraz opcję, która pozwoli nam odebrać uzyskane dane. Następnie, pobieramy XMLa i zapisujemy go do obiektu oTwitterData, który w kolejnej linii odczytujemy już jako obiekt SimpleXMLElement w PHP.

W linii 12, rozpoczynamy tworzenie stringu JSONa od utworzenia tablicy. Następnie inicjujemy zmienną pomocniczą, która pozwoli nam na dodawanie przecinków pomiędzy kolejnymi elementami w tablicy. W liniach 14-22 znajduję się pętla foreach, która przemierza nasz XML. W każdej iteracji, zawierać będzie jeden węzeł przechowujący jeden status i udostępniać będzie go jako obiekt.

Na początku pętli, dodajemy przecinek, w sytuacji gdy element nie jest tym pierwszym (rozdzielamy w ten sposób kolejne elementy tablicy tweets). Następnie doklejamy do stringu przechowującego JSONa konkretny element. Z obiektu pobieramy treść tweeta i przypisujemy go do pola tweet. Dodamy sobie również pole date, do którego przekażemy sformatowaną za pomocą naszej magicznej funkcji datę (opis samej funkcji poniżej). Po sklejeniu stringa, podnosimy licznik wykonanych iteracji.

Po wyjściu z pętli, kończymy tablicę, zamykamy obiekt curl i wyświetlamy spreparowany string.

Pozostała nam jeszcze do omówienia funkcja GetDateFromTwitter(). Przyjmuje ona jeden parametr, będący datą zwróconą z API Twittera. Na początku więc sformatujemy datę przy pomocy funkcji date oraz strtotime w formacie: dzień miesiąc-słownie rok, godzina:minuty. Następnie utworzymy, dwie tablice zawierające nazwy miesięcy w językach polskim i angielskim. Na samym końcu zwracamy wynik działania funkcji str_replace, która zamiast angielskich nazw miesięcy, wstawi ich odpowiednio sformatowane polskie odpowiedniki.

Kod jQuery

Kod jQuery, odpowiedzialny będzie za wysłanie żądania do PHP, odebrania odpowiedzi zawierającej string JSONa oraz dopisanie wyników do listy ol. Prześledźmy zatem następujący kod:

function LoadTwitterContent(){
    var oTweetsList = $('#tweets_list');
    oTweetsList.empty();
    oTweetsList.append('<li><img src="http://mojastrona.pl/mojobrazekloading.gif" alt="Wczytywanie" /></li>');
    $.ajax({
        type: 'POST',
        url: 'twitter.php',
        data: {twitter: 'show'}, 
        async: true,
        cache: false,
        dataType: 'json',
        success: function(oJsonObject) {
    		var sAppendString = '';
    		var nTweetsCount = oJsonObject.tweets.length;
    		if(0 == nTweetsCount){
    			sAppendString =  '<li><p>Lista tweetów jest pusta. Przepraszamy:(</p></li>';
    		}
    		else{
	    		for(var i = 0; i < nTweetsCount; ++i){
					var sTweet = oJsonObject.tweets[i].tweet;
					sTweet = sTweet.replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim,
						'<a href="$&">$&</a>')
    					.replace(/([^\/])(www[\S]+(\b|$))/gim,
						'$1<a href="http://$2">$2</a>');
	    			sAppendString += '<li><p>' + sTweet + 
	    				'<br /><span>' + oJsonObject.tweets[i].date + '</span></p></li>';
	    		}
    		}
    		oTweetsList.empty();
    		oTweetsList.append(sAppendString);
        },  
       	error: function(oXMLHttpRequest, sTextStatus) {
            oTweetsList.empty();
			oTweetsList.append('<li><p>Wystąpił błąd przy połączeniu z serwerem. Przepraszamy. Błąd: ' + sTextStatus + '</p></li>');
        }
    });	
}

Na początku, tworzymy funkcję. W linii 2, pobieramy element ol o id tweets_list, do którego dopisywać będziemy kolejne tweety (element taki powinien istnieć na stronie). W linii 3, czyścimy element, z całej jego obecnej zawartości (przydatne głównie do odświeżania), a następnie dodajemy ładny obrazek wczytywania (choćby jeden z tych). W linii 5, przechodzimy do najważniejszej części JavaScriptu, czyli żądania ajax, które zajmie nam resztę całej funkcji:).

W liniach 6-11 ustawiamy standardowe parametry żądania. Kolejno są to typ, url, data (przekazujemy tutaj komendę, której zobowiązaliśmy się użyć w części opisywanej w PHP), asynchroniczność żądania oraz typ zwracanych danych (koniecznie należy ustawić json).

Na sam koniec, zostały dwie funkcje. Pierwsza z nich wywoływana jest, jeśli skrypt otrzymał odpowiedź z serwera, druga jeśli coś nie wyszło po drodze... W przypadku sukcesu (linie 12-32), tworzymy najpierw string, który zawierać będzie dane przeznaczone do dodania do listy. Następnie, sprawdzamy czy tablica tweetów nie jest pusta, jeśli jest, to do stringu utworzonego powyżej dopisujemy jeden wiersz ze stosowną informacją (linia 16). W przeciwnym przypadku, tworzymy pętlę, która przemierzy cały obiekt JSONa i wynajdzie wszystkie tweety. W linii 20 pobieramy treść tweeta. W liniach od 21-24, za pomocą wyrażeń regularnych odnajdujemy linki w treści twitta i aktywujemy je. W linii 25, doklejamy nowy wiersz do stringu przeznaczonego do dodania zawierający dane przetwarzanego tweeta.

W linii 29, czyścimy listę z wszystkiego co się w niej w tej chwili znajduje, a następnie dodajemy string spreparowany powyżej. Pozostaje nam jeszcze obsłużyć sytuację błędu, o której wspomniałem powyżej. W tym przypadku doklejamy odpowiedni wiersz do listy ol z komunikatem o błędzie.

Pozostaje teraz dodać przycisk uruchamiający funkcję lub dodać ją do sekcji head np. w ten sposób:

$(document).ready(function () {
    LoadTwitterContent();
});

Dzięki takiemu zabiegowi, funkcja zostanie wywołana dopiero po całkowitym wczytaniu strony, co ograniczy liczbę żądań w początkowym okresie ładowania strony (powyższy kod należy umieścić wewnątrz znacznika script.

Podsumowanie

Celem niniejszego artykułu było zbudowanie prostego widgetu na własne potrzeby. Mam nadzieję, że wszystko zostało przedstawione w sposób jasny i klarowny. Oczywiście, sam widget można rozbudować w prosty sposób, przesyłać więcej danych, wszystko to już zależy od waszej wyobraźni. W razie pytań, zapraszam do komentarzy.

Data ostatniej modyfikacji: 05.06.2011, 17:23.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus