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 information. I was struggling with Static FBML and another set of instructions, but yours were clear and easy to follow. Now, I just need a better landing page – but here is my v1 draft – http://www.facebook.com/brianography?v=app_4949752878

    Thanks!
    BLM

  2. Very useful information on this article. I tell anyone this to all people that want to know more about dating science and social science in general. It hasapplications that are expansive, in all aspect of life.

  3. Here’s the landing page I did for my work –
    http://www.facebook.com/pages/Pasadena-CA/Tracy-King-Real-Estate/9506424149?v=app_4949752878

    any comments would be appreciated!

    Great post, really helpful!

  4. Hello All

    Just saw a question, Can you make a create a static fbml page with links. YES.

    Currently on my Fan page I have links and a Video.
    Check it out. If you like it Let me know. Happy to share my insights” http://facebook.com/transitionmanfan

    johnny – The Transition man

  5. Awesome! I can’t wait to try this!

  6. Great information! I would love to have a landing page but I know very little about writing HTML which as I understand it, is a part of formatting the landing page. Do you offer assistance with writing HTML?

  7. Very helpful advice. I need to get working on that. I really slack with my facebook.

  8. This is outstanding, thank you so much for making this easy as well! I was able to create my page and have it up and running in under 2 hours! http://www.facebook.com/pages/Heather-Hearts-Photography/127737440569878?v=app_4949752878

  9. I keep trying to go to the apps link, but it keeps opening up my facebook page. I’ve tried everything, but I’m not having any luck. Sounds like a good idea though. As I often find with technology, it often times doesn’t work very well.

  10. Great tutorial. I setup my Facebook Landing page and it is working great.

    My one question is…

    How can I set a default page that is displayed to people who have already clicked the LIKE button? Now, it shows my wall by default to those who Liked my page….How can I show a different tab by default ?

  11. I forgot to include a link to my landing page.

    What do you think:
    http://cheftomcooks.com/facebook

  12. Thank you so much for creating a simple, easy-to-follow tutorial for creating my own Facebook landing page.

    http://www.facebook.com/NorthernCheapskate

    I’m not really very code savvy, so I was thrilled to find such a simple approach to help me give a little more personality to my facebook page.

  13. I’ve wanted this for our church and was clueless how to do it! It’s just the absolute basic, but with the knowledge, the sky’s the limit!

    Thanks!
    http://facebook.com/covechurch

  14. Darren, thanks for the tutorial. Your instructions where terrific and easy to follow. Here’s my fan page: http://www.facebook.com/thedecoratingdivaLLC

    I used powerpoint to figure out the layout, and to also create the images. I then used Dreamweaver in code/design mode to develop the html/css.

    Best, Carmen

  15. Diana says: 07/30/2010 at 8:05 pm

    I am so happy for this article. You taught me something I’ve been wanting to know how to do. Have a look at my landing page created from your instructions :-)

    http://www.facebook.com/spiritualawareness

  16. Good post you have here Darren, I just other readers might be interested in knowing that Facebook has expanded the possibilities you could have on your page. The good part been that you could use a WYSIWYG application on both Mac and Windows OS to generate your static html or you could expand your reach and possibility by extending your HTML by using a little FBML code.

    Anyways, for a beginner I guess it would be a whole lot of fun to start out with the static HTML code you highlighted in this post.

    Once again, I think this is a good post. You could check out the landing page for freelance business at the link below…

    http://www.facebook.com/cre8vmedia

  17. Great post Darren

  18. i wanted to do research on facebook and this offered a lot of answers to my questions ….thanks darren

  19. outstanding tutorial on how to create a facebook fbml page. just a little bit call to action on the page will be good.

  20. Darren,

    Thanks SO much for that!

    I’d found how to put my opt-in page on my Facebook thanks to my e-mail marketing company however they did not tell me how to get all my new visitors to see it first time (which is what I was after!)

    For those interested I have released a video (& pdf) teaching people how to create a killer opt-in form but (and here comes the great part) they DO NOT NEED a domain or web site of their own!

    So ANYONE can start TODAY collecting e-mail addresses (in under 10 minutes!)

    Thanks again for taking the time to write your great article.

    All the best,

    Jamus

  21. What an awesome tutorial! Thats exactly what I needed

  22. Thanks for the great post Darren!

    I just wanted to add that we’ve built a tool that lets you customize your Facebook Fan Page and create landing pages. You can go beyond just having an image there, you can have buttons, YouTube videos and lead-capture forms without knowing any HTML at all.

    Your landing pages can be powerful. Check it out at http://www.FanPageEngine.com

    Love your blog!!

  23. Thanks so much! I just created my landing page and I’m soooo ridiculously proud of myself :) http://www.facebook.com/BabyGoodBuys

  24. Thanks for the great tut.

    What is the code for the Friend suggest box as seen on
    http://www.facebook.com/gospelrhys

  25. Thank you so much for the tutorial. We have set up a fan page but without a landing page. Totally love this idea and would do wonders for our business. Cheers Darren!

  26. Hi Darren,

    A wonderful tutorial! Thank you very much for it. Hope I will get more Likes by doing this :)

    Here is my landing page: http://www.facebook.com/pages/Hack-Tutors/104359289600575?v=app_4949752878

    Thanks once again :)

  27. Thanks for the tutorial! Really useful, the next link goes to my landing page hope you like it
    http://www.facebook.com/pages/DivingScool-Koh-Chang/142943519067419?v=app_4949752878

  28. Facebook has not only become a place for young people to connect and network, but it has also become another avenue for businesses and organizations to connect, network and promote their organization.

  29. Thanks! Good tutorial, and I enjoyed everyone’s examples. Here’s mine (web dev and design) http://www.facebook.com/pages/Philadelphia-PA/Vasko-Interactive/150290334986882?v=app_4949752878

  30. Hi Darren,

    your tuto is amazing , i am finally able to create the landing page very easily http://facebook.com/pracasinfosys

    thanks for the tips

  31. This is the most expository post i have ever read about using static FBML to create a landing page for Facebook pages. Anyway, I don’t use it except to show the list of products we have.

    I prefer using Networkedblogs to create a landing page for our Facebook page. It shows a brief intro of the posts i publish on my blog. You can check it our at http://www.facebook.com/pages/Make-Money-Online/138703509481666

  32. Homeshoring legitimate jobs says: 08/14/2010 at 5:29 am

    This is a great tutorial. I was not using Face Book as a resource for traffic because I just did not know how to do this effectively. You have given me some great insight that’s certainlt worth exploring. Thanks so much.
    http://homeshoringmadeeasy.blogspot.com

  33. Homwshoring Legitimate Jobs says: 08/14/2010 at 5:38 am

    I have not been using Facebook as a conduit for traffic. You have a certainly opened my eyes that I might be leaving money on the table by not using this resource. I apreciate you taking the time to highlight this.
    http://homeshoringmadeeasy.blogspot.com

  34. Hey, I did it! *does Snoopy dance*

    http://www.facebook.com/pages/Lesley-Atlansky-Art/110741355625541

    I used my ancient version of Adobe Illustrator (8.0) and one of the headers from my blog. It looks nice! Thanks so much! Your step by step is really really helpful.

  35. WOW! Its really an impressive post.It is always great to see your posts. Your thoughtful insights are awesome. Thanks for sharing it.Great work!This post is very mush useful for me.I was wondering this stuff of information only.I am very delighted to know all the ideas of it.Thanks for sharing.

  36. Hi Darren,

    I was logged into facebook — then went to the FBML app page and click add to page. No page shown in the box that came up.

    Maybe I have to sign up as a business? My page is a “personal” page.

    Can you help me?

    Many thanks.

  37. Thanks so much I used this for a client of mine to drive people to download music from his fan page on facebook. Your step by step instructions worked great!

  38. well is a quick one for now, but sounds like a cool feature to add.

    http://www.facebook.com/pages/2dvectorcom/111046398954083?v=app_4949752878&ref=sgm

  39. I couldn’t find the FBML app on FB – not sure why? But I found another app that I hope is just as good.

    Here’s my Welcome page:
    http://www.facebook.com/FrugalFreebies?v=app_392248091048

  40. I am at my wits end at the moment. I have tried using this blog to create a landing page on my facebook page, but can’t get the code right. I created a JPEG with photoshop and saved it in one of my folders. Couldn’t get it to load from there. Then followed someone elses advice and uploaded the image to flickr to try to get it to load from there. Still didn’t work. I keep getting a little red X.
    Can anyone please help.

  41. Thanks for a great tutorial! My FB landing page is *way* basic for now, but here it is….

    http://www.facebook.com/stephaniesarkisphd

    Also, I changed my width to 500 so the page could fit in the screen.

  42. Thanks for this great tutorial!
    I’ve created my landing tab in no time!

    In case anyone’s interested, here it is:
    http://www.facebook.com/pages/Lounge-Area/139722666066033?v=app_4949752878 :)

  43. Thanks you for this tutorial. I did a video tutorial on this for my friends. http://www.facebook.com/ereciaswebdesign

    thanks again
    -E

  44. I haven’t been using Facebook as a traffic source until the end of 2009. However then I came to a conclusion that Facebook is a way more powerful right now then Google in the question of traffic generation.

  45. Melissa says: 09/14/2010 at 7:04 am

    While attempting to add a Landing Page to my company’s Facebook page, I can not get past your step # 2. I do NOT get an option in the Static FBML application to “Add to my page” – Honest! I believe this is because FB now wants to “Authenticate” landing pages. http://www.allfacebook.com/facebook-limits-landing-tabs-to-authenticated-pages-2010-05
    So do you have any suggestions as to how to get a Landing Page to FB for Authentication so that I can have access to the Static FBML application?
    Thanks

  46. as a photographer as well…
    here is an example of my landing page
    the page hasnt officially launched as of yet
    & is still in the works
    but i welcome you all to join me there & on twitter
    if you like it. please feel free to hit the button.
    click the varying images to take you to diff locations
    i will have more coming soon.

    [link below]

    http://www.facebook.com/pages/Humanclay-Photography/114055678652979?v=app_4949752878

    -ħuмди [twitter/hcp520]

  47. Thank you for the great tutorial. I just created my Welcome landing page in 20 minutes tops!
    http://www.facebook.com/SavingTheFamilyMoney?v=app_7146470109

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open