jQuery ile Son Tweetleri Çekmek (REST API uyumlu)

Bildiğiniz gibi twitter api 1.1’e geçti ve artık izin almadan twitter’da işlem yapamıyoruz.. Dolayısı ile çalışan tüm twitter eklentileri patladı. Bu konuyla ilgili http://www.erbilen.net/513-twitter-rest-ap-11-ile-son-tweetleri-cekmek.html şu konuda zaten son tweet’leri çekmeyi anlattım. Şimdide bunu bir php dosyası haline getirip jquery ile bu php dosyasından çekmeyi göstereceğim. Böyle yapıyoruz çünkü php’yi dahil edip çalıştırdığımızda sitenin hızını etkiliyor, ancak böyle olduğunda yüklendiği zaman istek cevaplanıyor ve verileri yazdırılıyor, açılış hızına bir etkisi olmuyor.

Adım Adım İlerleylelim

Öncelikle twitter.php dosyası oluşturalım bir tane. Ve içerisine buradan indireceğiniz sınıf dosyalarını include delim.

require 'twitteroauth/twitteroauth.php';

Ancak bunun hemen öncesinde çıktıyı json olarak ayarlayalım;

header('Content-type: application/json; charset=utf8');

Şimdi consumer ve access keylerimizi elde ettikten sonra sınıfımızı başlatalım.

// consumer ve access
$consumer_key = 'BpyIHhw6GdvUnEu9ARwrHA';
$consumer_secret = 'OwKDNx4qtUqVbOtNuMJXusMldfXrlNqwG1GqSRZpSw';
$access_token = '24186944-9lI0G4BKEySlN4tMbcz5oTxrfmNam24J6VffbhzOs';
$access_token_secret = 'aLevlosLliXvSDYQVbKKJ7Wrmh2rGbqFSLsCU9BaY';

// sıfını başlatalım
$twitter = new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_token_secret);

Bunları elde edebilmek için uygulama oluşturmanız gerekiyor. Nasıl uygulama oluşturacağınızı bilmiyorsanız aşağıdaki konuya göz atın;
http://www.erbilen.net/twitterda-uygulama-olusturmak

Sırada twitter kullanıcı adını almak var. Bunu get parametresi ile alalım. username olsun parametre adımız.

$username = isset($_GET['username']) ? htmlspecialchars($_GET['username']) : NULL;

Kaç tweet çekeceğimizi belirleyelim. Bunuda get ile yapalım. Eğer get yok ise default bir değer verelim. Örn: 5 gibi..

$count = isset($_GET['count']) ? (int) $_GET['count'] : 5;

Şimdi kullandığımız sınıfta bulunan get() metodu ile tweetleri çekelim.

$tweets = $twitter->get('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name='.$username.'&count='.$count);

Sıra geldi bu tweetleri json olarak çıktı verdirmeye.

Yapmamız gereken şey php’de bulunan json_encode() fonksiyonunu kullanmak ????

print json_encode($tweets);

Unutmadan, jquery ile çekmek için en üstte şu header tanımlamasını yapmamız gerekiyor;

header('access-control-allow-origin: *');

Evvet.. tamamdır ????

Kodlarımızın Son Hali

Eğer her şey yolunda ise yazdığınız kodlar son haliyle şöyle olmalı;

get('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name='.$username.'&count='.$count);

	print json_encode($tweets);
	
?>

Bunu sunucunuza twitter sınıf dosyaları ile birlikte bir klasöre ya da ana dizine atın.. Şimdi gelelim jquery ile nasıl kullanacağımıza..

jQuery ile Kullanımı

jQuery’de json değerlerini işlemek için $.getJSON() metodu bulunuyor. Yapmamız gereken önce sunucudaki twitter.php’ye bağlanmak ve dataları almak olacak.

$(function(){

	$.getJSON('http://www.erbilen.net/twitter.php?username=tayfunerbilen&count=10', function(data){
		// tweetler burada işlenecek..
	});

});

Artık data değerinde çektiğim son 10 tweet bulunuyor. Bu objeleri for ile işleyip herhangi bir div içerisine yazdırabiliriz.
Bu arada twitter tarih formatı biraz ilginç geliyor ???? Bu yüzden onu “x zaman önce” haline çevirmek için şuradaki cevaptan yararlanıyoruz;
http://stackoverflow.com/a/6549563

Ve devam edip, verileri bir nesne içerisine yazdırıyoruz..

$(function(){
	
	// twitter tarih formatını parse eden fonksiyon
	function parseTwitterDate(tdate) {
		var system_date = new Date(Date.parse(tdate));
		var user_date = new Date();
		var diff = Math.floor((user_date - system_date) / 1000);
		if (diff <= 1) {return "şuan";}
		if (diff < 20) {return diff + " saniye önce";}
		if (diff <= 3540) {return Math.round(diff / 60) + " dakika önce";}
		if (diff <= 5400) {return "1 saat önce";}
		if (diff <= 86400) {return Math.round(diff / 3600) + " saat önce";}
		if (diff <= 129600) {return "1 gün önce";}
		if (diff < 604800) {return Math.round(diff / 86400) + " gün önce";}
		if (diff <= 777600) {return "1 hafta önce";}
		return "on " + system_date;
	}
	
	// tweetlerin yer alacağı nesne
	var $twitter = $('#twitter');
	
	$.getJSON('http://www.erbilen.net/twitter.php?username=tayfunerbilen&count=10', function(data){
		var total = data.length,
			i = 0;
		$twitter.html(''); // önce içindekini temizle sonra tweetleri yazdır.
		for ( i; i < total; i++ ){
			var tweet = data[i].text; // tweet
			var date = parseTwitterDate(data[i].created_at); // tarih
			var url = 'https://twitter.com/' + data[i].user.screen_name +'/status/' + data[i].id_str;
			$twitter.append('<div class="tweet"><a href="' + url + '">' + tweet + '</a> (' + date + ')</div>');
		}
	});

});

Birazcıkta css kastınız mı bu iş tamamdır ???? Sonuç olarak benim demoya aşağıdaki linkten göz atabilirsiniz;

İndir

http://yadi.sk/d/-z84lvgj9GxfB