Facebook ve Twitter'dan Sayfa ve Profil Verilerini Çekme (JSON)

Konu 'Web Programlama Dilleri' bölümünde Moderatör Muhammet tarafından paylaşıldı.

  1. Moderatör Muhammet

    Moderatör Muhammet Muhammet Dilmaç Yönetici Moderatör

    Katılım:
    22 Şubat 2010
    Mesajlar:
    828
    Beğenileri:
    565
    Ödül Puanları:
    93
    Yer:
    Karabük

    [​IMG] Merhaba arkadaşlar,
    Bu yazımda sizlere facebook veya twitter hesaplarınızın bazı bilgilerini sitenizde göstermeye yarayacak olan bir yöntemi sizlerle paylaşacağım. Sitenizde facebook sayfanızın beğeni sayısını filan göstermek herhalde hoş olurdu :) Düşünün şimdi facebook logosu üstüne maus ile geliyorsun ve tooltip de beğeni sayısı yazıyor. Hımmm gayet hoş geliyor kulağa değil mi :) Buyrun gelin bu verileri nasıl çekeceğinizi görelim şimdi :)
    İlk olarak kullanacağımız yöntem şöyle ki facebook'un ve twitter'ın bizlere sayfalarımızın ve profillerimizin hakkında verdiği JSON çıktısından faydalanarak bu verileri çekeceğiz. Gelin sayfanızın veya profilinizin JSON çıktısına nasıl ulaşacağınıza bakalım şimdi;

    Facebook Sayfa veya Profil JSON çıktısına ulaşmak
    Facebook bizlere JSON çıktımızı şu şekilde vermektedir.

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    (Örneğin benim sayfa linkim:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    gördüğünüz gibi benim nickim MuhammetDilmac1994 bu yüzden benim json çıktıma şu linkten ulaşıcağım:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    ) Buyrun benim sayfamın JSON çıktısı şu şekilde:
    HTML:
    {   "about": "Muhammet Dilma\u00e7 - Bir Garip \u00c7ocuk...",   "bio": "9 Temmuz 1994'de \u0130stanbul'da do\u011fdum. Aslen Trabzon/Dernekpazar\u0131'l\u0131y\u0131m. 18 sene kadar ailem ile birlikte Zeytinburnu'nda ya\u015fad\u0131m. \u0130lk okulumu Zeytinburnu'nda Ahmet Vefik Pa\u015fa \u0130lk\u00f6\u011fretim Okulu'nda okudum. Ard\u0131ndan liseyi Zeytinburnu'nda Adile Mermerci Anadolu Lisesi'nde okudum. \u015euanda e\u011fitimime Karab\u00fck \u00dcniversitesi Bilgisayar M\u00fchendisli\u011fi \u00f6\u011frencisi aday\u0131 olarak devam etmekteyim(\u0130ngilizce haz\u0131rl\u0131kda okumaktay\u0131m yani). \u0130lgi alanlar\u0131m ise spor ve bilgisayard\u0131r.",   "is_published": true,   "location": {      "street": "",      "city": "Karab\u00fck",      "state": "",      "country": "Turkey",      "zip": ""   },   "personal_info": "CSS, HTML, PHP, javascript, G\u00fcvenlik \u00fczerine bir tak\u0131m bilgilerim bulunmaktad\u0131r.",   "personal_interests": "Spor ve Bilgisayar",   "talking_about_count": 10,   "username": "MuhammetDilmac1994",   "website": "www.muhammetdilmac.com.tr",   "were_here_count": 0,   "category": "Public figure",   "id": "216782248467828",   "name": "Muhammet Dilma\u00e7",   "link": "http://www.facebook.com/MuhammetDilmac1994",   "likes": 23}


    Twitter Profil JSON çıktısına ulaşmak
    Twitter bizlere JSON çıktımızı şu şekilde vermektedir.

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    (Örneğin benim profil linkim:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    gördüğünüz gibi benim nickim MuhammetDilma bu yüzden benim json çıktıma şu linkten ulaşıcağım:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    ) Buyrun benim profilimin JSON çıktısı şu şekilde:
    HTML:
    {"id":337929371,"id_str":"337929371","name":"Muhammet Dilma\u00e7","screen_name":"MuhammetDilma","location":"\u0130stanbul","url":"http:\/\/www.muhammetdilmac.com.tr","description":"","protected":false,"followers_count":27,"friends_count":7,"listed_count":0,"created_at":"Mon Jul 18 20:16:23 +0000 2011","favourites_count":0,"utc_offset":7200,"time_zone":"Athens","geo_enabled":true,"verified":false,"statuses_count":87,"lang":"tr","status":{"created_at":"Fri Feb 22 14:58:25 +0000 2013","id":304968391406522368,"id_str":"304968391406522368","text":"@efk4n Vel Has\u0131l kelam \u015fimdi ayr\u0131y\u0131z...","source":"web","truncated":false,"in_reply_to_status_id":304968137122648065,"in_reply_to_status_id_str":"304968137122648065","in_reply_to_user_id":1187952260,"in_reply_to_user_id_str":"1187952260","in_reply_to_screen_name":"efk4n","geo":null,"coordinates":null,"place":null,"contributors":null,"retweet_count":0,"favorited":false,"retweeted":false,"lang":"tr"},"contributors_enabled":false,"is_translator":false,"profile_background_color":"352726","profile_background_image_url":"http:\/\/a0.twimg.com\/profile_background_images\/455010477\/DSC00563__1080_x_608_.jpg","profile_background_image_url_https":"https:\/\/si0.twimg.com\/profile_background_images\/455010477\/DSC00563__1080_x_608_.jpg","profile_background_tile":false,"profile_image_url":"http:\/\/a0.twimg.com\/profile_images\/1916255868\/DSC00563__1080_x_608__normal.jpg","profile_image_url_https":"https:\/\/si0.twimg.com\/profile_images\/1916255868\/DSC00563__1080_x_608__normal.jpg","profile_link_color":"D02B55","profile_sidebar_border_color":"000000","profile_sidebar_fill_color":"99CC33","profile_text_color":"3E4415","profile_use_background_image":true,"default_profile":false,"default_profile_image":false,"following":null,"follow_request_sent":null,"notifications":null}


    İtiraf etmek gerekir ise Facebook Twitterdan daha düzenli bu konuda :) Neyse konumuza dönelim biz gördüğünüz gibi JSON çıktılarımızı kullanalım şimdide. İlk olarak facebook JSON verisini işleyelim; benim bu json'dan istediğim bilgiler; sayfamın beğeni sayısı bu yüzden ben sadece sayfamın beğeni sayısını çekeceğim sizler ise buna bakarak json'da varolan istediğiniz her veriyi çekebilirsiniz mantık aynıdır.

    Facebook JSON'dan Sitemize Veri Çekme
    Şimdi gelin kodları yapalım... İlk olarak kodlarımızı vereceğim ardından kodları sırası ile inceleyeceğiz. Sayfamıza veriyi çekmek için gerekli olan javascript kodumuz:
    HTML:
    $(function(){$.getJSON("http://graph.facebook.com/MuhammetDilmac1994", function(md){     var sayfa_begeni_sayisi = md.likes;     $(".facebookbegenisayisi span:eq(0)").html(sayfa_begeni_sayisi + ' Kişi');});});


    Gelin şimdi burada ne yaptık bakalım bir fonksiyon oluşturduk. Ardından içine JSON'umuzu çektik (

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    linkini kendi sayfa linkiniz ile değiştirin) ardından bana lazım olan veriyi çektirdim "var sayfa_begeni_sayisi = md.likes;" burada "likes" json'daki likes ı çekiyor, "sayfa_begeni_sayisi" ise sayfamıza aktarıcağımız şekil hemen altta zaten "$(".facebookbegenisayisi span:eq(0)").html(sayfa_begeni_sayisi + ' Kişi');" bu kodda şimdi facebookbegenisayisi adlı classımız içinde ki ilk span a beğeni sayısı + Kişi yazmayı sağlıyor. Yani Çıktısı Şöyle olacak 23 Kişi Şimdide sayfada görüntülenmesini sağlayacak html kısmını verelim.
    HTML:
    <div class="facebookbegenisayisi">  <strong>Sayfa Beğeni Sayısı:</strong> <span></span></div>


    Gördüğünüz gibi burada<span></span>arasına beğeni sayımızı yazacak. Eğer ister iseniz facebookbegenisayisi class'ına css ile tanımlamalar yaparak görselleştirebilirsiniz. Diler iseniz şimdide aynı işlemleri Twitter için yapalım tüm açıklamaları burada verdiğim için Twitter'ın direk kodlarını vereceğim. Eğer bir noktada takılacak olur iseniz yorum ile sorabilirsiniz...


    Twitter JSON'dan Sitemize Veri Çekme
    Buyrun bu javascript kodumuz;
    HTML:
     $(function(){$.getJSON("http://api.twitter.com/1/users/show.json?screen_name=muhammetdilma&callback=?", function(md){  var takipci = md.followers_count;  var twitsayisi = md.statuses_count;  $(".twitterbilgileri span:eq(0)").html(twitsayisi);  $(".twitterbilgileri span:eq(1)").html(takipci);});});


    Sayfamızda görünmesini istediğimiz yere ise:
    HTML:
    <div class="twitterbilgileri">  <strong>Twit Sayısı:</strong> <span></span><br />  <strong>Takipçi Sayısı:</strong> <span></span><br /></div>


    yazıyoruz... Bu arada bilmeyen arkadaşlar olabilir javascript kodumuzu
    HTML:
    <script></script>
    tagları arasında yazıyoruz veya bir js dosyası olarak kayıt edir src ile çekiyoruz...


    Muhammet Dilmaç
    msn@muhammetdilmac.com.tr

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...


    Kaynak:

    Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...

    Murat AKSOY bunu beğendi.

Sayfayı Paylaş