Bir profile ait son tweetleri siteye çekme

Ülkemizde üye sayısı oldukça fazla olan ve birçok web sitesi sahibi tarafından paylaşımları kullanıcılara daha hızlı bir şekilde ulaştırmak amaçlı kullanılan Twitter sitesindeki paylaşımlarını çoğu webmaster  kendi web sitesinin bir köşesinde eksik etmiyor. Yaptıkları son tweetler otomatik olarak siteye çekiliyor bazı uygulamalar sayesinde. Tweetable uygulaması da Philip Beel tarafından yapılmış siteye son tweetleri çekmek amaçlı kullanılan bir uygulamadır.

Son versiyonlarında yapılan değişikliklerinden biri olan cache özelliği sayesinde daha iyi performans elde edilebilir hale gelmiş. İlk başlarda yaptığım değişikliklerde hep aynı sonucu alıyor ve sorunun bir türlü nereden kaynaklandığını anlayamıyordum bu cache özelliği sayesinde. Bir defa  son tweetleri çektikten sonra istediğiniz kadar kullanıcı adı değiştirseniz dahi tarayıcı önbelleğine ilk eklenmiş olan kullanıcı adının verilerini gösteriyordu. Bu da bana problemli gibi gözüküyordu. Neyse ki sebebini araştırmak için incelediğimde önbellek özelliğinin olduğunu farkettim. Her hangi bir sorun yok ve düzgün şekilde çalışıyor. Önbelleğe alma süresini de milisaniye cinsinden belirleyebilmeniz mümkün. Önbelleğe alma dışında  bir kaç tane daha parametreye sahip.

Başlıca Tweetable.js parametreleri : 

1. limit: {Integer}, // Gösterilecek tweet sayısı
2. username: {String}, // @username tweetleri görüntülenecek olan hesap
3. time: {Boolean}, // Yayın tarihi
4. retweets: {Boolean}, // Discount retweets false
5. replies: {Boolean}, // True @cevaplari filtrele
6. failed: {String} // Api sonucu dondugunde gosterilecek metin
7. rotate: {Boolean} // Bir kerede sadece 1 tweet goster
8. speed: {Integer} // Milisaniye turunden yuklenecek tweet araligi
9. append: {String} // Ek pozisyonu
10. loading: {String} // Yukleme sırasında gosterilecek yazi
11. HTML5: {Boolean} // Eger tarayıcı html5 destekliyorsa dogrula (timeago support)
12. cacheInMilliseconds {Integer} // Yeni tweetlerin on bellege alinmadan once beklenecek sure
13. onComplete: {Object} // Tetiklemeden sonraki callback fonksiyonu

Kullanım :

Head etiketleri arasına eklemeniz gereken bölüm.

Stil kodları :

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
html {
}

body {
	font-family: 'Lucida Grande',Helvetica,Arial,sans-serif;
	font-size:13px;
	color:#FFF;
	line-height:150%;
}
small {font-style:italic; }

#tweets {
	width:300px;
	margin:50px auto;	
	background:#000 url('images/interface_dark.png') repeat;
	-moz-border-radius: 6px;
	border-radius: 6px; 
	padding:20px;
	-webkit-box-shadow:  1px 1px 1px #0f0f0f;
	-moz-box-shadow: 1px 1px 1px #0f0f0f;
	box-shadow: 1px 1px 1px #0f0f0f; 	
}

#tweets li {
	padding: 5px;
	color:#FFFFFF;
	border-bottom:1px solid #000000;
	border-top:1px solid #353434;
	line-height:150%;
}

#tweets li.tweet_content_0 {
	border-top:0px none;
}
#tweets li:last-child{
	border-bottom:0px none;	
}

#tweets .hash { color:#FFF; } 
#tweets .reply { color:#FFF; } 

a:link { text-decoration:underline; color:#FFF;}
a:active { text-decoration:underline; color:#FFF;}
a:hover { text-decoration:underline; color:#FFF;}
a:visited { text-decoration:underline; color:#FFF;}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html kodu :

<div id="tweets">
</div>

 Js dosya adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="tweetable.jquery.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>

 Javascript : 

<script type="text/javascript">
jQuery(function () {
    jQuery('#tweets').tweetable({
        username: 'mintikdotcom',
        time: true,
        rotate: false,
        speed: 4000,
        limit: 5,
        replies: false,
        position: 'append',
        failed: "Üzgünüm, kullanıcı adına şu anda ulaşılamıyor veya kullanımda değil.",
        loading: "Tweetler alınıyor...",
        html5: true,
        onComplete: function ($ul) {
            $('time').timeago();
        }
    });
});
</script>

Demo :