Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Facebook Wall Posts displays on iPhone App

I am creating an iPhone app in Titanium Developer. i want to get the facebook wall posts from a facebook fan page
so when you click the tab to show facebook wall posts(status updates) i want them to be displayed as rows/lists.
does any one know how to do that?

— asked August 21st 2010 by C D
  • disaply
  • facebook
  • iphone
  • mobile
  • posts
  • wall
0 Comments

6 Answers

  • Hi there, did you solve this? i am getting it from RSS but i don't want to do like that, have you got any solution?

    — answered October 9th 2011 by Graham Jeffrey
    permalink
    0 Comments
  • Thank you very much, i will try it, and do you know any image gallery that can be work fast in the app, i am using Codeboxed image gallery with remote images but it seems very slow:( do know something different, with thumbs and big images. Thanks

    — answered December 13th 2011 by Graham Jeffrey
    permalink
    5 Comments
    • no, but i recently built one using the scrollableView module. It works really well

      — commented December 14th 2011 by Corey Snyder
    • can i see it:) or can you send me a screenshot? i really need a fast image gallery

      — commented December 14th 2011 by Graham Jeffrey
    • ScrollableView is the full size image flick through that you see used by the native photo app with the iPhone. http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object

      You just pass it an array of imageViews and it handles the loading, memory management, and gestures for you.

      If you are looking for more of a thumbnail gallery type of screen, like a "view all" this code should get you started. It is something I used to get photos from flickr, but you can adjust for your needs.

      var win = Titanium.UI.currentWindow;
      
      //add a scrollView to the window for the photos
      var scrollView = Titanium.UI.createScrollView({
          width:320,
          contentWidth:320,
          contentHeight:'auto',
          top:0,
          showVerticalScrollIndicator:true,
          showHorizontalScrollIndicator:false
      });
      
      win.add(scrollView);
      
      //lets create an array to store our images
      var photo = [];
      var photoPathArray = [];
      var photoDescriptionArray = [];
      var rowHeight = 0;
      var rowWidth = 0;
      
      //get the feed from flickr
      var mpxhr = Ti.Network.createHTTPClient();
      mpxhr.setTimeout(5000);
      mpxhr.open("GET","http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&user_id=USER ID&api_key=API KEY&extras=description&per_page=52");
      mpxhr.onerror = function(e) {
        var errorType = e.error;
        if (errorType.indexOf('cancelled') == -1) {
          alert('Oh Dear, There was a problem with Flickr');
        }
      }
      
      mpxhr.onload = function() {
      
        var doc = this.responseXML.documentElement;
        var items = doc.getElementsByTagName("photo");
      
        //thumbnail path for flickr
        //http://farm7.static.flickr.com/{SERVER}/{ID} _ {SECRET} _s.jpg
      
        for (var i=0; i<items.length; i++) {
      
          var item = items.item(i);    
          var id = item.getAttribute("id");
          var secret = item.getAttribute("secret");
          var server = item.getAttribute("server");
          photoPathArray[i] = 'http://farm7.static.flickr.com/'+server+'/'+id+'_'+secret+'_z.jpg';
          photoDescriptionArray[i] = item.getElementsByTagName("description").item(0).text;
      
          //store the image in an imageView
          photo[i] = Titanium.UI.createImageView({
            image:'http://farm7.static.flickr.com/'+server+'/'+id+'_'+secret+'_s.jpg',
            width:75,
            height:75,
            left:rowWidth*78+5, 
            top:rowHeight*78+5,
            borderWidth:1,
            borderColor:'#161616',
            photoPath:'http://farm7.static.flickr.com/'+server+'/'+id+'_'+secret+'_z.jpg',
            photoId:i
          });
      
          //add rows of photos stacked 4 wide    
          if ((i+1)%4) { 
            rowWidth++;
          } else { 
            rowHeight++;
            rowWidth=0;
          };
      
          scrollView.add(photo[i]);
      
        }
      }
      
      mpxhr.send();
      
      scrollView.addEventListener('click', function(e) {
        alert('photoPath: '+e.source.photoPath+' photoId: '+e.source.photoId});
      });
      

      — commented December 14th 2011 by Corey Snyder
    • Many thanks for your help, i always want to make a flickr gallery but couldn't do it:( how can i setup the api_key? where i can find it from Flickr?
      Thanks

      — commented December 14th 2011 by Graham Jeffrey
    • i have make something like this but i want to scroll big images?how can i do this?

      scrollView.addEventListener('click',function(e){
          var imageWindow = Ti.UI.createWindow({title:'Photo',background:'#000',barColor:'#000',
          orientationModes:[Titanium.UI.PORTRAIT,Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT]});
      
          var imageHolder = Ti.UI.createImageView({
          image:e.source.photoPath,
          });
          var backButton2 = Ti.UI.createButton({title:'Kapat'});
          backButton2.addEventListener('click', function(e)
          {
              imageWindow.close();
      
      
          });
          imageWindow.add(imageHolder);
          imageWindow.setLeftNavButton(backButton2); 
          imageWindow.open({modal:true}); 
      });
      

      — commented December 14th 2011 by Graham Jeffrey
  • i have figured the flickr and get my id and appkey, i think i do it right:) as you sad how can make this with the addEventListener, i want when user touch the thumbnail it will load the big image like the codeboxed gallery?

    — answered December 14th 2011 by Graham Jeffrey
    permalink
    0 Comments
  • see this page: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object

    instead of loading in your image in a single imageView. load in the array of imageViews into a scrollableView.

    // this is the scrollable view to flick my images
    var slideView = Titanium.UI.createScrollableView({
        views:photo,
        cacheSize:5,
        currentPage:0,
        showPagingControl:false,
        top:0,
        width:320
    });
    

    Then you should add in this slideView.addView(photo[i]); To your for loop to add the images to the slideView.

    — answered December 15th 2011 by Corey Snyder
    permalink
    5 Comments
    • thank you very much but i couldn't do this:(

      — commented December 16th 2011 by Graham Jeffrey
    • when i do like this, it works but i can only see one image,

      
      scrollView.addEventListener('click',function(e){
          var imageWindow = Ti.UI.createWindow({title:'Foto',background:'#000',barColor:'#000',
          orientationModes:[Titanium.UI.PORTRAIT,Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT]});
      
          var imageHolder = Ti.UI.createImageView({
          image:e.source.photoPath,
          });
          var backButton2 = Ti.UI.createButton({title:'Close'});
          backButton2.addEventListener('click', function(e)
          {
              imageWindow.close();
      
      
          });
          imageWindow.add(imageHolder);
          imageWindow.setLeftNavButton(backButton2); 
          imageWindow.open({modal:true}); 
      });
      

      what can i do for your code? when user touch thumbnail open big images?and slide to next and previous if exist…

      — commented December 16th 2011 by Graham Jeffrey
    • because your code above only loads one photo, you need to load in an array of photos to a scrollableView. ScrollView and ScrollABLEView are 2 different things.

      http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object

      — commented December 16th 2011 by Corey Snyder
    • can you help me about this?:(

      — commented December 16th 2011 by Graham Jeffrey
    • I've given you all the code you need, with out writing the code myself there isent much more I can do. Your process should be.

      1. load in the images into a scrollView
      2. user clicks an image and opens a new window
      3. the new window contains a scrollableView with an array of imageViews you created in your initial HTTPRequest
      4. set the scrollableView to the index of the thumbnail that was clicked

      good luck

      — commented December 16th 2011 by Corey Snyder
  • Thanks for your help very much, i am still trying if i can do this i will put the code in here.
    can i ask you another image question?

    while i am using a facebook graph api with this

    http://graph.facebook.com/ALBUM_ID/photos/
    

    it really gives the images, but when i want to pull this with this xhr code doesn't load
    do you know something about this?

    var xhr_request = Titanium.Network.createHTTPClient( );
    xhr_request.setTimeout(5000);
    xhr_request.onerror = function(e){ alert('You have an internet Connection Problem'); }
    xhr_request.open("GET", 'http://graph.facebook.com/ALBUM_ID/photos/');
    xhr_request.onload = function(){
        try{
            json_data = eval('('+this.responseText+')');
            displayImages( );
            win.remove( actInd );
    
        }catch(e){
            alert('Be sure that you have an internet connection');
        }
    }
    xhr_request.send( );
    
    — answered December 16th 2011 by Graham Jeffrey
    permalink
    1 Comment
    • you need 2 things:

      1. a proper access token to pull down data from facebook. attach it to your request. /photos?access_token=

      2. facebook requires a secure http request. so change http to https://

      — commented December 16th 2011 by Corey Snyder
  • Sure, you need to call the "feed" endpoint on Facebook's graph API. The code below will show you how to hit a users feed and return some data, I gave you a head start with some XML parsing, but you can expand how you like. An easy way to see all the returned data options is to visit Facebook's API docs, or play around in the Facebook Explorer.

    Im assuming you have a proper access token to retrieve data in the example, otherwise only public data will be returned. Also, you may use "me" as a username to return the data for a user that is already authorized.

    
    var id = [];
    var message = [];
    var description = [];
    var link = [];
    var createdAt = [];
    var type = [];
    
    var xhr = Ti.Network.createHTTPClient();
    xhr.setTimeout(5000);
    xhr.open("GET","https://graph.facebook.com/UNIQUE USER NAME OR PROFILE ID/feed?access_token=YOUR ACCESS TOKEN");
    xhr.onerror = function(e) {
      alert('Oh Dear, There was a problem with Facebook\n\n'+e.error);
    };
    
    xhr.onload = function() {
    
      //lets parse the return data and iterate through, you can display how you like    
      doc = JSON.parse(this.responseText);
    
      for (var i = 0; i<doc.data.length; i++) {    
        id[i] = doc.data[i].id;
        message[i] = doc.data[i].message;
        description[i] = doc.data[i].description;
        link[i] = doc.data[i].link;
        type[i] = doc.data[i].type;
        createdAt[i] = doc.data[i].created_time;
      }
    }
    
    — answered December 13th 2011 by Corey Snyder
    permalink
    1 Comment
    • you need xhr.send() at the bottom of my code, forgot that important part

      — commented December 13th 2011 by Corey Snyder
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.