Nov 182010
 

THIS TUTORIAL IS NOW OUTDATED. PLEASE USE THE NEW FACEBOOK TUTORIAL.

After successfully getting my app, Happy Doodle Sushi Smile, to give users the option of posting their scores to Facebook, several people have contacted me wanting information on how to do so. While there is official documentation it was a little complicated for someone like me just starting out, so, without further adieu, here’s my little tutorial!

Step One: You are going to need to go here and then click “+ Setup New Application” at the top right.

Step Two: Fill in the standard info such as your apps name, your email for support, etc. then under mobile and devices be sure to set your core settings to HTML 5 and NOT Native Application.

Step Three: Download these four files and place them in your project folder.

Step Four: Time for our code! This example assumes you want to use a button that when touched prompts the user to login to Facebook before automatically posting a message to their wall, much like those irriating Farmville/Mafia Wars posts we’re all so accustomed to these days.

1
2
3
4
5
<span style="color: #0000ff;">local</span> ui = require(<span style="color: #ff00ff;">"ui"</span>)
<span style="color: #0000ff;">local</span> facebook = require(<span style="color: #ff00ff;">"facebook"</span>)
<span style="color: #0000ff;">local</span> json = require(<span style="color: #ff00ff;">"json"</span>)
<span style="color: #ff0000;">-- This requires all three files you downloaded, which are needed to integrate Facebook posts (as well as network.lua, but that is required separately by facebook.lua and we don't need to worry about it.)
</span>

This following code is taken, with a few modifications, from the Corona website – I don’t claim to understand all of its finer points, but I can make it do what I want it to do, and so can you;

1
2
3
<span style="color: #0000ff;">local</span> <span style="color: #0000ff;">function</span> printTable( t, label, level )
<span style="color: #0000ff;">if</span> label <span style="color: #0000ff;">then</span> print( label ) <span style="color: #0000ff;">end</span>
level = level <span style="color: #0000ff;">or</span> 1
1
2
3
4
5
6
<span style="color: #0000ff;">if</span> t <span style="color: #0000ff;">then</span>
<span style="color: #0000ff;">for</span> k,v <span style="color: #0000ff;">in</span> pairs( t ) <span style="color: #0000ff;">do</span>
<span style="color: #0000ff;">local</span> prefix = <span style="color: #ff00ff;">""</span>
<span style="color: #0000ff;">for</span> i=1,level <span style="color: #0000ff;">do</span>
prefix = prefix .. <span style="color: #ff00ff;">"\t"</span>
<span style="color: #0000ff;">end</span>
1
2
3
4
5
6
7
8
9
print( prefix .. <span style="color: #ff00ff;">"["</span> .. tostring(k) .. <span style="color: #ff00ff;">"] = "</span> .. tostring(v) )
<span style="color: #0000ff;">if</span> type( v ) == <span style="color: #ff00ff;">"table"</span> <span style="color: #0000ff;">then</span>
print( prefix .. <span style="color: #ff00ff;">"{" </span>)
printTable( v, <span style="color: #0000ff;">nil</span>, level + 1 )
print( prefix .. <span style="color: #ff00ff;">"}"</span> )
<span style="color: #0000ff;">end</span>
<span style="color: #0000ff;">end</span>
<span style="color: #0000ff;">end</span>
<span style="color: #0000ff;">end</span>
1
2
<span style="color: #0000ff;">local function</span> connectHandler( event )
<span style="color: #0000ff;">local</span> post = <span style="color: #ff00ff;">"hello and goodbye!"</span>
1
2
<span style="color: #0000ff;">local</span> session = event.sender
<span style="color: #0000ff;">if</span> ( session:isLoggedIn() ) <span style="color: #0000ff;">then</span>
1
print( <span style="color: #ff00ff;">"fbStatus "</span> .. session.sessionKey )
1
2
<span style="color: #0000ff;">local</span> scoreStatusMessage = <span style="color: #ff00ff;">"I just scored "</span> .. tostring(score) .. <span style="color: #ff00ff;">" on Happy Doodle Sushi Smile!"</span>
<span style="color: #ff0000;">-- Here, you will obviously use your own app's name rather than "Happy Doodle Sushi Smile". Also, in tostring(score), "(score)" will be whatever you are saving your score as, which in most cases I imagine will simply be "score", but if not you will need to change this accordingly.</span>
1
2
3
4
5
6
7
<span style="color: #0000ff;">local</span> attachment = {
name=<span style="color: #ff00ff;">"Download Happy Doodle Sushi Smile To Compete With Me"</span>,
caption=<span style="color: #ff00ff;">"Think you can beat my score of "</span> .. tostring(score) .. <span style="color: #ff00ff;">"? I dare you to try!"</span>,
href=<span style="color: #ff00ff;">"http://itunes.apple.com/us/app/happy-doodle-sushi-smile/id404532572?mt=8"</span>,
media= { { type=<span style="color: #ff00ff;">"image"</span>, src=<span style="color: #ff00ff;">"http://peachpellen.com/hdss.png"</span>, href=<span style="color: #ff00ff;">"http://itunes.apple.com/us/app/happy-doodle-sushi-smile/id404532572?mt=8"</span> } }
}
<span style="color: #ff0000;">-- Here "name" is the large blue font, while "caption" is the smaller grey text beneath it. The image will appear to the left and should be 90 by 90 pixels.</span>

facebookexample

1
2
3
4
<span style="color: #0000ff;">local</span> action_links = {
{ text=<span style="color: #ff00ff;">"Get It Now!"</span>, href=<span style="color: #ff00ff;">"http://itunes.apple.com/us/app/happy-doodle-sushi-smile/id404532572?mt=8"</span> }
}
<span style="color: #ff0000;">-- As you can see, "Get It Now" is that small link next to "comment" and "like" and goes to my page on Apple's website.</span>
1
2
3
4
5
6
<span style="color: #0000ff;">local</span> response = session:call{
message = scoreStatusMessage,
method =<span style="color: #ff00ff;">"stream.publish"</span>,
attachment = json.encode(attachment),
action_links = json.encode(action_links),
}
1
2
<span style="color: #0000ff;">if</span> "table" == type(response ) <span style="color: #0000ff;">then</span>
native.showAlert( <span style="color: #ff00ff;">"Oh no!"</span>, <span style="color: #ff00ff;">"Your post couldn't be published. Please try again shortly."</span>, { <span style="color: #ff00ff;">"Aww :("</span> }, onComplete )
1
2
3
4
5
6
7
8
-- print contents of response upon failure
printTable( response, <span style="color: #ff00ff;">"fbStatus response:"</span>, 5 )
<span style="color: #0000ff;">else</span>
native.showAlert( <span style="color: #ff00ff;">"Success!"</span>, <span style="color: #ff00ff;">"Your post has been published. Thanks for sharing your score with friends!"</span>, { <span style="color: #ff00ff;">"You're Welcome!"</span> }, onComplete )
<span style="color: #0000ff;">end</span>
<span style="color: #0000ff;">end</span>
<span style="color: #0000ff;">end</span>
<span style="color: #ff0000;">-- Here, I've added something I think is a nice feature; when the post is successful the message above shows as a native alert (one of those blue pop up boxes) and rather than simply saying "OK" the button pressed to close the alert says "You're Welcome!". You'll want to change this to suit your app, or even remove it, but I'm leaving it in just in case others wish to use a similar feature.</span>

Alright – take a breath! We’re almost done and ready for you to compile and test, but first we need to add just a little bit more code to get this thing working.

1
2
3
<span style="color: #0000ff;">local</span> fb_api_key = <span style="color: #ff00ff;">"123456abc"</span>
<span style="color: #0000ff;">local</span> fb_secret = <span style="color: #ff00ff;">"123456abc"</span>
<span style="color: #ff0000;">-- Naturally you will replace "123456abc" with your own API key and secret; these are found on your apps developer page on Facebook.</span>

*I am frequently asked whether or not you leave the quotes in around your API and secret – YES. :)

1
2
<span style="color: #0000ff;">if</span> ( fb_api_key and fb_secret ) <span style="color: #0000ff;">then</span>
<span style="color: #0000ff;">local</span> session = facebook.newConnection( fb_api_key, fb_secret )
1
2
3
<span style="color: #0000ff;">local function</span> onRelease( event )
session:login( connectHandler )
<span style="color: #0000ff;">end</span>
1
2
3
4
5
6
7
8
9
<span style="color: #0000ff;">local</span> fbButton = ui.newButton{
default = <span style="color: #ff00ff;">"facebook.png"</span>,
over = <span style="color: #ff00ff;">"facebook.png"</span>,
onRelease = onRelease,
x = 160,
y = 390
}
<span style="color: #ff0000;">-- This adds the "Connect with Facebook" button, but remember if you are using director to change screens you will need to add "localGroup:insert(fbButton)" above.
-- fbButton is the name of my button, so either rename your button according or be sure to change the name to match your button.</span>
1
2
3
4
<span style="color: #0000ff;">else</span>
<span style="color: #0000ff;">local function</span> onComplete( event )
system.openURL( <span style="color: #ff00ff;">"http://developers.facebook.com/get_started.php"</span> )
<span style="color: #0000ff;">end</span>
1
2
native.showAlert( <span style="color: #ff00ff;">"Error"</span>, <span style="color: #ff00ff;">"To develop for Facebook Connect, you need to get an API key and application secret. This is available from Facebook's website."</span>, { <span style="color: #ff00ff;">"Learn More"</span> }, onComplete )
<span style="color: #0000ff;">end</span>

As you can see, this removes some of the more annoying parts (in my opinion) of the example from the Corona website, such as the grey rectangle and accompanying text, and as mentioned above adds a native alert for a successful post, which I feel is a nice touch.

Just remember, this must be tested on your device; the simulator does not support it.

Enjoy, and feel free to leave a comment if you have any feedback for me, or require additional help.

With any luck I’ll have more tutorials up soon!

Peach Pellen :)

Like this post? Subscribe to the monthly newsletter!

 

  5 Responses to “Integrating Facebook Posting In Your App With Corona”

  1. NOTE: This tutorial is outdated and also got totally screwed up by my new plugin for managing code blocks. Please use the top link.

  2. excelente!!! muchas gracias me sirvio mucho : )..saludos desde argentina!

    • Hey Daniel,

      I was able to understand almost all of that; I don’t know how as I only speak English and a little French – but thank you for your kind words.

      Peach :)

  3. To the best of my knowledge, no, it needs to be uploaded – I believe that’s due to how Facebook itself works rather than a limitation of Corona however.

  4. this method works for images on a remote location
    is it possible to upload an image of the system.ResourceDirectory or system.DocumentsDirectory?
    setting the src value of the media table equal to an image of the resource directory, doesn’t return an error, yet it doesn’t upload the photo.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.