How to Create Custom Facebook Landing Page | Calgary Web Development Consultants

Facebook page is an important part of the small business online presence, because it’s easy way to connect with people and spread the word about your business. Every fan posting something on your Facebook page will immediately advertise your page and business to their friends, because all they do shows up in their friends’ streams.

One simple thing you can do to increase visitors into fans conversion rate is customization of the Facebook page. There are a few simple things you can do to stand out:

Create custom URL (Facebook doesn’t require 25 fans anymore) – your page URL will look better 🙂
Customize profile picture – make sure it uses maximum real estate – 180 x 540 px. Check our page to see an example: http://www.facebook.com/SmartFoxes
Create a custom landing page with action call – step by step instructions below!

Creating custom landing page

Let’s get down to business – you’ll need a bit of HTML and CSS knowledge, so if not comfortable doing that, ask someone who can.

Go to the app Static HTML: iframe tabs app and accept permissions
Choose a page you want to add Welcome page to (if you have more than one like me).
Now you should be redirected to your page. Look for “Welcome” link on the left side menu of your facebook page. Click on it!
You should see 2 text areas now – one for public page and one for Fans only page (hint! you can use extra motivation for your future fans by posting Fans only content to the page and letting them know it’s there)

Post your HTML page content into the first text area (or both). Keep in mind that it can have JavaScripts, CSS, Images and anything else, like a regular page. One note: external resources should be loaded from secure URLs (https://*) to avoid security warnings. If you have a website hosted on shared server, you may have shared SSL page included in your hosting package – check with your hosting provider. Sample HTML for the page:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="UTF-8" />      

    <STYLE type="text/css">
    /* your CSS here */
    </style>
</head>

<body>
    <h1>Making websites work</h1>
    <p>
       Our mission is simple - we help small businesses
       in Calgary, Canada and around the world to build
       great websites and make them work.
    </p>
    <p>
       Like this page to get free tips on web design, SEO,
       marketing, usability and other web development related topics.
    </p>
</body>
</html>

Save the page, preview the result, repeat until you are happy with what you see.
Now go to the Facebook page, click “Edit Page” and select “Manage Permissions”. Look for “Default Landing Page” setting and select your new “Welcome” page.

Bonus tips!

Add Like button

You can add “Like” button on your landing page, just use regular Facebook’s Like button or box code. You can generate code here: https://developers.facebook.com/docs/reference/plugins/like-box/

Add news feed

Another simple addition to your page – news feed from your website! If you have RSS feed of your news (WordPress users can use http://www.yoursite.com/feed/) you can use Google’s feed library, here is the code:

In the page body – place this empty element where you want your news to appear on the page:

<div id="feed"></div>

In the page header, add the following JavaScript code

<script src="https://www.google.com/jsapi?key=YOUR-KEY"
    type="text/javascript"></script>

  <script type="text/javascript">
    google.load("feeds", "1");

    function initialize() {
      var feed = newgoogle.feeds.Feed("/feed/");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++){
            var entry = result.feed.entries[i];

            var div = document.createElement("div");

            div.innerHTML = '<h3><a href="' 
              + entry.link 
              + '" target="_blank">' 
              + entry.title 
              + '</a></h3>' 
              + '<p>' + entry.content+ '</p>';

            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

You will need to replace YOUR-KEY with API key generated for FREE at http://code.google.com/apis/loader/signup.html and feed URL with your own RSS feed (unless you want to display our news!)

Do you have any questions or tips about customizing Facebook page? Post a comment below!

Make your website work for your business Web Development and Online Marketing Blog

Creating custom landing page

Bonus tips!

Add Like button

Add news feed