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. Thanks for sharing this step by step guide! I’ve been totally confused by that aspect of Facebook, but now I think I’ll give it a try. I’ll definitely share what I come up with. Thanks again for this awesome knowledge.
    That’s a cool landing page for Problogger, by the way, I think you’re more of a designer than you claim to be. :)

  2. Thanks Darren. This completed the rest of the puzzle from yesterday. Since you work on such a large scale, with such a huge list, I will be very curious to find out how this converts for you in the upcoming months.

    -Joshua Black
    The Underdog Millionaire

  3. Darren,
    Love the way you created your landing page. And the tip – Don’t try to do too much. And I so agree with the “Don’t try to do too much” tip as less is better on these as you want to quickly and effectively get your message across to visitors.

  4. Mine – http://www.facebook.com/gospelrhys/

    It’s got an email signup box integrated, catch up :)

  5. Hey Darren,

    I must say that this is an awesome tutorial layout. Thanks for putting it together. I’m sure in the next couple of weeks we are going to start seeing more of these landing pages popping up all over Facebook.

    Chat with you later…
    Josh

  6. It is very usefull to brand our blog…..

    Thanks for this good tutor

  7. thanks! for shareing this post. i would always wonder about that facebook stuff.
    It is a great tutorial.

    thanks again!
    divya:)

  8. Hi Darren after reading your previous post on Facebook, i just think of how I too can make FB landing page like you. Even i had an option to ask you this. But surprisingly you gave the extreme report what i need.

    This is what a problogger can do for his readers. U really g8…

    Thanks for share :)

  9. You inspired me to set up a page at http://www.facebook.com/israelsituation. What do you all think?

  10. Thanks for all the tips. Here’s the link to our home bars page .. http://TwitPWR.com/wnc/ .. which we use to welcome new visitors. Would appreciate any suggestions for improvement.

    Also, several articles recommended limiting the width to 520px and noticed your example and many others we’ve seen are much larger. Apparently some think this will be the future width restriction. Can someone shed any light on this?

  11. I never thought about creating a Facebook landing page – I didn’t know it was possible – big thanks!

  12. I just created a page for my finance blog. Hopefully it works right. It is at http://www.facebook.com/narrowbridgeblog

  13. I can’t add FBML to my site, the only option I can see is Add to my favorites.. Anybody knows why this is so?

  14. I’ve been looking into how to make better use of my Facebook page. This is a really helpful article and I think I’ll try to change things up on my page. Thanks for the detailed info.

  15. I created my own using Powerpoint, and I think it turned out pretty well. I also added my newsletter opt-in on the same page, and I’ve had quite a few sign-ups from it.

    Here’s the page: http://www.facebook.com/EngagedMarriage

  16. I have been using facebook for promoting my blog, but not like this. I appreciate all of the detail. Thanks Darren.

  17. Thanks for the fabulous post Darren. Definitely got me thinking again about what I could be doing in the FB department. Just wish there were several more hours in a day for me to get everything done I need to do! Establishing a strong internet presence seems to be like unraveling a ball of wool and never getting to the end of it!

  18. Hey Darren,

    I’ve been looking for exactly this type of information! Although, I’m not ready today to create my landing page (still have to get the graphic and words right), it’s definitely high on my todo list. I’m bookmarking this so that when I’m ready, I can just follow your instructions.

    Thanks so much for sharing this as it doesn’t seem so overwhelming to create a Facebook landing page anymore.

    Karen

  19. I’ve had a landing page for a while on a couple of my sites but nothing as snazzy as you had.

    Guess I’m always worried about lag time with graphics.

    But you inspired me to do something different. Thanks!

    http://www.facebook.com/welivesimply

    and

    http://www.facebook.com/sbpodcast

    Thanks again for the inspiration!

  20. Hey it worked!
    Your directions were right on I got a little confused with posting the image on my blog but figured that out, too.
    Here is my FB landing page:
    http://www.facebook.com/anaramirezphotography?v=app_4949752878

  21. Hi. I just came across this blog and I had been wondering how to do a facebook interface for my blog. I will work slowly thru your suggestions which I am amazed to have for FREE! You are a real asset to blogging. Thanks

  22. Hey Darren,

    I love this industry because i learn something cool just about everyday. This sounds like a really neat tool to use. Thanks for sharing!!! I really appreciate it!

    Sherman

  23. wow, i will try this, thanks
    can i show up the RSS Feed on FB Page ?

  24. Thanks Darren,

    Organising my Facebook page has been on my to do list for a while. This post makes it much more achievable. Thanks for the information.

  25. Thanks, Darren. That’ll be easy enough! I’ll have to put it on my list for next week.

    I loved the welcome pages of both Rhys and also Jason Blundell’s We Live Simply (though I did notice a typo in yours, Jason: “… so others may simply life”)

    Very nice designs.

    Also, Rhys, where did you the the code for the “share with your friends” box?

  26. Great article. We created ours a while ago and have tried to keep it simple. May add a few extra bits and pieces though – http://www.facebook.com/pages/Clockwork-Movies/115865085116704?v=app_6009294086

  27. I set a Facebook page for my business up a few weeks ago. It’s still fairly basic, I haven’t used the tricks you’ve given us here, here it is: http://www.facebook.com/pages/Codeboss/111650572211613

  28. Salvador ALicea says: 07/02/2010 at 1:07 pm

    Darren, can you advice what should be the right size of the image for the welcom page?

  29. @hokya

    Go to edit page

    Then go down to notes

    Click edit and on the right of that page, click edit import settings. Put the RSS url in and click start import.

  30. Darren,
    Thanks for the great tutorial. I now have something else to add to my weekend schedule. I’ve been seeing more of these lately, and it’s nice to see a step by step.

    Brandon

  31. Thanks for sharing! I’ve been thinking about outsourcing my fanpage but now I might give it a try myself. Cool!

  32. Here’s my super-customised Facebook landing page:

    http://www.facebook.com/reallyusefulwebapps

    Key points:

    * First goal is to get a “Like” (50% conversion)
    * Once “Liked” I have code to show the opt-in (roughly 10% conversion)
    * Stretching my luck with the “Invite Friends” widget – can’t track stats on this. Will probably move it later ….

  33. OK folks, here’s a cool freebie for those of you reading the comments ;-) – the FBML I use for my Facebook Page which I mentioned above –

    http://tgnwg.com/21

  34. I was thinking about what benefit will it have on making a landing page like this on facebook. But your say the magic word “Call to Action” so that’s it! thanks for this info Darren!

  35. OK, this was made quickly with what might be described as “very amateur” skill level (and it shows).

    http://www.facebook.com/pages/FFFFINE/90024835768

  36. Well done sir. Using Keynote was a good call.

  37. Awesome tutorial. It really helps newbies to go ahead with really details inputs and step by step methods.

  38. This is the link for the landing page for my Authentic Greek Recipes Page on FB –

    http://www.facebook.com/pages/Authentic-Greek-Recipes/30220135286?v=app_7146470109

    It’s pretty simple (I’m not very technically savvy!) but let’s see how it goes.

    Many, many thanks Darren!

  39. Thanks for sharing! I’ve been thinking about outsourcing my fanpage but now I might give it a try myself. Cool!

  40. This is great info! Thanks for sharing. Two questions: I thought the max width for a FB landing page is 520 px (or that it’ll be the case shortly, unless you spend lots of money on FB ads). And, I thought you could have a max of 9 FBML tabs (but you’re right that it’s unlikely you’d use that many). Have the rules changed?

  41. Fabulous info, Darren. No wonder, we called you, ProBlogger!

  42. Thank you so much for posting this, Darren.

    It was a huge help. It definitely takes out the first bit of research leg work that I was planning on doing to figure these things out. It sounds like additional functions, such as live links, all have to do with an aptitude in html, which demystifies this a bit for me.

    Thanks again!

  43. I did that with my sidebar on Facebook, which allows people to sign up right there, as well links to my blogs and my store. Works like a bomb :)

  44. Thanks so much for this Darren. It took me forever to copy the code you wrote from your site to our Facebook page… Here is ours on Facebook.
    http://www.facebook.com/pages/M-and-MXcom/55049962589

    If anyone is interested in Learning Chinese or just interested in China… come on over and take a look!

  45. Hey Darren, great post!

    I had to create a fanpage on Facebook because I originally started using my Facebook page for business.

    After I hit the 5000 friend limit for my personal account I saw the error in my branding approach.

    Granted there is always a learning curve because social media has evolved so quickly.

    I’m now emailing all of my friends on Facebook to join me on my new Fanpage so we can grow a much larger community.

    Everyone should take your advice now and put together a Fanpage!

    Come visit and say hello.

    Talk soon, Steven

    Please visit my Fanpage!

    http://kingofsocialmedia.com/Fanpage

    P.S I posted this comment on buzz first but it looks like buzz has gotten very quite lately!

  46. Great tutorial. I created my landing page a few months ago. http://www.facebook.com/ColleenPhotoPro?v=app_4949752878

  47. Great post! It was very easy to set up my Facebook landing page. I appreciate the exact (and simple) steps to making it happen. Thank you! – Craig Valine

  48. You are my new best friend!!!!

  49. I have a facebook page for each of my blogs, and each one has a very basic landing page.

    For Future Expats: http://www.facebook.com/pages/Future-Expats-Forum/145197410583?v=app_4949752878

    For Overcome Diabesity: http://www.facebook.com/pages/Future-Expats-Forum/145197410583?v=app_4949752878

  50. HI Darren,

    GReat Post, thanks. I’m already on to it. I have several fan pages and have created quite cool landing pages I think. I actually got the idea for Gary Vaynerchuk’s http://bit.ly/9g47vV page which I think is seriously well done. I’ve done one for 2 of my blogs @Kitchngirl http://bit.ly/cj8wTE and @VLH Enterprises http://bit.ly/aOo0YS and one for a section of my business blog Mudpies to Marketing http://bit.ly/aytTDR

    All have clickable links and two have images that jump out if they’re clickable, and all modelled on my blog designs. I’m adding the jump images gradually to Mudpies as I write the story. My sister, @Tracey Lee Cooper (facebook) who is a graphic artist did the artwork and Bill from @Custom Fanpage Templates (facebook) did the code for me.

    kind regards
    Victoria Hansen
    http://www.victoriahansen.com

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open