Underground Film Journal
More » Underground Film News

How To Make A Custom Facebook Landing Page For Your Movie (Part 2)

Custom Facebook landing page sample

UPDATE: This tutorial covers the new Facebook Page layout launched on Feb. 10, 2011. Upgrade to it now manually before Facebook forces you to do it in a few weeks!

In Part 1, I described how easy it is to load a custom link to your Facebook movie promotional page on which you can spotlight upcoming screenings, a DVD release, your film’s poster, etc.

Now comes the more complicated part: Figuring out exactly how to display that custom info! If you’re not Internet savvy, the best way to have a unique design is to hire a designer or ask a web savvy friend to create one for you. But, if you don’t have either of those, I have a few steps that will help you get the ball rolling yourself first.

I’m going to frame this tutorial by showing you how to display your movie’s poster, or perhaps its DVD box, on your new custom page. Yes, you can upload your poster to your page’s photo album — and you’ll have to do that to get this to work — but if you want your poster to hit your Facebook visitors in the face right first thing when they come to your page, this is how to do that.

(Images for this demo, will show me putting an El Topo/Rambo mashup image I made for fun on the Underground Film Journal’s own custom link. Normally, I have other content there.)

Step 1: Your Number One Rule!

The absolute number one rule you need to know is that Facebook pages have a default width. As of this writing, that width is 520 pixels.

So, to make sure your poster displays properly you need to know how wide it is in pixels. Because if your poster is, say, 600 pixels wide, then the right side of it is going to get cut off on your custom page. That will look sloppy.

If your poster is less than 520 pixels, that’s fine. I’ll teach you how to make that display nicely.

Step 2: Figuring Out Poster Size and Location

Uploading a movie poster to your photo album is a whole ‘nother tutorial. I’m just going to assume you’ve already done that, or if you haven’t that you’re going to figure out how to do that on your own.

    1. So, now your poster is uploaded to your Photo Album. Navigate to it — not just the thumbnail either in an index. Display the poster full size as it appears on Facebook.
    2. To find out the size and location of this image, you need to right-click it with your mouse. When you right-click the image, the pop-up menu will either say something like “View Image Info” (Firefox) or “Properties” (Internet Explorer). You’ll want to left-click that option, whichever it says.
    3. A new informational screen for the image will then pop up.

Image Location and size

  1. To determine your poster’s size, look for the field that says “Dimensions” and it will say something like “520 x 700.” Those numbers are the pixel dimensions of the image. The first number is always the width and the second number is the height. If that first number is 520 or less, you’re in the clear. If it’s higher than 520, then you need to find out how to make it smaller. (Again, that’s another tutorial.)
  2. Also on that image informational pop-up screen, there will be a field that says “Location” that starts with “http://” and is followed by a long string of letters and numbers ending in “.jpg,” like this: “http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc3/20158_268002712277_14686487277_3098116_6388042_n.jpg.” This is Facebook’s image location for your poster. You’ll need to copy and paste that image location for future reference in this tutorial, e.g. just paste it into a Word document for now.

Step 3: Finding Your Custom Link Editing Screen

Now we need to edit your new custom Facebook landing page.

    1. To start, go back to your main Facebook movie page index. At the top right of your main page, you’ll see a button that says “Edit Page.” Click that.

Facebook edit button

    1. Clicking “Edit Page” will take you to the default “Manage Permissions” editing page. We’re going to ignore what’s in the middle of this page.
    2. Instead, click the Apps link that’s on the left-side menu.

      Facebook editing menu

    3. This will take you to a menu of all the special applications that you’ve loaded already or are available for you to load on your page.
    4. After you’ve clicked Apps in the menu, you should see one that’s labeled “Resources – FBML” among the list in the middle of the page. Underneath the lengthy description of this app, you should see a link that says “Go to App.” That’s what you want to click, so go ahead and do that.

FBML editing link

  1. This will take you to your FBML editing screen.

(Special Tip: If you want to remove FBML from your page — or any other app — this is where you can do that. Just click the “X” icon to the right of the app’s description.)

Step 4: Create a New Link Name

On the FBML editing page, you’ll basically just see two editing boxes. The top, smaller one is labeled “Box Title” and the bottom, bigger one is “FBML.”

FBML editing screen

  1. The Box Title should have the letters FBML already entered into it. This is where the name for your new custom landing link will go. You can change this as many times as you want, so don’t get scared you’re going to input something incorrectly!
  2. So, just type over the letters FBML to whatever you think you’re going to display on your custom tab: Screenings, Poster, Trailer, Purchase, etc.
  3. Once you’ve renamed the Box Title, hit the “Save Changes” button at the bottom and your new custom tab has a new name.

Step 5: Displaying Your Poster

As I said in Part 1, FBML stands for Facebook Markup Language, which is a special computer language developed by Facebook to get things to display on these custom pages. Don’t worry! You don’t need to know any FBML to get anything to appear on your own custom page.

(An aside: You might read elsewhere on the Internet that Facebook is getting rid of FBML, which is sort of true. Facebook no longer supports the FBML language, but since you’re not using it, this doesn’t matter to you. The actual FBML link should be around for a good long while since so many businesses are currently using it.)

However, you will need to use some basic HTML, the language of all web pages, to get your poster to display on your custom page. The nice thing about HTML is that it’s pretty simple to manipulate and really you can just copy and paste a lot of it from other sources, which is what I’m going to give you here.

Getting your poster to appear is an extremely easy line of HTML code, as long as you copied your poster’s image location like I said in Step 2 above. If your poster image is 520 pixels wide, just follow these instructions below. If your poster image is less than 520 pixels wide, skip down to Step 5.1.

    1. First, copy the below line of HTML code and paste it into the big FBML editing box.
      Copy:
      <img style="margin: 0; padding: 0;" src="Your Facebook Poster" />
    2. Next, go copy the Facebook poster image location that I had you do in Step 2.
    3. Paste that actual image location that you copied over the text that reads “Facebook Poster Location” in the code brackets, so it looks something like:
      Example: <img src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc3/20158_268002712277_14686487277_3098116_6388042_n.jpg" />
    4. Hit the “Save Changes” button and you’re done! Almost. Skip to Step 6 below.

Full size poster

Step 5.1: Centering a Small Poster Image

If your poster is less than 520 pixels wide, you’ll want to center it. Don’t worry it’s easy, you just need a little fancier styling code that I’ll give you:

    1. First, copy the below line of HTML code and paste it into the big FBML editing box.
      Copy: <p style="text-align: center; margin: 0; padding: 0;"><img style="margin: 0; padding: 0;" src="Facebook Poster Location" /></p>
    2. Then, go copy the Facebook poster image location that I had you do in Step 2.
    3. Paste that actual image location that you copied over the text that reads “Facebook Poster Location” in the code brackets, so it looks something like:
      Example: <p style="text-align: center; margin: 0; padding: 0;"><img style="margin: 0; padding: 0;" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc3/20158_268002712277_14686487277_3098116_6388042_n.jpg" /></p>
    4. Hit the “Save Changes” button and you’re done! Almost. One last step.

Small poster centered

Step 6: Make Your Poster Your Default Landing Page

If you want to make your poster your default landing page when people visit your Facebook page, this is how you do that. Otherwise, you’re done!

  1. The first thing you need to do is to go back to your Facebook page editing screen. (See Step 3 #1 if you forget where that is.)
  2. “Manage Permissions” should be your default page editing screen, but if it isn’t click that option in the menu on the left.
  3. On the Permissions screen, look for where it says “Default Landing Tab.” There, from the pull-down menu, select the name you’ve given to your FBML link, such as “Poster.”
  4. Click the “Save Changes” button and your poster is now the default link visitors to your Facebook page will now see.

Special Note: As of this writing, though, Facebook has made their default landing page a bit quirky. If you’ve set your poster to be your default, there are two scenarios in which this will be true; and one where it’s not:

Scenario One: If a visitor goes to your Facebook movie page and he is not logged in to Facebook, he will get the default poster. (Therefore, if YOU log out of Facebook and go to your own Facebook movie page, you’ll see the default poster.)

Scenario Two: If a visitor is logged into Facebook, but has not “liked” your page, he will also get the default poster when he visits.

Scenario Three: If a visitor is logged into Facebook and has “liked” your page, then he will get the Wall as the default.

P.S.: If you have any questions about following this tutorial, please leave a comment below and I’ll be happy to answer them as best I can!


Underground Film Feedback (13 comments)

Sorry, no new comments allowed, but please read through our comment archive.

  • Chris Hansen says:

    Mike,

    This was incredibly helpful! I appreciate you going into such detail with this. I managed to do everything you suggested, but with Facebook’s Page upgrade, I’m not sure the default page part is working – if you get a chance to visit American Messiah’s FB page, let me know if it opens to the Poster as default. It doesn’t seem to be opening to that for me!

  • The default page setting has become a little quirkier since Facebook updated their page layouts today.

    I’ve amended the above to include the details of that quirkiness. And from what I can tell, you did it all perfectly!

  • Very useful information regarding Facebook landing page design, it help us a lot.

  • Kristy says:

    Thank you Mike for providing this very informative tutorial. You provided a “how to” that facebook apparently didn’t have the wisdom to provide in its own help files.

  • Mike Lewis says:

    Hi! Nice post.
    But I have a problem:
    “Default Landing Tab” option is not shown to me. It is not there!.
    My fanpage category is “blog & webs> society & culture”

    Is that the matter?

    Thank you

    • That shouldn’t make a difference. I have several different categories of Facebook fan Pages and they all give me the same options.

      Are you sure you’re looking at the “Manage Permissions” editing screen? All my pages say the same thing: There’s an option that says “Default Landing Tab” next to a drop-down menu that the default option is set to “Wall.”

      • Derek says:

        I am having the same problem. My category is local business.

        • If you click “Edit Page” from your main page, you should get the “Manage Permissions” editing options. Are you seeing this?

          In the middle of the page, the 5th option down says “Default Landing Tab”. Make sure you’re looking in this spot.

  • Matt says:

    Thank you! worked like a charm!

  • victoria says:

    I’ve been working on tryin to set my default landing page for like 2 hours now…and I do not have the option to do so under “Edit Page” and then “Manage Permissions”. It does not have a drop down box for it setting the default landing page. All it has is:

    Page Visibility:

    Country Restrictions:

    Age Restrictions:

    Wall Tab Shows:

    Posting Ability: Users can write or post content on the wall

    Users can add photos

    Users can add videos

    Moderation Blocklist:

    Profanity Blocklist:

    Delete Page:

    Those are the only options under Manage permissions! Help!

  • mahyar says:

    hi
    thank you for your usefull instruction
    but in this weiting there is no way for senarios
    faceebook choose senario ONE
    why?????????
    my visitors that logged in to facebook and like the movie page , not seen the default poster, why?
    is there anyway?