Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The middle part is an iFrame that points to a page on my website. If we take a look at the page that the iFrame points to you can see that it's the same content that shows up on Facebook's Canvas. This is what we need to create for our new app. Before you do that, though, you need to make sure that your web host has an SSL Certificate. This allows your website to talk to Facebook securely. This is sometimes included on a web hosting plan, but has to be turned on or added to other plans. So make sure you contact your hosting provider. If you need help understanding how to set up a host or how to use FTP, make sure you check out my course on Managing a Hosted Website.
So I have a connection to my server, and I've created a folder called Facebook PHP and placed an index.php file in there. The file is super simple to some basic HTML starter code with an h1 tag that says Hello World. To create the app container you need to go to Facelook's developer page and click on the Apps link at the very top. Then you need to hit the Create New App button. You will see a pop-up window that looks like this. This part of creating your app is really important, because the name of your app has to be unique, and you won't be able to easily change it later.
Rollover to the question mark next to the App Name to see some other requirements for naming your App. The App Namespace is also important and will become the URL of your app. So be careful when creating it. I'm going to call my app viewsourcephp and the Namespace will be viewsourcephp. Since we've already set up our own hosting, I want to make sure the web hosting is off. You may see a security check here, so just type in what it says. Now you should see a page that looks like this. You can see that you've received an App ID, as well as an App Secret.
Those will be important later on. Though the first thing you need to do, on this screen, is to add your App Domains. That's just a URL to the website hosting your app. You should enter a version with and without the WWW. My app will be hosted in iviewsource.com, so I'll add iviewsource.com and www.iviewsource.com. If you want users to have access to your apps outside of Facebook, you'll want to add your domain to this section called Website with Facebook Login. Make sure you put the slash at end.
If you want your app to be hosted inside of Facebook Canvas and searchable through Facebook's App Directory then you'll need the URL to your Facebook page on this section called App on Facebook. You'll need the regular as well as a secure URL to your page. This last piece will be the name of the folder on your server. Once again, make sure you put the slashes at the end. You can also choose a fixed or a fluid Canvas. A Fixed Canvas will always have a certain size and Fluid Canvas adjusts to the size of the user's window and is almost always better.
So now we are done setting up the app container. I'll hit Save changes. If you have done everything correctly your app is good to go just point your browser to the URL of your app, which is the same as your canvas URL to test it out. So it should be apps.facebook.com plus the name of your application. Setting up your app is pretty easy. You do need to make sure that you get an SSL Certificate on your hosting account. Also, be careful that you think about your apps name a bit, changing those can be challenging. And, as you can see, your app doesn't actually have to use any Open Graph Info.
It can have normal HTML or PHP content. It's just a lot more useful when you have access to Social Graph Data.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99349 Viewers
56 Video lessons · 112609 Viewers
71 Video lessons · 81429 Viewers
131 Video lessons · 39091 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.