1 / 8

Creating Facebook App environment

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.

bijan
Download Presentation

Creating Facebook App environment

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. 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

  5. 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/ 5. Add the canvas URL and Secure Canvas URL to the App on onFacebook 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.

  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.

  7. 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} 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

  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!

More Related