Posted on by

Step 1. Set up your Facebook App

The very first thing you need to do is register your app on Facebook. This will give you an “App ID” that you’ll need for the next steps.

Once you have your app set up, it is very important that you check ‘Native iOS App’ (for iOS) or ‘Native Android App’ for Android (or both for cross-platform).

For iOS apps, in the ‘Native iOS App’ section, it is important that the iOS Bundle ID is the same as the provisioning profile that you’ll use to build your app in Corona. Also ensure that you enter a valid iTunes App ID in the iPhone App Store ID section. When you add your app to the iTunesConnect portal, your app will be assigned an “App Store ID” (even prior to uploading the binary).

If your app doesn’t have an iTunes App ID yet, you can use any valid iTunes App ID (just go to the ShowCase and pick an app), but be sure to change it to your app‘s ID as soon as you get one!

It’s very important that you enter the proper bundle ID and a valid iTunes ID, or the Facebook implementation in your app will fail if the user has the Facebook App installed on their iOS device. Following the above steps will ensure everything works properly for all of your users.

Step 2. build.settings

Another great feature that got pushed in with Daily Build 2011.707 is Facebook single sign-on. This is great news for those integrating their games and apps with Facebook. Once your app is authorized, users won’t have to log into your app if they’ve already logged into their Facebook account on their device (until they explicitly log out).

Can you imagine how many users probably bypass the Facebook integration of certain apps due to simply not wanting to re-login all the time? Thankfully, that will now be a thing of the past as your apps can now be just as integrated with Facebook as the rest of the user’s mobile device.

You’re probably thinking, That’s all well and good, but what does that have to do with photo uploading?

Well, the short answer is, it has to do with everything you do with Corona’s Facebook API from now on. If you call facebook.login() at any point in your app, then you must add some very important things to your build.settings file or your Facebook implementation will no longer work properly as of build 2011.707 (due to requirements of single sign-on).

NOTE: The build.settings changes are only for iOS. Single sign-on will work fine on Android without needing to modify your build.settings file.

Fortunately, it’s very, very easy to get it set up. All you need to do is add a few simple things to your build.settings file. Here’s an example:


settings = {
iphone = {
plist = {
UIApplicationExitsOnSuspend = false,
CFBundleURLTypes =
{
{
CFBundleURLSchemes =
{
"fbXXXXXXXXXXXXXX",
}
}
}
}
}
}


 

IMPORTANT NOTE #1: Replace the “fbXXXXXXXXXXXXXX” with “fbYourAppID” (notice how there’s no space between the “fb” and the “YourAppID” portion—that’s intentional). So if your Facebook App ID is “123456789″ then you should enter “fb123456789″. If you have a custom url scheme set in your Facebook developer dashboard for your app, you should append that to the end (no spaces). As a reminder, you get a Facebook App ID whenever you register your app with Facebook (it’s free).

IMPORTANT NOTE #2: Due to the nature of Facebook single sign-on, the Facebook API will not work in your app if you have UIApplicationExitsOnSuspend set to true. By default, the value is false if it is not in your build.settings. Just for good measure, I have the correct setting shown in the example above.

IMPORTANT NOTE #3: That’s a lot of table-nesting, so pay close attention (or just copy & paste from the example and change the app ID).

Step 3. Uploading the image

Below is a full-fledged example, though you’ll need a real Facebook App ID for it to work (get one here). I’ll explain the code afterwards.

NOTE: If you can’t see the code, go here to view it.

So here’s an explanation of what’s going on in the example:

  • You must require-in the “facebook” libary as usual, and also set the fbAppID variable to a real Facebook App ID.
     
  • The function at the top (onLoginSuccess() — lines 6-14) is executed upon successful login (line 23). If user is already signed-in on their device, thanks to the newly added single sign-on, this function will be triggered right away (granted the user has already authorized the app).
     
  • The onLoginSuccess() function handles the photo uploading. The code is very straight-forward. All items you see in the attachment table are required—including the baseDir parameter. You must attach this table to your facebook.request() call (as seen on line 13).
     
  • The next function you see is the facebook listener (fbListener() — lines 17-31), which handles all facebook events (to include session events and requests). The block of code on lines 25-29 is executed once the photo has been successfully uploaded.
     

Important note about PNG files

If the base directory of the image you want to upload is in your project’s resource directory (e.g. the top-level; same location as main.lua—system.ResourceDirectory), then the image cannot be a PNG file. You can, however, upload other image filetypes from your resource directory, such as JPG. The reason for this limitation is that PNG files in your resource directory get “crushed” (to optimize the final binary size) which makes them incompatible with Facebook photo uploads.

You can, however, upload PNG files from other system directories (such as system.DocumentsDirectory or system.TemporaryDirectory), so in these cases you can download a PNG from a remote server and upload those to Facebook just fine.

Wrapping it up

As a reminder, uploading photos to a user’s Facebook account requires that your app has the “publish_stream” permission granted (specified in the facebook.login() function). And that’s all there is to uploading photos to Facebook using Corona! Just three simple steps.

Corona SDK + Facebook Photo Upload

So until next time, be sure to keep a close eye on the blog because coming soon are tutorials and guides on more of the new features that have recently been added (or will be getting pushed in very soon):

  • Remote “Push” Notifications (iOS)
  • Custom URL Scheme Handling
  • Compose Email from Corona (with attachments!)
  • The “retina text”-gate Solution

Most of the above things are actually available since Daily Build 2011.707 (except emails—coming soon in one of the next few daily builds), but since these things just got pushed in, we’re still working on getting the documentation and tutorials ready, so please be patient as we roll all that out (we know you’re anxious!).

And as a reminder, these awesome new features are available to subscribers only through our Daily Builds.

For those who are new, Daily Builds include the latest features, improvements, and bug fixes of the Corona SDK. This allows subscribers to (optionally) get access to the newest features as they come out, and also provides us with plenty of real-world testing of the features before they get pushed into the public release build. It’s a win-win situation!

To get started, become a subscriber and click the Daily Builds link at the top—it’s that simple.


Posted by . Thanks for reading...

38 Responses to “Uploading Photos to Facebook in Corona”

  1. OnTouch

    Mmm, i’m registering a new app on facebook, what i need to check ? I see “native ios app” but told me i need a bundle ID and app store ID to work

    Reply
  2. Michael P

    @onTouch You can get your app ID from the Apple provisioning portal. You get the appstore ID when you submit your app to the appstore.

    Reply
  3. Jonathan Beebe

    @OnTouch: Actually, you do not have to submit your app to Apple to get an Apple ID. When you create the app in iTunes Connect, it’ll be assigned an “Apple ID”. You can get this before ever uploading your binary or completing the rest of the information about your app. It’s in the ‘Manage Your Applications’ section of iTunes Connect.

    @Alex: Yes, this works fine on Android devices. You don’t need to specify anything in your build.settings for this to work with Android. I’ll make sure to update the article with that info—thanks!

    Reply
  4. T. Chuin

    The iOS Bundle setup on the facebook app page will always be different from the testing one as Apple does not allow you to create the same certificate to sign both a testing app and a distribution app. Majority of the users that have an iOS device and a facebook account will have the facebook app on their devices.

    So, based on
    “It’s very important that you enter the proper bundle ID and a valid iTunes ID, or the Facebook implementation in your app will fail if the user has the Facebook App installed on their iOS device.”

    one can never test the app on their device as it will never work. So how can we really get around that problem? It can be easy to blame facebook, after all they changed and complicated things.

    However what would you suggest that we do if we want to test before publishing it, which itself is a process with Apple, approvals, etc ?

    Reply
  5. T. Chuin

    @Jon,
    I see that you have a lot of the official explanation on behalf of Ansca, would you be able to help clarify my question?

    If I have the facebook app on my device I cannot use the new build/API, but if I uninstall it, it works, now I cannot ask the users to uninstall the facebook app because having it is messing up with the new facebook API.

    Is there a way to have it working like it was with the older API? We have a few projects where the client requires us to use Facebook to connect, but it seems that the new Facebook API does not work, it is just frustrating when the client asks, is it that difficult or do other develoeprs not use Facebook integration with CoronaSDK? How do we explain that it is not our skills that is limiting, but the bug/feature in the new API that is the problem?

    We also understand that this is christmas time and most of Ansca will be away on a break, but would appreciate if I could get a response, I keep checking this post for your response or the blogs if you decide to follow up this with some more details.

    Please help us to get this working before we tell the client that we can do this and a lot more if they do not insist of using CoronaSDK as that is spoiling our reputation with something not working.

    Reply
  6. David Rangel

    @T. Chuin – can you send us a simplified sample of your code? We can take a look and see if we can find the problem. We need to be able to reproduce to really know what is going on. Please send us the project via the following form http://developer.anscamobile.com/forms/support and we will try to take a look asap (most of the team is traveling at the moment).

    [Editor's note: See Jon's comment and try that first]

    Reply
  7. Jonathan Beebe

    @T. Chuin: In the Facebook developer dashboard, do you have your app set as a ‘Native iOS App’ and also have a valid iTunes ID filled into the ‘iPhone App Store ID’ section? Also, please ensure that the ‘iOS Bundle ID’ is the same as the provisioning profile you used to build your app.

    I you haven’t already done all of those things, doing so should fix the Facebook app conflict. Another user in the forums had this issue and it was solved by following the above steps. For reference, here’s a link to the thread:

    http://developer.anscamobile.com/forum/2011/12/17/facebook-app-conflicting-new-facebook-api

    Reply
  8. Larry Meadows

    I have everything in – facebook has key, compiled and ready to go. Every time I try to run the code I get a facebook blank white screen that says “sorry try again later.”

    Reply
  9. Gordon

    @Larry Meadows – I had the same issue because I had “fb” in my facebook appID when I called facbook.login(“fbxxxxxxxxxxx”). Removing the “fb” fixed it

    Reply
  10. Tony Covert

    Trying to save a pic from the camera (iphone4) to Documents directory and then post. I can successfully post a file I stuck into the Resource directory on build but not a file I save from the camera. Is this something that can be done or am I doing something wrong?

    Reply
  11. mitu

    I login but then nothing happens a blank page is visible , and no alert is displayed .

    reply asap
    thanx

    Reply
  12. vedangi

    I login but then nothing happens a blank page is visible , and no alert is displayed .

    reply asap
    thanx

    Reply
  13. Shabbir

    Hi,
    I copied and paste the above code but it’s not working on Ipad. Although not displaying any message(alert)

    Reply
  14. vedangi

    where exactly from the code we have to remove “fb” the one in build.settings or in main ?

    Reply
  15. vedangi

    I am now able to upload an image but its a blank image , i tried 3 different size images small , large , medium but all are blank images .. please help ASAP ..

    ThAnx

    Reply
  16. Naomi

    When I converted my Facebook routine that I established to build my game using Daily Build 704B to Daily Build 775 (now using 776), I removed if event.phase ~= “login” then from my code base because fbListener function shown above does not include this particular state. I thought it should not be included because the new Single Sign On feature does not need it (or should not have it to work properly.) (And I forgot I removed it because I had to update all of my retina text object to work with newText, plus numerous other things to attend to.) Then, after finally installing the Android build on device, without having the if event.phase ~= “login” then state, when I intentionally fail to log in, my game would go into a endless state of void (or rather, permanent suspense). Simple mistake on my part, but never quite registered. So… it might be really helpful to include this login failure state to the listener in the tutorial above for still-newbie-after-more-than-half-a-year-of-Corona-programming-type-person like me.

    Anyhow, thank you, Jonathan, for the great blog posts and always super helpful tutorials!

    Naomi

    Reply
  17. Naomi

    Following up to the above post, it appears that there might be a reason why if event.phase ~= “login” then state wasn’t included in the tutorial. It appears that I need to handle this differently between Android and iOS.

    Naomi

    Reply
  18. Pisit

    only message posted when…
    facebook.request( “me/feed”, “POST”, attachment )
    anyone help?

    Reply
  19. Flavio

    I’ve checked it again and does’t work as supposed to be. I’ve asked for a new and “working” tutorial/sample code. The thing is I can get fire Facebook from the app, get login, but no post at all. Even after I allowed the app in Facebook first login, every time that I try to publish something, (like a photo) it switch from my app to Facebook app on the phone, open it and that’s all.

    What I would like to have as simple behaviour is to publish a message or photo directly from my app, without leaving the app. So, why this strange behaviour is occurring?

    Can someone please, post an updated sample code?

    Flavio.

    Reply
  20. David Gross

    I am hoping that when you write,
    “If you have a custom url scheme set in your Facebook developer dashboard for your app, you should append that to the end (no spaces),”
    what you meant to write was
    “If you have a URL Scheme Suffix set….”

    If so, please know that I have spent many hours looking for this. By not using the correct language, no search can’t find the topic. Since there is no such thing as a “custom url scheme” that I can find, I can only guess what you mean.

    Please, please, fix the language so we can find things!

    Reply
  21. Mamun

    Wrapping it up
    As a reminder, uploading photos to a user’s Facebook account requires that your app has the “publish_stream” permission granted (specified in the facebook.login() function).

    My question is how to activate “publish_stream” permission.

    Please help me.

    Reply
  22. Warren

    How can I upload an image to a friend’s account? I read in the docs you can post to a friend’s account but how do I do this rather than my own?

    Thanks!!

    Reply
  23. Warren

    Hi, I want to build an android app with corona sdk to login and post photos to facebook. When creating an app on the facebook developers page do I select Native Android App? If so what about the Class Name and Key Hashes? What do I do for that?

    Thanks!

    Warren

    Reply

Leave a Reply

  • (Will Not Be Published)