Step 1: Create a new App in Facebook

Please go to https://developers.facebook.com/apps and click Create New App. Only when we create a new app we will be able to get the App ID and App Secret Key. These are the main variables used to establish a connection with Facebook from LiveCode. Select Website, enter your test url and save the App. Now we have created an App called LiveCodeTest.

Step 2: Use Graph Api to get details from Facebook

Goto https://developers.facebook.com/tools/explorer/.

In order to get details from Facebook you should enable permissions. Here you can use the Graph Api explorer to give the correct permissions and test them. To give the correct permissions, first you have to select your Application from the drop down list and then click on the "Get Access Token". This will pop up a list of permissions. Select the necessary permissions depending on your App. In our case we have selected

User_permissions:
(*) user_about_me
(*) user_photos

friends_permissions:
(*) friends_about_me
(*) friends_photos
(*) friends_birthdays

Then click the "Get Access Token" button, this will create the necessary permisions for your App. To check whether the permissions are working you can add this path in the Get field:

/friends?fields=id,name,picture,birthday

This will generate a json which will have your friends id,name,profile picture and birthday. All we have to do now is present the json through LiveCode.

Note: You will get details of people only if they have shared them with you.

Step 3: Creating the LiveCode stack - Design

This is the basic layout of the stack.

Step 4: Starting the plugins

Now is the time to use Andre's plugins. In the attached example stack you will be able to find two stacks "lib.aag.json" and "lib.aag.facebook". Open both the stacks and check the option "start using this stack".

Step 5: Authorization Button

This is where we create the link between the Facebook Api and LiveCode.

Before doing the code for Authorize button, add the libraries to the stack:

on preOpenCard
start using "lib.aag.json"
start using "lib.aag.facebook"
end preOpenCard

 

Authorize button code:

local sRefreshCode, sAuthToken

on mouseUp
-- Use you Facebook App ID and Secret key which you got from creating a App in Facebook.
fb.set "AppID", "123456"
fb.set "AppSecret", "Secret Key"

-- call the request authorization method
-- here we request Authorization for writing to the wall, the rest of the authorizations we have set in Step 2

if pRefreshCode is empty or sAuthToken is empty then
fb.requestAuthorization "publish_stream"
else
answer "you are already authorized"
end if

end mouseUp

on facebookerror pReason
-- this is the callback if there is an error.
answer error pReason
end facebookerror

on facebookcallback pRefreshCode, pAuthToken
-- this is the callback if Authorization is successful.
put pRefreshCode into sRefreshCode
put pAuthToken into sAuthToken
fb.closebrowser
answer info "You are authorized"

end facebookcallback

Step 6: Post on Wall

on mouseUp
put text of field "FBPost" into tData["message"]
--call This will post the message to your wall
put fb.post("/me/feed",tData) into tR

--This function will convert the result json to Array
put jsontoarray(tR) into tA

if tA["id"] is not empty then
answer "post succeded. ID:" && tA["id"]
else
answer "post failed." && tA["error"]["message"]
breakpoint
end if
end mouseUp

Step 7: Get your Profile Picture

on mouseUp
--This will fetch your profile picture
put fb.get("/me/picture?type=large") into image "pic"
end mouseUp

 

on facebookerror pReason
answer error "facebook error" && pReason
put fb.data("last url") &cr&fb.data("last error")
end facebookerror

Step 8: Upload Photo to your App Album

on mouseUp
answer file "Where is the photo?"
if it is not empty then
put ("<file>" & it) into tPhotoData
else
exit to top
end if

ask "Enter caption for photo"
if it is not empty then
put it into tPhotoCaption
else
exit to top
end if

put empty into tPostData
--This will store the caption and the photo
get libURLMultipartFormData(tPostData, "message", tPhotoCaption, "source", tPhotoData)

--This will post the photo to facebook
put fb.post("/me/photos", tPostData, true) into tR
put tR
end mouseUp

 

on facebookerror pReason
answer error pReason
put fb.data("last error")
end facebookerror

Step 9: Show Friends List

on mouseUp
## This will fetch the json.
put fb.get("/me/friends?fields=id,name,picture") into tR
put jsonToArray(tR) into tA

## This will insert friends to the DataGrid

repeat for each key element in tA["data"]
add 1 to tcount
put tA["data"][tcount]["name"] into theDataA[tcount]["Name"]
end repeat


lock screen
set the dgData of group "DataGrid 1" to theDataA

## Hilite first row
set the dgHilitedLines of group "DataGrid 1" to 1
unlock screen

end mouseUp

Note: You will have to modify the DataGrid Row template accordingly. Please see this lesson on creating list of people using Datagrid.

http://lessons.runrev.com/s/lessons/m/datagrid/l/7305-Example-Creating-a-List-of-People

Step 10: Show Birthday's Today

on mouseUp

put the date into tDate
set the itemDel to "/"
if the number of chars in item 1 of tDate is 1 then
put 0 before item 1 of tDate
end if
if the number of chars in item 2 of tDate is 1 then
put 0 before item 2 of tDate
end if
put "20" before item 3 of tDate
put tDate into tShort
delete char 6 to 11 of tShort

## This will fetch the json.

put fb.get("/me/friends?fields=id,name,birthday") into tR
put jsonToArray(tR) into tA

repeat for each key element in tA["data"]
add 1 to tcount
put tA["data"][tcount]["birthday"] into tBirth
replace "\/" with "/" in tBirth
put tBirth into tBirth1

set the itemDel to " "
if the number of chars in item 1 of tBirth1 is 10 then
delete char 6 to 11 of tBirth1
end if

## This will check whether birthday is available to us or not.
if tA["data"][tcount]["birthday"] is not empty then
if tBirth1 = tShort then
put tA["data"][tcount]["name"] & " " & tBirth into theDataA[tcount]["Name"]
end if
end if

end repeat

set the dgData of group "DataGrid 2" to theDataA

## Hilite first row
set the dgHilitedLines of group "DataGrid 2" to 1

end mouseUp

 

Note: You will have to modify the DataGrid Row template accordingly. Please see this lesson on creating list of people using Datagrid.

http://lessons.runrev.com/s/lessons/m/datagrid/l/7305-Example-Creating-a-List-of-People

Step 11: Fetch results

As you can see i am able to list my friends, get my profile picture and get current birthday details.

Aditional Info

For more on Facebook Graphs, please see this link

http://developers.facebook.com/docs/reference/api/

With the above example and the Graph Api you can bring in more details from Facebook. This example is just to get you started with the basics of using the Facebook Api with LiveCode.

We'd like to express our sincere thanks to Andre Garzia for his great plugin!