Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, if you can't find the app that you want, what you could do is you could create your own, completely from scratch. That's called creating an iFrame app and it's something that you do as an actual Facebook developer. You don't need to know how to code, you only need to know how to make a web site, really or you need to hire somebody, who can make a web site. This used to be a much bigger deal before we went to the Timeline design because Facebook page admins used to be able to specify in their Admin Panel, in Edit page, in Manage Permissions, they could specify which page or tab or app should be the default landing page.
So if you told somebody of the URL for your Facebook page, they would land on a specific page that you created just for new visitors. You are no longer able to specify which app should be the default landing page. You can go to your Apps section and choose Link to this tab. So you could copy the permanent link to these apps. And the idea is that you create your own app, and then in your advertising and your other marketing, and especially your Facebook ads that I'll be talking about in a later video, you link directly to that tab.
Now, let me give you an example. Here is our friend The Publicity Hound and we know that LinkedIn is just a regular or third party app and so is Twitter probably. But Publicity tips, this doesn't look sound like anything that she was able to install right off the shelf, and if you click it, you see that what this was it probably used to be Joan's landing page. Maybe by the time you visit this page if you go to The Publicity Hound Facebook page this will be gone, but this is essentially what a Facebook landing page used to look like.
And this is served and created directly on Joan's web site. If you have an existing custom iFrame app, Facebook will still keep it going, it's just that you can't specify that people automatically see that as soon as they get to your page. Joan though could certainly include links to this so that when people land on here that they're encouraged to sign up for her newsletter and to Like her page and so on. Now another example of creating your own custom iFrame app is from First Internet Media. For example, if we look at their portfolio or what they do or get in touch, these are all the things that they've created on their own.
If I click Portfolio for example, we see a beautiful web page, that's part of his actual Facebook page. This is something that they've created on their own, and that they're serving probably from their own web site. But then they created a custom Facebook iFrame app and they linked it to this, and then they installed that app in their Facebook page and that's what you're going to learn how to do in this video. A lot of times if you're wondering if an app is a custom app or not, you can often right-click right on it and if it says View Frame Source that means an iFrame the internal frame information, and if I choose that, we can see his actual coding for the page that he's serving.
The custom app that I want to develop is for my own Facebook page, Social Media Marketing. I would like to add an app that people can click, and view within my Facebook page; the free samples that lynda.com puts on YouTube. There are four basic steps to creating a custom app for your Facebook page. The first one is to make the web page that you'll be pulling in to the iFrame. The second step is to make sure that it's hosted on a secure web server, and I'll show you that in a second. The third step is to actually create the app on the Facebook developer page, which we'll go through, and the fourth step is to install it on your Facebook page.
Okay, so number one, create the web page, and that is created right here. On my senecadesign.com web site, I have a folder where I keep my various pages that I use for iFrame apps. And here's the one that I use for Social Media Marketing. Now, this one is 520 pixels wide. That was the requirement before for iFrames, that it couldn't be more than 520 pixels. With the new Timeline design, you can keep them at 520 pixels, in which case they'll be centered, like that one that we saw on Joan Stewart's Publicity Hound page, or you can make them at 810 pixels wide like the one that we saw on First Internet Media's page.
Now, I would like to use up the real estate for the 810 pixels, but I haven't really gotten around to it. So I'm just going to stick with 520 for now. Now this is just a regular page that I constructed in Dreamweaver and it has a link to the free YouTube videos for Bliss No.5. Right now, it's showing an older video but as soon as this title goes up, I'll link to one of the newer videos. At the bottom is a link to see more of my videos on lynda.com. So that's done. The second step is to make sure that it's hosted on a secure server.
You probably are aware that Facebook is very careful about security. And recently, they have moved almost everybody who uses Facebook into using what's called Secure Browsing. If you look at the URL of the page that you're looking at, and you're on Facebook, it probably starts with HTTPS colon. Right now, I'm just on Seneca site which HTTP. It will not allow you to pull in information from an unsecure web site. It has to be viewable by using the secure protocol.
That's not something that normally comes with most web hosting services. You often have to pay extra for it. Now, this web site happens to be hosted on DreamHost, which is a wonderful web host. I just want to show you what was involved when I realized I needed to add secure hosting to my package. So if we come down here to the bottom, you can see here are all of the DreamHost offerings and I'm going to show more, and if we scroll down all the way to the bottom to account upgrades, this is what you're looking for, SSL Secure Certificate.
When you have this setup on your web site, then you'll be able to use pages that you're hosting there as iFrame apps on your Facebook page. So the SSL Secure Certificate costs 15 bucks a year, but it requires a unique IP address which also seldom comes with shared hosting services and that costs $3.95 a month, so about 50 bucks a year plus $15, $65 a year. In my mind, $65 a year is a very small price to pay in order to create any kind of app that I want for Facebook.
So I'm going to create a new tab and for this, you want to go to this web page www.Facebook.com/developers. Now, if you've never been here before you'll get a prompt that says that you need to install the Facebook developer application. So go ahead and install that and then you'll be brought to this screen and it'll probably be empty, but I've done this a few times before, as you can see. So after you've installed the developer app, the first thing you want to do is come over here and choose Create new app.
You have to give it a name, and I'm going to call this one Video Sample, and if there is already an app by that name, it will let you know, but it's valid, so we're good to go. And then, we need to give it a name space and a name space is a unique character string that's at least eight characters. Now, this is not something that your visitors will ever encounter. It's just something that they need to have in the background. So you can just go ahead and give it any kind of name space that you want and you'll get a little readout telling you if it's good to go or not.
So I'll try video_sample; available, that sounds good. And then, they're going to suggest that you'd like to use their own web hosting service. I know, we don't care because we already have our web host, and we do agree to the Facebook platform policies, you should read that, and basically it says what you'd expect it to say; don't use other people's information and don't use anything objectionable. So we'll click Continue. Are you a human? Okay, so now we need to enter a bunch of settings, and we're going to replace some existing art with our own custom art.
It automatically assigns you an App ID and something called App Secrets; I'm not quite sure what they're used for. However, the App ID sometimes does come in handy when you're trying to construct URLs to install things; so you might want to copy that down into another document. The icon I'm going to replace, it's this little icon right here, with a 16x16 image that stands for the app. Now you can leave these alone and come back and update them later if you'd like, but I actually have one already prepared, so I'm going to click Edit icon and I'm going to upload my Lynda-tiny.gif, which might take a few seconds to appear, but it will.
And actually this used to be much more used before the Timeline design. I'm not even sure if it's used now, but we'll see. I had it ready, so why not use it. Now, the App Display Name is Video Sample and the name space is what we had already entered. Here is my Contact Information and I actually don't need to enter any of the information up here. We're going to go right down to web site, and the site URL is the URL for where my page is being hosted from, just that part, not the entire URL of this actual web page.
And under app on Facebook, the Canvas URL is the same as this one, so I'm just going to copy and paste and the secure Canvas URL is the same one only with S, add it after the P, and then go on to Page Tab; they're still calling it Page Tab from the olden days, when these apps were tabs, but these are now apps at the top. We just want to know what is the name for the app that people see when they go to your Facebook, you know in the App bar.
This is something that you can change within your Manage Settings on your Facebook page, but I'll call it once again Sample Videos. Now, it wants to know what is the exact URL for this iFrame? So I know it starts with this, this one right here, I'm going to copy that and paste it here, and then the rest of it was Social Media Marketing_FB.html. And then the secure version, which is the same thing only with S added after the HTTP. So I'll copy that, paste in here and add an S. We don't need anything for the edit URL; we can leave that empty.
But what does that icon look like in the apps bar? So this is 111x74 pixels. And I included a placeholder image in your Exercise Files. So you can see exactly what 111x74 looks like and I have already saved an image that I want to use. So I'm going to click change here. I don't want the default ugly one. I'm going to choose the file and it's this one right here, and then Page Tab Width, as I mentioned we are 520 pixels, but I could have created a page that's 810 pixels.
This is what we want. We'll click save changes. So it may take a while for it to propagate to all servers, that's fine, but we were successful. And now, let's go back to our Apps page where the basic information for your app is listed. There's one more thing that we need to do while we're here with our developer hats on. Go back to Edit App, and you see here where it says Settings Advanced for this App? Select Advanced and we can scroll past all of these, probably if we made some choices here, it would be good.
But I found that you can just drive blithely through all those fields right down here to the Contact Info, at the very bottom, there is create Facebook page, because we need to create a Facebook page, since that is how we're actually going to install the app, as you'll see. So choose Create Facebook page. It's saying, are you sure that you want to do that? Yes. It has been created and connected. There it is right there. So let's save our changes and we should include the URL to our privacy policies, if we are going to actually make this public but we can come back to that later.
The main thing is that you click on this App Page URL and this is what you want to actually bookmark, but we're going to go right to that page. This should look familiar, we're in the wizard for setting up a new page. We're just going to skip all of this and we'll go ahead and Like our community; find we're already connected. And I found sometimes there can be some weirdness after you've gone through this, so you need to reload the page. There we go, you can hide the Admin Panel, this page is not published, but you come here to the gear icon and this is how you add an app to the page. Strange, huh? But that's what we're going to do, add the app to the page.
Choose Facebook page and all the pages that you admin should be here, Social Media Marketing and then click Add Page tab. So you're not immediately brought there. You need to go to that page that you just added it to. You might need to refresh the page. There it is and let's click it and test it. Perfect. So you can add that custom iFrame to multiple pages if you want. If you had a signup sheet for your newsletter or something like that and you had multiple pages that you admin, add it to each one of those. If I go back to Social Media Marketing and I go to the Admin Panel > Manage > Edit page > Apps you should see it right there.
So I guess this is why I should have added an icon for this square. I didn't think I would need it, but now I realize it's going to be used in my Apps page. It would be nice to have the little Lynda symbol right there, but I can always go back to the developers' page and edit it there. Now, if I wanted to send somebody directly to that custom app on my Facebook page, like what you might do with a landing page, then you choose link to this tab and this is the URL that you would copy and use. So there are lot of steps involved and a little bit of expense, but it gives you almost complete control and freedom over the kinds of custom apps that you can add to your Facebook pages.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.