Time for action – adding Facebook to your apps

Similar to our Twitter example, we'll be incorporating Facebook posts with a web popup as well:

1. In the Chapter 9 folder, copy the Facebook Web Pop-Up project folder to your desktop. All the configuration, libraries, and assets needed are already included. You can download the project files that accompany this book from the Packt Publishing website.
2. Create a new main.lua file and save it to the project folder.
3. Set the following variables at the beginning of the code:

   display.setStatusBar( display.HiddenStatusBar )
   
   local ui = require("ui")
   
   local openBtn
   local closeBtn
   local score = 100

4. Create a local function called onOpenTouch() with an event parameter. Add an if statement when the event receives a "release" action:

   local onOpenTouch = function( event )
     if event.phase == "release" then

5. Add the following local variables that include the strings that we'll be implementing in the Facebook post:

       local appId = "0123456789" -- Your personal FB App ID from the facebook developer's website
     
       local message1 = "Your App Name Here"
       local message2 = "Posting to Facebook from Corona SDK and got a final score of " ..score.. "."
       local message3 = "Download the game and play!"
       
       local myString1 = string.gsub(message1, "( )", "%%20")
       local myString2 = string.gsub(message2, "( )", "%%20")
       local myString3 = string.gsub(message3, "( )", "%%20")

6. Introduce the native web popup function that links to the Facebook account. Include parameters for the Facebook dialog box that redirects the URL of your preferred website, the display with a touch mode that connects to your app URL, and an image URL that presents your app icon or company logo. Concatenate all variables with string methods to output all messages. Close the function. Add in the openBtn UI function. You will need to replace all of the following URL information with your own:

   native.showWebPopup(0, 0, 320, 300, "http://www.facebook.com/dialog/feed?app_id=" .. appId .. "&redirect_uri=http://www.yourwebsite.com&display=touch&link=http://www.yourgamelink.com&picture=http://www.yourwebsite.com/image.png&name=" ..myString1.. "&caption=" ..myString2.. "&description=".. myString3)  
     
     end
   end
   
     openBtn = ui.newButton{
     defaultSrc = "openbtn.png",
     defaultX = 90,
     defaultY = 90,
     overSrc = "openbtn-over.png",
     overX = 90,
     overY = 90,
     onEvent = onOpenTouch,
   }
   openBtn.x = 110; openBtn.y = 350

   Note

   More information pertaining to the Facebook Dialog can be found on the Facebook Developers website at http://developers.facebook.com/docs/reference/dialogs/.

7. Create a local function called onCloseTouch() with an event parameter. Add an if statement with event.phase == "release" to activate native.cancelWebPopup(). Set up the closeBtn UI function:

   local onCloseTouch = function( event )
     if event.phase == "release" then    
     
       native.cancelWebPopup()    
     
     end
   end
   
     closeBtn = ui.newButton{
     defaultSrc = "closebtn.png",
     defaultX = 90,
     defaultY = 90,
     overSrc = "closebtn-over.png",
     overX = 90,
     overY = 90,
     onEvent = onCloseTouch,
   }
   
   closeBtn.x = 210; closeBtn.y = 350

8. Save the file and run the project in the simulator. Make sure you're connected to the Internet and your Facebook account to see the results.
   

What just happened?

Within the onOpenTouch(event) function, several variables are called when openBtn is pressed and released. Notice that local appId indicates a string of numbers that you can obtain after creating an app on the Facebook Developers website.

message1, message2, and message3 are the strings that display the message post. myString1, myString2, and myString3 help replace the spaces indicated in message1, message2, and message3.

The native.showWebPopup() function displays with a dimension of 320 x 300 and presents the dialog URL to Facebook. The following parameters display accordingly:

• app_id: This is your unique ID created on the Facebook Developer website. For example, "1234567".
• redirect_uri: The URL to redirect to after the user clicks on a button on the dialog. This is required in the parameters.
• display: This displays the mode to render the dialog.
• touch: This is used on smart phone devices such as iPhone and Android. This fits the dialog screen within small dimensions.
• link: This is the link attached to the post.
• picture: This is the URL of a picture to the post.
• name: This is the name of the link attachment.
• caption: This is the caption of the link (appears beneath the link name).
• description: This is the description of the link (appears beneath the link caption).

When the web popup is no longer required and needs to be closed, onCloseTouch(event) is called by closeBtn. This will take the event parameter "release" and call native.cancelWebPopup(). This particular function will dismiss the current web popup.