8
Creating Facebook App environment 1. Go to Facebook Developers http://developers.facebook.com/ To access the Moonlight Facebook apps account login as Chloe Bauer

Creating Facebook App environment

  • Upload
    bijan

  • View
    57

  • Download
    2

Embed Size (px)

DESCRIPTION

Creating Facebook App environment. 1. Go to Facebook Developers http://developers.facebook.com/ To a ccess the Moonlight Facebook apps account login as Chloe Bauer. 2. Left sidebar is showing all the current Moonlight apps To create a new application – go to Create New App. - PowerPoint PPT Presentation

Citation preview

Page 1: Creating  Facebook  App environment

Creating Facebook App environment1. Go to Facebook Developers http://developers.facebook.com/To access the Moonlight Facebook apps account login as Chloe Bauer

Page 2: Creating  Facebook  App environment

2. Left sidebar is showing all the current Moonlight apps To create a new application – go to Create New App

Page 3: Creating  Facebook  App environment

3. Add the application name, namespace (optional) and click Continue

Page 4: Creating  Facebook  App environment

4. On the Basic info tab – the namespace is not necessary to input, but if you create one you can use it as an alternative for the App ID.E.g. http://apps.facebook.com/439441832799664/ would be http://apps.facebook.com/mymoonlightapp/

App domain should always be the main hosting domain of the app files.For this application we are using Moonlight hosting, so the hosting ismoonlighthk.com

Page 5: Creating  Facebook  App environment

5. Add the canvas URL and Secure Canvas URL to the App on on Facebook tab (These should be the URLs where application files exist on the server)For Secure URL, it’s the same location but remember to add the HTTPS.

Canvas Width: The canvas width is better to leave to Fluid. This means that Facebook will adjust width according to your app width.However, the max Facebook tab width is 810px so make sure your html app (wrapper)is not wider than 810px .

Canvas Height: You can leave this Fluid or if you know your app height you can insert theheight in pixels. If your html app height exceeds the pixels determined on this section.You will see unwanted scrollbars on your app canvas. It’s also possible to set height on the app files: See more details here: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/and here : http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

Page 6: Creating  Facebook  App environment

6. Add the Facebook tab URL and Secure URL, use the same URLs as on the Facebook Apps and click Save Changes

You can upload a default Page Tab image (111x74px) that will show upon the account tab where the app is installed.

Page 7: Creating  Facebook  App environment

Bottom point, you now have to go to this address:http://www.facebook.com/dialog/pagetab?app_id={YOUR_APP_ID}&redirect_uri={YOUR_URL}e.g. http://www.facebook.com/dialog/pagetab?app_id=433007400106512&redirect_uri=http://moonlighthk.com/facebookapps/mlwelcome

{YOUR_APP_ID} -> should be replaced with the APP ID generated by Facebook, you can find it for each app at developers.facebook.com -> apps{YOUR_URL} -> should be replaced with the address where your tab is hosted

7. Once you have finished adding all the details and “Saved Changes”, you can see the application at: http://apps.facebook.com/Your App ID/.But most often you need to add the application to a Facebook profile. In order to do this you will need to go this address http://www.facebook.com/dialog/pagetab?app_id={YOUR_APP_ID}&redirect_uri={YOUR_URL}

Page 8: Creating  Facebook  App environment

8. After executing the AppID and AppURL , you will see a list of the Facebook pages that you have admin access. Simply choose the Facebook page from the dropdown that you want to add your application, and click

“Add Page Tab” button

To see you application on the Facebook profile, just navigate to the profile page and find the profiles tabs!