Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: jQuery ile sitenize Twitter akışını eklemek
#H4CK4L
*
avatar
#R00T
Durum: Çevrimdışı
Seviye Puanı: 43
Yaşam Puanı: 1,050 / 1,050
Deneyim: 1 / 100
Rep Sayısı: 1038
Mesaj Sayısı: 2996
Üyelik Tarihi: 04.05.2013
      
Yorum: #1
jQuery ile sitenize Twitter akışını eklemek
13.01.2014 12:36

S.a arkadaşlar

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
Kod:
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:

PHP Kod:
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 (iitem) {
        if (
== 0) {
            
$tweetList = $('<ul class="tweetList">');
        }
        
// handle @reply filtering
        
if (item.in_reply_to_status_id === null) {
            
$tweetList.append('<li class="tweet_content_' '">' +
                
'<p class="tweet_link_' '">' +
                
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.

Çocukken her akşam yatmadan önce Tanrı'ya bana bir bisiklet vermesi için dua ederdim. Bir gün Tanrı'nın çalışma tarzının bu olmadığını anladım. Ertesi gün gittim kendime yeni bir bisiklet çaldım ve her akşam yatmadan önce Tanrı'ya günahlarımı affetmesi için dua ettim.
Alinti
[email protected]
avatar
Kondom Mağduru
Durum: Çevrimdışı
Seviye Puanı: 26
Yaşam Puanı: 272 / 633
Deneyim: 33 / 100
Rep Sayısı: 123
Mesaj Sayısı: 865
Üyelik Tarihi: 05.05.2013
     
Yorum: #2
Cvp: jQuery ile sitenize Twitter akışını eklemek
13.01.2014 17:02
Cod3rin günlüğünden Smile
Alinti
DaRKNeSS
*
avatar
Binbaşı
Durum: Çevrimdışı
Seviye Puanı: 53
Yaşam Puanı: 1,315 / 1,315
Deneyim: 60 / 100
Rep Sayısı: 121
Mesaj Sayısı: 5584
Üyelik Tarihi: 11.08.2013
     
Yorum: #3
Cvp: jQuery ile sitenize Twitter akışını eklemek
13.01.2014 20:36
Eline saglik reiz


Alinti



1 Ziyaretçi