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. Glad to hear that the Facebook landing tab word is spreading, people are twice as likely to ‘like’ a page with a landing tab than one that just goes to the wall :)

    mine are:
    http://www.facebook.com/bndbylarasolomon
    http://www.facebook.com/socialrabbit

  2. Great article, thanks Darren. That’s exactly the way I’ve been constructing them, for myself and a few clients, so it’s good to know I haven’t been doing it wrong!

    Mine’s at: http://www.facebook.com/pages/Aline-Graphics/131637736846347

    A few more fans and I’ll be able to have a vanity address…

  3. Hi Darren, thanks for the info, here’s my Facebook landing page:

    http://www.facebook.com/pages/Tommy-Schultz-Travel-and-Underwater-Photography/118897562449?ref=ts

    Thanks also for answering my Flickr strategy question last Tuesday on your Q&A call with Brian Clark, I really appreciate you giving it such a thoughtful answer. I’ll definitely put some of your advice into practice, thanks for sharing what you’ve learned with all of us!
    Best,
    Tommy

  4. I should acknowledge I’m extremely impressed with that. I’ve scanned a lot regarding it already but your purpose of read very opened my brain to a different manner of thinking. Cheers .

  5. I had just about a few days back written a post on tips to creating a successful fan page on Facebook. I was hence happy to see this post at problogger because that meant that facebook marketing was indeed in demand these days.
    Setting up a fanpage on Facebook is simple but there are certain critical aspects that you need to keep in mind. Your fanpage is going to be the face of your business. It is what people coming to facebook will see before even they see your website or, blog. Hence it is important to create the fanpage in such that a way that it ensures that these visitors keep coming to you for information again and again.

    BTW, here is my welcome page on facebook – http://bit.ly/bSABds

  6. I have just recently joined Facebook for personal and now after reading this will try to do this for business reasons. I guess this is the new wave and I will not fight it anymore. The problogger will be what I go by and thanks for help. I will try the FBML application and see how it does.

  7. This tutorial has been so helpful! I followed all your steps and this is what I got: http://www.facebook.com/SironaSprings

    Thanks so much!

  8. Great advice and appreciate the detailed tutorial. Created my first landing page and interested to see how it may impact traffic.

    http://www.facebook.com/wdwradio

    Input welcome. Thanks again

  9. FaceItPages offers a DIY Facebook Business Page creation tool http://www.faceitpages.com/. You can see our fan page from http://www.facebook.com/FaceItPages?v=app_7146470109 and another nice one created with FaceItPages at http://www.facebook.com/FaceItPages?v=app_10442206389

  10. Darren, this guide of yours inspired me to finally create a landing page for my Fb-page – thank you so much!!

    For starters, I took the problogger image as the basis and created my own using the same principles, as I assume you’ve tested it a bit already :)

    Here’s the new landing page: http://www.facebook.com/pages/Antti-Kokkonen/339204850860?v=app_7146470109

  11. http://www.facebook.com/freshome – I have more than 30.000 fans. It’s quite good I think ..and growing.

  12. Mine is straightforward – one problem I have is that I am the business, so it may look strange

    http://www.facebook.com/pages/Auckland/Friday-Street-Limited/5697763969?v=app_4949752878#

  13. Hi Darren

    Once again a wonderful post from pro-blogger. You are a master of blogging and people who guest post in your website like Mani too get enhanced with their skills. One of the most simplest creations with great efforts Mani. Keep it up!

  14. Darren,

    Thanks so much for this tutorial. It was exactly what I was looking for and you gave a very clear and concise directions.

    I also love the graphics which helped me see visually the tutorials. Keep up the awesome work!

    p.s. I also thought a professional designer worked on your landing page. very impressive :)

  15. Darren, tips that you gave so complete, so make me easy to understand step by step from the tips that you provide. plus you add a picture at each step so easy to understand. nice post Darren. thanks.

  16. Very well written clear instructions. Thanks! Been looking for this one in ages!

  17. Great idea to use keynote. I’d never have thought of that and I’m bowing to your smartness. Now, I’m going to build a landing page in keynote..

  18. I have zero graphics skills, but I know how to use powerpoint, so I may just use your tip to make my landing page better. I created mine a while ago, so I may have to update it a bit.

    Mine can be found on http://www.facebook.com/agirlsgottaspa

  19. Darren, thank you, thank you. It took me a few days to create my page because of wasn’t sure what to include. But it helped when others posted their pages.

    Here is my facebook page http://www.facebook.com/AleaseMichelleFanPage?v=app_2344061033
    thanks again, Alease Michelle

  20. Hi Darren,

    Here is mine : http://www.facebook.com/kelrencontre#!/pages/Kelrencontre/110424955652228?v=app_4949752878&ref=ts

    I would have 2 more advices ;

    – Put on you facebook page a call to action to get also the email (for example a special ebook), and if the people clic on the image they go the the web site with a form.

    – Be careful to the image of you page profile, it could be optimize to use the max space

    – Add more apps to your fan page (vidéo…) to make it working

    – Add a “Page info” on your blog to ask people to join you on facebook

    I also made a step by step guide (in french) if you need there : http://www.conseilsmarketing.fr/emailing/comment-creer-une-page-fan-facebook

    thanks

  21. Very useful information you have there. Facebook gives a boost to a blog, even more if the blog has, let’s just say a ”pro” landing page. I’m going to build one right away after you example and instructions.

    Thanks for your post,
    Ary

  22. Thank you, Darren! I’ve wanted to use that option for some time, but didn’t want to study FBML. So good to know that simple HTML and css will work as well.

    My first quick attempt/experiment is at http://www.facebook.com/FitFarhonet. I’ll add it to our more popular pages later.

  23. Thanks for the detailed post Darren. I set up my FAN page about 6 months ago and really could have used a detailed approach like this, but figured some of it out. It was tough, until I realized I could use some of the HTML from my regular website, and it worked fine. I like how you can adjust the settings so people go to your welcome tab first and not just your Wall, which is show to have lower conversion rates.

    Here is my FAN page, and I added the Welcome tab more recently after reading more customization tips:
    http://www.facebook.com/carriecommunications?v=app_11007063052&ref=mf

  24. Facebook needs to stop changing things. I’d like to use some of this information on my blog if you don’t mind, and I’ll provide a link back to your site.

  25. Already had my welcome page long ago. Glad you joined the boat Darren.

    http://facebook.com/wpbeginner

  26. Great Post I’ve had a landing page for about 8 months works great for opt-ing people into a list. Check me out at: http://facebook.com/transitionmanfan.

  27. Here is mine, just a draft so far. I still cant get it to default to my landing page and not the wall, though??

    http://www.facebook.com/pages/Washington-DC/Urban-Engagements-Wedding-Planning/134056808432?v=app_4949752878

  28. Darren- Your blog posts are awesome…helpful, practical, easy-to-follow. I get the posts sent to my inbox and have incorporated reading them into my morning ritual. Spent some time today working through your uber-easy-to-follow instructions on creating this Facebook landing page. Just getting started in all of this, so after viewing what other folks have put together, I can say that this will be my first draft…but still proud nonetheless.

    Here it is folks: http://www.facebook.com/uknowpia

  29. Here’s a link to my brand spankin’ new Welcome Tab! Thanks so much, your tutorial was awesome! You didn’t leave out any steps like a lot of other people who do when making a tutorial!
    Great job and much thanks!

    http://www.facebook.com/GroceryShopForFREE?v=app_10442206389

    Dian

  30. Thanks Darren
    I had worked with FBML before but the landing page idea was a new one for me. Thanks so much for that.

    You can see it here:

    http://www.facebook.com/Di.Legacy4Life?v=app_10442206389

  31. As always, this was an awesome post that helped me tremendously! Thank you so much! Here is my brand new landing page:
    http://www.facebook.com/Savingcentswithsense?v=app_10442206389

  32. Darren – I think it’s great that you suggest just using an image for the Facebook landing page. :) I think too many people try to do too much on the Facebook landing page and the FBML coding is hard to work with.

    Both examples are great.

    Debra (@askdebra on Twitter) has put together a great wiki on this topic: http://fblandingtabs.wikispaces.com/

  33. Hey Darren. Awesome Blog. Thank you so much for these tips. I’ve created a page in facebook but I was having trouble setting up with it. So I guess, hopefully it will be up and running now.

  34. Thanks so much! I have had Keynote since I bought my Mac years ago but never took advantage of it until now. I have created a landing page almost effortlessly thanks to this tutorial. You’re awesome!

  35. Here’s mine that I produced which has converted well for people looking to grow thier business:

    http://www.facebook.com/thebigredtomatocompany

    Thanks!

  36. Okay, here’s mine! Not creative obviously since I used your format pretty much.

    http://www.facebook.com/pages/eLiving-Media/109092169134891?v=wall

    Thank you!

  37. In case no one else figured this out, it appears that you get the Landing Page until you “Like” the page. After that, you go to the Wall. That is, until you “Like” the page, you will always get the Landing Page.

  38. Thanks Kris, that is good to know.

  39. Thanks for the quick start guide! Landing pages are really powerful to get more followers. I just stumbled across this but I’ve already setup a few of them for clients that have converted really well.

    I’ve tried to ride the line between begging for followers and not asking at all. I think you do it very well with your pages.

  40. Have this one now but still playing with it. Maybe a tab for your newsletter signup is a good idea. Also it is good to make the picture 520px in width. In the next couple of days FB will change all pages to 520px and remove the profile boxes.

  41. Thanks for this great tutorial Darren. I haven’t done this before that’s why it is a big help for me. Here is my new landing page that almost looks like yours.

    http://www.facebook.com/pages/Blogging-Access/116535575054206?v=app_4949752878

    – Blogging Access.com

  42. Hey all,

    I just put this Facebook landing page for my personal development website together in a few hours; hopefully you’ll be able to get some inspiration from it!

    http://www.facebook.com/pages/Reach-Altitude-with-Haidn-Foster/137778529581919

    Best of luck,
    Haidn

  43. Thank’s a lot Darren, this week i looking around in the internet how to make a landing page in facebook and i found you. Even i am not so good in html language and facebook, i will try it first and i hope you will help me if i have a problem.

  44. This was a great tutorial. I followed all of your steps exactly and it worked! Here’s my new landing page – nothing fancy but it works. http://www.facebook.com/jFrancesDesign?v=app_4949752878&ref=ts

  45. Juliane says: 07/17/2010 at 6:16 am

    Hi,

    thx for the post! Very good summary.

    Do you think it is possible to make an static fbml which also contains links. I’m not that kind of technical person ^^ but I found a great example: http://bit.ly/a5c7IP.

    Maybe you have an idea!

    Looking forward to your feedback :)

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open