jQuery ile Son Tweetleri Çekmek (REST API uyumlu)

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/586-twitterda-uygulama-olusturmak.html

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ı;

<?php
	
	header('Content-type: application/json; charset=utf8');
	header("access-control-allow-origin: *");
	
	require 'twitteroauth/twitteroauth.php';

	// 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);
	
	// tw - kullanıcı adı
	$username = isset($_GET['username']) ? htmlspecialchars($_GET['username']) : NULL;
	
	// tw sayısı
	$count = isset($_GET['count']) ? (int) $_GET['count'] : 5;
	
	$tweets = $twitter->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;

Demo

http://www.erbilen.net/demo/lasttweet/index.php

İndir

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

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery ile Son Tweetleri Çekmek (REST API uyumlu)” üzerine 17 yorum

  1. Öncelikle paylaşımlarınız için çok teşekkür ederim.Bu konuları siz genellikle hep video ile anlatırdınız ve bu videolu anlatımlar bizim için çok faydalı olurdu. Bu aralar genellikle makale şeklinde anlatmaya çalışıyorsunuz. Tekrardan videolu anlatımlar yapacak mısınız?

  2. @Özkan, bunun diğer versiyonunu videolu olarak anlattım. Şuan evden uzaktayım, bu yüzden ses donanımım evde kaldığı için videolu anlatımlar hazırlamıyorum. Bu sırada boş durmamak için makaleler hazırlıyorum, makalelerde video kadar yararlı oluyor öğrenme aşamasında 🙂

  3. Gerçekten yazmış olduğun makalelerin de öğrenme açısından çok ama çok faydalı oluyor .Ben sadece şu aralar neden videolu anlatımlar yapmadığını öğrenmek istemiştim .Bu arada videolu anlatımlar yaparken kullandığın mikrofonun markası ve modelini öğrenebilir miyim? Teşekkür ederim.

  4. Yeni ders için teşekkürler Tayfun.

    Ben ilk anlattığınla son tweetleri çekiyorum şuan. Yani şöyle diyebilir miyiz? Şuan anlattığım daha iyi bir yöntem diye? Ona göre eski anlattığını silip, bunu uyarlayacağım.

  5. Konuda da bahsettiğim gibi, bu şekilde olduğunda yüklenme hızını etkilemez, o yüzden bu şekilde yapmak daha mantıklı gibi geliyor bana hakkı.

  6. Yine güzel bir makale olmuş, eline fikrine sağlık. Fakat şöyle bir sıkıntı var tweet içerisindeki #hashtag ve linkler aktif değil kullanılamıyor yani. Bunları düzeltmenin bir yolu var mıdır?

  7. Selam Ahmet, elbette bunları yakalayabilirsin..

    Kullanıcı Adını yakalamak için;

    String.prototype.parseUsername = function() {
    	return this.replace(/[@]+[A-Za-z0-9-_şçöüğı]+/gi, function(u) {
    		var username = u.replace("@","")
    		return u.link("http://twitter.com/"+username);
    	});
    };

    Kullanımı;

    tweet.parseUsername()

    Hashtagleri yakalamak için;

    String.prototype.parseHashtag = function() {
    	return this.replace(/[#]+[A-Za-z0-9-_şçöüğı]+/gi, function(t) {
    		var tag = t.replace("#","%23")
    		return t.link("http://twitter.com/search?q="+tag);
    	});
    };

    Kullanımı;

    tweet.parseHashtag()

    Kaynak: http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls

    Bende demoyu bu şekilde güncelledim şuan.

  8. Hocam print_r($tweets); kodunu yazdıktan sonra aşağıdaki hatayı vermektedir.

    Notice: Undefined variable: acces_token_secret in C:\Program Files (x86)\EasyPHP-12.1\www\twitteroauth-master\index.php on line 13
    {“errors”:[{“message”:”Timestamp out of bounds”,”code”:135}]}

    Ne demek istemektedir.

    Saygılarımla.

  9. öncelikle eline sağlık güzel paylaşım olmuş.yalnız bi sorum olcak.apileri ve kullancı adını değiştirdikten sonra x dakika önce x saat önce saçmalıyor.bunun çözümünü biliyoru musun ?

  10. Teşekkürler, Tarihi gösteren kodun yeni versiyonu. Senin örnek şuan göstermiyor.

    function parseTwitterDate(tdate) { //alert(tdate);
    var system_date = new Date(Date.parse(tdate));
    var user_date = new Date();
    if (K.ie) {
    system_date = Date.parse(tdate.replace(/( \+)/, ‘ UTC$1’))
    }

    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;
    }

    var K = function () {
    var a = navigator.userAgent;
    return {
    ie: a.match(/MSIE\s([^;]*)/)
    }
    }();

  11. Güzel bir anlatım olmuş teşekkürler. Fakat bir sorum olacak. Localhostta sorunsuz çalışıyor kodlar fakat hostta çalıştıramadım bir türlü.

  12. Teşekkürler Kardeşim;

    Birde önerim var, Yorum gonder kısmını konunun altına alırsan daha fazla ilgi görebilir emeğine sağlık..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir