Facebook Pixel
Join our Facebook Community

How to Create a FaceBook Landing Page for Your Blog

Posted By Darren Rowse 2nd of July 2010 Social Media 0 Comments

Yesterday I shared 5 ways that I’m using Facebook to drive traffic, Build Brand an increase Reader Engagement on my blogs.

After publishing the post I was asked a few questions about things that I brushed over that I thought might be worth following up upon. Here were the three main questions:

  • How did you make the landing page graphic?
  • How do you use the FBML application to serve up the landing page?
  • How do you make your landing page show up to new visitors?

Lets tackle them each in turn.

Creating the Landing Page Graphic

Let me start by saying that I’m very surprised anyone wants to emulate this because I did it myself and I’m certainly no designer.

Also worth noting is that the graphics on the current landing pages are temporary. I’m hoping to move them to a live html landing page in the coming weeks. The FBML facebook application lets you put any kind of html on the landing page which means that almost everything that you see in the graphic that I’ve created can become a live page. I could for instance make the blue mentions of my blogs in the graphic below live links (as would be the link to problogger and my twitter account at the bottom).

Screen shot 2010-06-30 at 9.07.55 PM.png

In the mean time though – I wanted to test the idea of a landing page and get some reader feedback on it before hiring a designer to create the html version.

As a result I went for creating it myself using Keynote. Keynote is a mac application similar (but better than) Powerpoint but you could probably use Powerpoint or pretty much any other kind of graphic program to create such a graphic.

In terms of what to put on the landing pages – I went for two different approaches with my two different facebook pages. On the ProBlogger one I went for a much more personal feel – my face, an invitation to connect with ‘Darren’, a personal introduction etc.

I decided to take this more personal approach because ProBlogger is a brand that I tie myself to quite a bit and my hunch is that a topic like making money from blogging is going to be viewed with suspicion and that a personal approach might help to break that down.

With my dPS landing page I obviously went with some similar layouts but kept it much more branded along the lines of the dPS site – and not very personal. I do try to get across some element of social proof though with the ‘3 million’ highlighted.

dps-facebook-landing1.png

I’m thinking in the next version I’ll incorporate a couple of other factors – firstly something more ‘visual’ (it’s a site about photography after all) and a mention of it all being ‘free’.

How do you use the FBML application to serve up the landing page?

OK – so once you’ve got your graphic or html for the landing page – how do you get it up onto Facebook?

The tool I used was a little application called Static FBML.

The application allows you to add a ‘box’ to your page in which you can render HTML or FBML (Facebook Markup Language). You can also display it as a ‘tab’ (as I’ve done on mine).

Here’s how to create your Static FBML landing page:

1. go to the Static FBML application page on Facebook (make sure you’re logged in)

2. look for the ‘Add to my Page’ link under their logo (top right hand corner of the page) – click it!

Screen shot 2010-07-01 at 10.48.55 AM.png

3. A popup window will open up – it will contain any ‘pages’ that you are admin for that you can use it on. Hit the ‘add to page’ button on the page you’re wanting to use Static FBML to.

Screen shot 2010-07-01 at 10.51.30 AM.png

4. Go to the facebook page that you selected. Look for the ‘Edit page’ link under your page logo and click it.

Screen shot 2010-07-01 at 10.53.06 AM.png

5. On your ‘edit’ page scroll down to the Applications section until you see the FBML page. Click the ‘edit’ link.

Screen shot 2010-07-01 at 10.55.21 AM.png

6. Change the Box Title. I use the title of ‘Welcome’ but have other FBML pages for my newsletter, for my eBooks etc. Under the title box you need to enter your html. Don’t make your title too long as Facebook will cut it off.

In this case my html is pretty simple – I uploaded my image file (created above in Keynote) to my blog and so I simply embed the image code into the FBML application.

I also include two links for people to be able to click on to visit my site and my Twitter account. Once you’re done click ‘save changes’.

edit fbml

7. Return to your page’s ‘edit’ page and look down to find your newly named page in the applications section. This time click ‘Application settings’.

Screen shot 2010-07-01 at 11.00.14 AM.png

8. A popup box will appear that lets you choose where to display your new application. By default it’ll be showing as a ‘box’ but not as a ‘tab’. I hit ‘remove’ for the box and hit ‘add’ for the tab. Then hit ‘okay’.

Screen shot 2010-07-01 at 11.01.07 AM.png

Selecting to show it as a ‘tab’ means that your landing page will now appear at the top of your page

Screen shot 2010-07-01 at 11.04.31 AM.png

Click the tab to check that it all looks ok. You might need to go back into edit the page to tweak it and get it looking right.

How do make your landing page show to new visitors?

The last thing that you might like to do is set up your landing page so that everyone who arrives at your facebook page is automatically taken to it. If you don’t do this it’ll just be a tab in the navigation area of your page and everyone will only see it if they click it.

By default everyone will be taken to your ‘Wall’ tab. This might be ok but if your have a landing page then it makes sense to have people land on it.

1. To change this visit your page and again click the ‘Edit Page’ link under your logo.

Screen shot 2010-07-01 at 10.53.06 AM.png 2. On your editing page look for ‘Wall Settings’ and click ‘edit’.

Screen shot 2010-07-01 at 11.09.23 AM.png

3. You’ll then be presented with an array of settings that you can choose to determine how your ‘Wall’ operates. The one we’re interested in is ‘Default Landing Tab for Everyone Else:’. By default it’ll show ‘Wall’ but you can choose any of your tabs here. Select your landing page and it’ll automatically change your settings.

Screen shot 2010-07-01 at 11.10.10 AM.png

Doing this will mean that anyone landing on your Facebook page for the first time will be taken to your landing page and not your Wall. From my understanding of Facebook’s FAQ they’ll then be taken to your Wall the next time they come to your site (it’d be great if Facebook allowed more control on this at some point to set different rules for what tabs are shown).

Some Final Tips for Facebook Landing Pages

Ultimately what you include on your landing page will depend upon the goals for your facebook page.

  1. Don’t Try to do too Much – As with all good landing pages you don’t want to try to achieve too much on a single page. If you try to get people to like your page, sign up for an email, watch a welcome video, follow you on Twitter, visit your forum, buy your eBook and share your page with a friend you might end up not getting any action. You can do more than one thing on a page but think about your priorities and make your primary one clear.
  2. Consider Secondary pages for other Actions – you can set up as many Static FBML tabs as you like. There’s only so much room in your navigation area to show tabs but you might want to set up other tabs for other purposes.
  3. Call people to Action – make it as clear as possible what action/s you’re wanting people to take. Remember not everyone will be as savvy as you on how to take that action so be as clear as possible.
  4. Test it – you might not get your landing page right the first time – try a variety of approaches to see how people respond.

Show us Your Facebook Landing Page

I know many ProBlogger readers already have facebook landing pages – and those of you who don’t now have the ability to do it – so I’d love to see examples of yours. To get the link simply go to your page’s edit page and scroll down to the application of your tab and click the ‘link to this tab’ link and you’ll have it.

Screen shot 2010-07-01 at 11.00.14 AM.png

Share a link in comments below with a link to your landing page.

About Darren Rowse
Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook and LinkedIn.
Comments
  1. Patricia says: 09/26/2010 at 8:34 am

    Hmmm…. I am being 95% successful here.
    – I managed to create a landing page
    – I embedded the image from one of my Private Picasa albums
    – I set that page as my default landing tab

    BUT! …. when you click on the landing page, it re-directs you to my Picasa album! Furthermore, since I deleted the Picasa album, now it just links to an error message from Picasa!

    Any other alternatives to upload and embed an image without associating them with your blog/photo albums? I know ZERO about coding! :S

    Here is my link…
    http://www.facebook.com/pages/Cupcakes/133519966696120?v=app_4949752878&ref=sgm

  2. For now, here’s my 1st attempt!

    http://www.facebook.com/ExpertsSuccessAcademy?v=app_4949752878

    Thanks for the checklist!

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open