New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Social Media Marketing with Facebook and Twitter
Illustration by Richard Downs

Creating your own iframe app to customize your Page


From:

Social Media Marketing with Facebook and Twitter

with Anne-Marie Concepción

Video: Creating your own iframe app to customize your Page

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.
Expand all | Collapse all
  1. 1m 3s
    1. Welcome
      1m 3s
  2. 22m 45s
    1. Understanding online marketing
      9m 12s
    2. Comparing Twitter and Facebook
      8m 38s
    3. Preparing for online marketing
      4m 55s
  3. 26m 10s
    1. Setting up your business account
      6m 45s
    2. Creating and applying custom backgrounds
      9m 1s
    3. Tweeting and following
      5m 21s
    4. Following Twitter's terms of service
      5m 3s
  4. 25m 46s
    1. Setting up your personal profile
      7m 42s
    2. Understanding the News Feed
      5m 47s
    3. Controlling access to your posts
      4m 48s
    4. Customizing privacy settings
      3m 30s
    5. Following Facebook's terms of service
      3m 59s
  5. 1h 5m
    1. Crafting follow-worthy Tweets
      8m 55s
    2. Attracting followers
      7m 41s
    3. Following the right people
      6m 10s
    4. Responding to mentions
      5m 40s
    5. Tracking keywords in the Twitter stream
      7m 8s
    6. Using hashtags
      4m 12s
    7. Getting Retweeted
      9m 7s
    8. Adding your Twitter feed to your blog or web site
      4m 51s
    9. Integrating a "Tweet This" feature into your online marketing
      4m 12s
    10. Measuring your impact
      8m 1s
  6. 2h 2m
    1. Touring Facebook Page timeline features and controls
      9m 49s
    2. Creating a new Facebook Page
      7m 50s
    3. Creating a profile picture
      8m 26s
    4. Designing a cover image
      7m 38s
    5. Creating a combined cover-and-profile image
      8m 43s
    6. Using the admin panel
      4m 26s
    7. Editing important Page settings
      7m 19s
    8. Adding and featuring Page admins
      6m 0s
    9. Customizing the apps bar
      5m 39s
    10. Posting to your Page strategically (for EdgeRank)
      5m 18s
    11. Pinning, highlighting, and adding milestone posts to the timeline
      6m 18s
    12. Managing spam by hiding and unhiding user posts
      6m 3s
    13. Using the Notes app for longer posts
      5m 43s
    14. Using Facebook as your Page
      4m 58s
    15. Adding favorite Pages to your timeline
      4m 9s
    16. Building an audience for your Page
      7m 22s
    17. Adding a Facebook Page feed to your web site
      7m 38s
    18. Analyzing traffic with Facebook Insights
      9m 8s
  7. 59m 22s
    1. Reducing your workload with social media management programs
      9m 27s
    2. Enhancing your Page with Facebook apps
      5m 53s
    3. Creating your own iframe app to customize your Page
      14m 55s
    4. Using a third-party iframe app
      6m 39s
    5. Adding a Like button to your content outside of Facebook
      6m 29s
    6. Advertising on Facebook with Facebook Ads
      12m 28s
    7. Advertising on Twitter with sponsored Tweets
      3m 31s
  8. 3m 59s
    1. Next steps
      3m 59s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Social Media Marketing with Facebook and Twitter
5h 27m Intermediate Oct 16, 2009 Updated Apr 16, 2012

Viewers: in countries Watching now:

In Social Media Marketing with Facebook and Twitter, Anne-Marie Concepción shows dozens of ways to promote a company's brand, increase sales, engage customers, and drive site traffic using Facebook and Twitter. The course covers not only the fundamentals of social media marketing, but also the basics of creating a top-level online presence. From building Facebook pages to authoring SEO-friendly Twitter bios, the course dives into the details of both services and discusses how to maximize the impact of social marketing with third-party add-ons.

Topics include:
  • Understanding online marketing
  • Keeping business and personal accounts separate
  • Developing a marketing funnel strategy
  • Creating a branded Twitter page background
  • Optimizing tweets to help them go viral
  • Leveraging the latest Facebook features for pages
  • Managing your Facebook Timeline
  • Creating targeted Facebook social ads
  • Customizing Facebook pages with iFrames
  • Using Twitter and Facebook analytics to measure impact
  • Reducing your workload with social media management programs
Subjects:
Social Media Marketing Marketing Content Marketing Small Business Marketing
Software:
Facebook Twitter
Author:
Anne-Marie Concepción

Creating your own iframe app to customize your Page

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.

Anything that you create in a web page can be served up as an app on Facebook. It can have CSS, it can have JavaScript, it could point to videos, as long as you're able to add that little S after HTTP wherever you're hosting it now, and then reload. If it still works, you're good to go. So I just contacted DreamHost and told them that that's what I needed and they set it up. So now, we know the URL of our secure hosted page. And now, we have to go on to step three, which is to turn it into an app; that's the exciting part.

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.

Find answers to the most frequently asked questions about Social Media Marketing with Facebook and Twitter.


Expand all | Collapse all
please wait ...
Q: This course was updated on 4/16/2012. Can you tell me what changed?
A: This course was updated to reflect the introduction of the Facebook Timeline, the new way Facebook organizes the posts, photos, and shares on your page, and the ability to extend your social media marketing campaign on Facebook with new tools such as Social Ads (paid advertisements which display your ads when a user takes an related action, like becoming a fan of your business or sharing their location when they visit it) and the iFrame app, for increasing your fan base controlling how content is shown to non-fans.
Q: Where can I learn more about internet marketing?
A: Discover more on this topic by visiting internet marketing on lynda.com.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Social Media Marketing with Facebook and Twitter.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.