jQuery ile sitenize Twitter akışını eklemek

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
Twitter'in kendi widgetları sayesinde twitter hesabınızın public timeline yani akışını sitenize ekleyebiliyorsunuz fakat o widgetı kullanmak zorunda değilsiniz. Twitter api ile akışınızı jquery ile alıp kendiniz çizebilirsiniz. Aslında çok basit. Twitter apisi zaten size public timeline'ınızı json nesnesi olarak veriyor herhangi bir api key kayıdı yapmaya gerek kalmadan.

Bu json nesnesinin adresi
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mfyz&count=10&callback=?
Adresteki mfyz benim twitter kullanıcı adım. count parametresiyle de en son pos edilen içeriklerin listesinin boyutunu belirleyebiliyorsunuz, sanırım bu parametrede bir üst limit var.

Yukaridaki adresi tarayıcınıza yapıştırırsanız json nesnesi alırsınız. jQuery ile bu json nesnesini işleyecegiz. Bunun için jquery'deki getJSON() fonksiyonunu kullanacağız. jQuery, normal .ajax() fonksiyonu gibi bu json nesnesini xmlhttprequest yani ajax ile alıp sonucunda işleyebileceğimiz bir javascript objesi olarak bize sunuyor.

Size bu işi yapan tüm kodu verip sonra kod üstünden açıklayacağım:
var $tweetList;
var $tweetUrl = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mfyz&&count=10&callback=?';

$.getJSON($tweetUrl, function (data) {
	$.each(data, function (i, item) {
		if (i == 0) {
			$tweetList = $('<ul class="tweetList">');
		}

		// handle @reply filtering
		if (item.in_reply_to_status_id === null) {
			$tweetList.append('<li class="tweet_content_' + i + '">' +
				'<p class="tweet_link_' + i + '">' +
				item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>')
					.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ')
					.replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2') +
				'</p></li>');
		}
	});

	$('#tweetStream').html($tweetList);
});
Yukaridaki kod 2 tane değişken tanımlaması ile başlıyor. Birisi api url'i diğeri de html kodunu üreteceğimiz taşıyıcı değişken. Gördüğünüz gibi getJSON fonksiyonu ile url'i belirtip ikinci parametre olarak callback fonksiyonunu tanımladık. Callback fonksiyonu, dönen json nesnesini içerir, bu örnekte "data" adındaki değişken olarak geçiyor. data dizisini dönerek tüm elemanları html kodu üreterek ekleyecegiz listeye.

Döngü içindeki ilk kontrolde eğer taşıyıcı değişken daha üretilmediyse html listesi olarak üretiliyor. Sonrasında bu liste içine satır olarak ekleyecegiz tüm twitter girdilerini.

Bir diğer kontrol ise sadece doğrudan yazılan tweet'leri işleyecegiz, bunu da yazılan tweet'in cevap olmamasını kontrol ederek yapıyoruz. Sonra da taşıyıcı listeye ekliyoruz tweet edilen yazıyı işleyerek. Bu aşamada ise regular expressions ile @username, #hashtag veya url gibi özel yazıları linklere dönüştürüyoruz.

Döngü bittiğinde de html'inizdeki herhangi bir elemanın içine bu üretilen listeyi basabilirsiniz, bu örnekte tweetStream kimliğine sahip nesnenin içine basılıyor.

Bu kodun calışan örneğini anasayfadaki sağdaki kolonda görebilirsiniz.
Home.js dosyasında yukarıdaki örnegi görebilirsiniz.

Hazırlayan: Mehmet Fatih YILDIZ

Yorumlar

Üye Resmi Batuhan Göksu
8 Eylül Perşembe ´11 09:25
ellerinize sağlık çok güzel çalışma denedim harika oldu peki bişi sorucam sadece son veriyi cekmek istiyorum nasıl yaparım bu konuda yol gösterirseniz sevinirim.
9 Eylül Cuma ´11 00:07
URL'deki count parametresini 1 yaparsan sadece son twitter entry'sini cekecektir.
Üye Resmi Batuhan Göksu
9 Eylül Cuma ´11 08:10
evet oldu teşekkür ederim çok rahat ve kolay şekilde twittleri çekebilmek harika.
Üye Resmi Hasan Aslan
23 Ekim Salı ´12 13:13
kolay gelsin mehmet kardeş sağolasın paylaşımların için sana bir soru soracam bugüne kadar hiç twitterla ilgilenmedim şimdi bir işim düştü yapmam gereken twitter adresime yazılan son 3 twetti alttaki şekilde ki gibi görüntülemek  php bilgim var illa api mi kullanmam gerek veya bu json yöntemiyle bu şekilde görüntüleme imkanımız var mı internette php için twitter apisinin türkçe kullanımı pek anlatılmıyor bana yardımcı olurmusunuz. twitter adresime yazılan son 3 postu altttaki şekilde görüntülemek istiyorum ne yapmalıyım
kolay gelsin...

http://i48.tinypic.com/2u88jee.png
12 Haziran Çarşamba ´13 02:56
hocam merhalar malumunuz olduğu gibi artık twitter api v1 verisyonu 11 haziran itibari ile sona erdi   yeni gelen v1.1 verisyonu hakında twitte yaptığım açıklamalar sonuçcunda hiç bir şey anlamadım bu konu hakında yada  v1.1 kullanımı hakında açıklama yaparsanız  çok makbule gecer şimdiden çok teşşekür ederim ilginiz için
Üye Resmi kadir karakaş
22 Temmuz Pazartesi ´13 22:06
bu kodlar siteye nasıl ekleyeceğim dreamwear yeni öğreniyorum bu yüzden yardımcı olabilir misiniz?
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor