Integrating Hello World - Furman University



Bonus Lab– Facebook Application Development with PHP/MySQL

We’ll wrap up the term with some experiments in practical usage of our PHP and MySQL skills. Specifically, we’ll apply them to the creation of applications for the popular social networking site Facebook. The objective of this activity is not to make you into an expert, but to equip you with the basic tools to get started with application design, and to see that the skills you’ve learned in CS19 do equip you with the ability to write some of those interesting Facebook apps that you may have already encountered.

As you work through this activity, use your creativity to think of different experiments, and other ideas for apps that you might write.

1. Create a working folder called facebook on your USB drive or on the G drive, and inside of that another folder called quotes. Copy all of the files from the facebook files folder in the OUT folder on the server to this new directory. Then set up a Dreamweaver site that points to your quotes folder.

2. Connect to the CS department server using WinSCP3. Inside the www directory, create a new directory called facebook, and inside that a new directory called quotes. This is the directory to which you’ll upload all of your files today.

3. Go to

4. Click on 'Get Started'

5. Click on 'Add Facebook Developer Application'

6. A link to 'Developer' should appear in the left nav on Facebook now. Go to the Developer App.

7. Click on the button that says 'Setup New Application'

8. Here are the steps for filling out the form:

a. Application Name: put ‘Favorite Quote’ or something similar.

b. Check the Terms of Service box.

c. Click on the Optional Fields link - this will bring up more options.

d. Support E-mail: your Facebook contact email may be filled in automatically, but you might not want to give out your personal email to everyone who adds your app! You do have to put a valid email address that you can check, however.

e. Callback Url: put ''

f. Canvas Page URL: : pick a name (no spaces) that makes sense. Like “myfavquotes” or “cs19projectquotes” or something. The trick is, it has to be unique.

g. Use FBML: keep this setting.

h. Application Type: leave this set to 'Website'.

i. Can your application be added to Facebook: set to 'yes' - this will bring up more options.

j. TOS URL: you can leave this blank.

k. Who can add: select ‘Users’ and ‘All pages’.

l. Post-Add URL: you should put your full canvas page url.

m. Default FBML: type in the text 'hello'. (This is what will appear on your profile page if your application doesn’t set it explicitly.)

n. Default Profile Box: leave the ‘wide’ setting.

o. Developer Mode: This allows you to restrict access to adding your app to you alone. However, I want to be able to try your app out later, so don’t check this.

p. Leave everything else under Installation Options blank.

q. Side Nav Url: you should put your canvas page url here as well.

r. Private Installation: check this, to keep news about your app out of the News Feed.

s. Leave everything else under Integration Points blank.

9. Click on the 'Submit' button.

10. Go to the 'My Applications' page and check that your application was created. There are a couple ways to get here depending on where you are in the Developer application. (You may be taken there automatically.)

11. Open the 'appinclude.php' file in Dreamweaver. (This is a file that you will include at the top of all the php pages in your app.) Replace '[your app_key]' and '[your secret]' with the 'app_key' and 'secret' for your application that are shown on the 'My Applications' page of the Developer app. You should also replace our callback url with your callback url.

12. There are several ‘index’ files in the OUT folder. Each is a potential home page for your application. Open ‘index_hello’ first and read the code. Make no changes to it.

13. Use WinSCP3 to upload ‘index_hello.php’ to the quotes directory on the server. Also upload all of the other files that I’ve provided that do not have ‘index’ in their name. Rename ‘index_hello.php’ to simply ‘index.php’ on the server.

*** Re-test the following step. It might not be right. There are two points I want to make: (1) two ways to access, and (2) you have to add the app.

14. Type your app’s callback url into your browser's address bar. You could also type in your canvas page url because going there will also cause your 'index.php' to run. (Though as we’ll see, using the canvas page URL causes your app to run inside the Facebook environment, and thus gives you more features to play with.) Either way, the only way to add your application at this time is to type a url into your browser's address bar.

callback url:

canvas page url:

15. Click 'I agree' to accept the terms of service for your application and then click the button 'Add [your application name]' to add it. Keep all the default settings.

16. You should then be redirected to a canvas page that contains the output of your 'index.php' file.

17. Go to your profile and look for a profile box for your application that contains the 'hello'. Remember, this is the default FBML that you set before.

18. Finally look for a left-nav link that will take you back to your canvas page.

19. Let’s repeat this experiment several times. The objectives are to (1) understand the difference between the canvas page and the profile page, and (2) to begin to learn the capabilities of the Facebook Markup Language (FBML).

20. Next, open the file ‘index_hello_FBML.php’ in Dreamweaver. This file uses FBML code. This example allows your application to access your real name and not just your ID. Upload it to the server and rename it ‘index.php’ as you did before.

21. Open your callback URL in the browser. Note that it doesn’t display your name. Why not? Because our server doesn’t recognize FBML code.

22. Open your canvas page URL in the browser. This time, your name appears because the application ran through the Facebook pre-processor. From now on, we’ll just test application examples using the canvas page URL.

23. Facebook apps have access to a lot more information about you than just your name. This uses the users_getInfo() method. What kind of information? If you scroll down to the very end of the file ‘facebookapi_php5_restlib.php’ you’ll find the following array definition that answers the question:

$profile_field_array = array(

"about_me",

"activities",

"affiliations",

"birthday",

"books",

"current_location",

"education_history",

"first_name",

"hometown_location",

"hs_info",

"interests",

"is_app_user",

"last_name",

"meeting_for",

"meeting_sex",

"movies",

"music",

"name",

"notes_count",

"pic",

"pic_big",

"pic_small",

"political",

"profile_update_time",

"quotes",

"relationship_status",

"religion",

"sex",

"significant_other_id",

"status",

"timezone",

"tv",

"wall_count",

"work_history");

Let’s try this out. Repeat the previous process with the file ‘index_myinfo.php’. What information did you get? Feel free to try some experiments with this file before moving on.

24. What do you suppose the friends_get() method does? Try it out using the file ‘index_myfriends.php’.

25. One thing that you probably have noticed by now is that none of this is having any effect on your profile page. Check it out now to see what I mean. It stills says ‘hello’, which was the default setting. Fortunately, Facebook provides a method called profile_setFBML() that is very easy to use and does just what you would expect. Experiment with the provided ‘index_setFBML.php’ file, and see what you can get to appear in the profile window.

Are you starting to see the possibilities? You have a canvas page that allows users who have added your application to set all sorts of options and make other decisions that determine the content that will go on your profile page. Quizzes, photo albums, personality tests, TV show fan apps, etc. are all great examples of this. And you have the tools – PHP in particular – to determine that content and then push it to the profile page.

What we haven’t done yet is incorporate a MySQL database, though hopefully you can see that it’s not a major step past where we’ve gone so far. Tomorrow we’ll build a simple database to hold favorite quotes, then write an application (i.e., ‘index.php’ page) that will hit the DB, select a quote and display it on the profile page.

TO BE CONTINUED…

Bonus Lab Part 2 – Facebook Application Development with PHP/MySQL

Now you have the basic tools necessary to:

• Create the framework of a Facebook application

• Write HTML and PHP code to implement the canvas page that allows users to:

o Configure and adjust the settings of your app

o Input information (using forms, just like we’ve done all term)

o Access and manipulate Facebook information about the user and their friends (using FBML – the Facebook Markup Language)

o Output information on the canvas page itself (simply using the echo command)

o Output information to the profile page (using the profile_setFBML() method provided by Facebook)

• Add the application to your profile

With the full flexibility of PHP at your disposal, you can obviously do anything within Facebook that you’ve done in other projects this term. Since this activity is all about showing you the possibilities, we’ll keep the conclusion relatively simple. You’ll create an application that selects a favorite quote at random from a database of quotes, then displays it on the profile page.

1. First, just for fun – and to review the technique for changing app settings – let’s add an icon to your application, so it won’t have that boring box next to it all the time. Find a suitable icon on the web somewhere. One good source is . Save it to your folder. Then find your way back to the “Edit Settings” page for your application. (Hint: You have to go through the Developer application to do it.) Use this page to add the icon.

2. Create a database table to hold your quotes. This doesn’t rank as one of the most difficult tables you’ve had to design, but if you want to take a shortcut, run the SQL in the file ‘quotes sql.txt’ in the OUT folder. Then add 4-5 more quotes of your own.

3. Using what you learned yesterday, create a new canvas page with the following basic design:

• Include the ‘appinclude.php’ file as in all the examples yesterday.

• Connect to the MySQL server and error check.

• Select your DB and error check.

• Create a SQL command to select a random row from the table. (Here is how you might do that: SELECT * FROM quotes ORDER BY RAND() LIMIT 1 )

• Run the query and error check.

• Create a string that contains all the text that you want to display on your profile page, including the quote, source, and any HTML tags to make it look nice.

• Push the text to the profile page using profile_setFBML().

• Print a confirmation message on the canvas page.

4. Upload and test your canvas page. Give some thought to ways that you could improve or expand on it. Allow the user to add their own quotes? Provide a button on the profile page to get a new random quote? Etc. Be creative!

5. If this were more than an exercise, and you’d created a new app that you wanted to share, the next step would be to publish it by submitting it to Facebook. Explore this by going to the “My Applications” page and clicking on the “Submit Application” link. Note that you have to have 5 users who have added your application before you can do this.

6. Read the page



for some additional suggestions about publishing your app.

All done! I’m looking forward to adding some of your creative apps in the future! For ideas taken from existing apps, take a look at

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download