Tuesday, August 9, 2011

Displaying map in Facebook feed in iOS


Sharing images on Facebook feeds is desirable most of the times and can be accomplished by using the attachments in the params dictionary.

I went on a problem to post a Facebook feed that shares users current location as static map image.

The options available was to use a static image from google and use the url as value for 'picture' key in feeds parameters.
But, doing this didn't work. It didn't showed any image on the wall.

If you have a server that can cache and provide you the direct url of the static map image (generated by Microsoft Bing Map or Google Map), you can use that url for the feed purpose.

But, since I didn't had any, I had no option but to see for workarounds.

Searching for the solutions, certainly I found that Foursquare application does share the users location in feed. This foursquare proxy server url returns the static image of size 100x100 from Microsoft Bing Map. You can change the lat/long value in the url and get the desired map for your location.

It uses its proxy servers to generate and handle the map images.

The url for image is of below format,
https://foursquare.com/mapproxy/18.5163333/73.9299163/map.png

Its implementation code can look like below,


    NSMutableDictionary* params = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                   kFacebookAppId, @"app_id",
                                   @"http://developers.facebook.com/docs/reference/dialogs/", @"link",
                                   @"https://foursquare.com/mapproxy/18.5163333/73.9299163/map.png", @"picture",
                                   @"Facebook Dialogs", @"name",
                                   @"Reference Documentation", @"caption",
                                   @"Dialogs provide a simple, consistent interface for apps to interact with users.", @"description",
                                   @"Facebook Dialogs are so easy!"@"message",
                                   nil];
    
    [facebook dialog:@"feed" andParams:params andDelegate:self];


Thanks and hope this helps.