How To Build Your Facebook Landing Page
(If You’re Not A Programmer)
Update: As you know Facebook no longer supports FBML for its tabs, which is what this post was based on, but there is an updated post about How to build a Facebook Landing Page with iFrames – Don’t miss it!
Building a Facebook Landing Page is easier than you think, even if you are not a programmer.
This week we’ll look at a topic that might seem basic for some. For other people, specially new visitors, this might feel like “been there done that”. Yes, there are too many blog posts out there that have discussed the topic but I’ll promise you this: In the usual SocialMouths style, we’ll go over the why, the what and the hows of building a landing page for your Facebook Page. Why is it important? What do we need to consider? and…
A guide to building a basic Facebook landing page. Yes, step-by-step, with screenshots and everything! You already know how I love to be very visual. Also, we are going to keep it simple so we won’t be adding any email signup boxes or embedding video players.
Also as usual, let’s start at the beginning.
Why Is A Landing Page Important?
The landing page is usually setup as the “Welcome” tab for people that has not “Liked” the page. Saying that it is for first-time visitors is totally wrong, if I keep visiting your page every week without “Liking” it, I will land on the Welcome tab every time until the day I click on the freakin’ button.
But the Facebook Landing Page is important for two main reasons:
- The Wall is generic, there is no distinction between one page or another. There is no way of standing out and creating a good first impression. There is nothing clear and obvious about who you are or what yo do or offer. There is no branding other than the profile pic (limited to 200 x 600 pixels). The landing page gives you those opportunities
- The landing page, just like your website or blog, should focus on a strong CTA (Call-To-Action)
Just ask yourself this question: What about the Wall makes me click on the “Like” button? I’ll give you my answer: Nothing.
What Is The Main Goal?
There can be many goals for a Facebook landing page but there is one that has to be the first and most important one: Get your visitor to click on the “Like” button. The “Like” triggers everything. Now these people will get your content on their Facebook News Feed.
If you are trying to get traffic to your Facebook Page, perhaps you’re looking at this all wrong. Traffic to your Page has no value to you, you don’t own it, you don’t even own the domain. What you need is a simple “Like”. It’s like permission marketing. Think of a Twitter follower, you don’t need that person to go to your actual profile, you only need him/her to see your Tweet and for that you need that person to follow you.
The magic happens on the News Feed but first… you need a “Like”.
What Else Can We Do?
Then we can have secondary goals, let’s look at some examples:
- An image is worth a thousand words and Facebook lacks that, which is not completely a bad thing, we don’t need it to look like a flea market like MySpace. Use a good visual to express your message
- The landing page can tell a story, tell people who you are or what your business does. Now your first-time visitor know where he/she landed and what they’re about to get from you
- You can use it also to link to your site and other online properties. Use it as an external navigation to your main site
- You can use it to integrate multimedia such as videos to better engage users
Be creative. We are not going to look at very complex design here but think that whatever you can do on HTML, you can do here.
But I’m Not A Designer… Or A Programmer
I think you should hire someone that can design and program a kick-ass landing page, one that’s focused on Facebook Like Conversion (Did I just invent a term there?) and here is exactly what I think, this goes for your site and everything you do online too. The Internet and the available technology of today allows us to pretty much do things on our own, that doesn’t mean we should. This is the most powerful marketing platform for small business and we should focus on design that converts, not just pretty looks.
But this post is about building a Facebook Landing Page on your own so, let’s do this!
Build Your Own
This is where the real juice of the post is, let’s do this as a step-by-step guide:
This can be as easy as displaying a simple image but we want to add some interactivity to the mix so we’ll add some linkage to that image. Again, we are not going to get into any complicated coding here.
1. Get some inspiration
First thing you should do is get some inspiration for your design, there are some great examples out there. Look for people and businesses in your industry. I’m not going to post a bunch of images for good practices because this is not an inspiration post but here is a good example from Mari Smith. And who are we kidding, Mari is the queen of Facebook. I say she should sit next to Mark Zuckerberg at board meetings!
One thing you should know before crafting your masterpiece is that the dimensions you have to play with are 520 pixels wide and it can be as tall as you want (don’t make it too tall).
2. Create your image
For this we’ll need an image editor, I use Photoshop but you can even use a web-based application such as Picnik. It will be enough to work with some images and text.
Here is my image already design, optimized for web and saved on my computer. I’m keeping it simple, an image, some text and a couple of links I will need to give life to.
3. Upload to the internet
You can use services like Photobucket to host an image and get a unique URL for it but… call me old-fashioned but I rather host my images on my own server. No, I’m not going to ask you to get a FTP Client or anything like that.
This is as easy as uploading your image through your WordPress dashboard. Go to your Media Library > Add New
Now go to the Media Library, find the image you just uploaded (should be the first one on the list), click on edit and grab the “File URL”. Believe me, it doesn’t get any easier than this.
4. Create an Image Map
An “Image Map” is a simple image that contains more than one link in it, also known as “Hot Spots”. There are a few ways you can do this, if you have some basic programming knowledge a text pad such as TextEdit will be enough for you, then you have software like Dreamweaver that allows you to do stuff without knowing code. But I promised to keep it simple so we want this done for us, don’t we?
Good thing there are web-based tools for this, the one I like is Image-Maps. See how on the next image it gives you the option to work with an image on your computer or from a URL, since we are already hosting our image on our server and we also have the URL, go with the second option and click on the “Start Mapping Your Image” button.
This is what you’ll get. Click to continue…
Using the rectangle tool, select the area where you want to insert the link and add the URL where you want it to point. Repeat this action with as many links you want on your image.
Once you are done adding your links to the image, click on “Get Code”, you will get a few options. On the top navigation, select the CSS Code and copy it. We’re taking this puppy out of here for one last step before we head to Facebook.
5. Clean your code
There are a couple of lines of code here that we need to delete. Paste your piece of code into any text editor to get rid of them. They look like this:
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
This line of code will create a dotted black line around our links (not pretty). For each link on your image you will find a line like this, just remove it. Now we are ready to go to Facebook.
6. Install the FBML Facebook Application
We need to install the FBML Application that will allow us to insert that piece of code. This is easy stuff.
Let’s go to your Facebook Page now. Click on the “Edit Page” right below your profile picture (you need to be logged in for this). This will take you to another page, on the left menu click on “Applications” and look for the FBML App to add it to your page.
7. Bring your code in
Now that we have installed the application, open it by clicking on “Go To Application” and you will get an empty vase that looks like this. Give your application a name, it would usually be something like “Welcome” (this is going to the tab at the top of your page) and paste your chunk of code. We’re almost there!
8. Arrange your Tabs
Head back to your page and arrange your tabs so the new “Welcome” tab show on top. This is just drag-and-drop.
9. We have a Landing Page!
Pray a couple of minutes and hit on the tab to see if your landing page is there. Uff… Luckily mine is, look at that beauty!
10. Set as Default Landing Tab
Almost forgot. In order to show the landing page to visitors that have not yet “Liked” you, it needs to be set as the default landing tab so, go back to your admin and fix it under “Permissions”.
Track The Results
I will be a good idea to see how your “Liking” performance has been to this point. I suggest you take a look at your Facebook Insights and remember the this date so you can measure the landing page impact. It is not guaranteed that you will immediately start getting loads of “Likes”, remember that this is a testing game and your work might need some tweaking to perform better. Keep testing.
Final Word
Yes, I’m tired after 1,870 words and 16 screenshots… but before you (and me…) go, I wanna leave you with this thought, as I mentioned before, there are many things you can do with your Facebook page but the first step is to get that precious “Like”. Once you got that taken care of, deliver tons of awesome value!
Let Me Hand It To You…
As usual, you’re invited to share your thoughts, share your secret formula or simply ask questions. Seriously, use the comments to ask whatever you want.
I hope you liked this post. If you did, as a token of appreciation (to me…) consider visiting the SocialMouths Facebook Page, check out the landing page and… LIKE IT!
How To Build Your Facebook Landing Page
(If You’re Not A Programmer)
Update: As you know Facebook no longer supports FBML for its tabs, which is what this post was based on, but there is an updated post about How to build a Facebook Landing Page with iFrames – Don’t miss it!
Building a Facebook Landing Page is easier than you think, even if you are not a programmer.
This week we’ll look at a topic that might seem basic for some. For other people, specially new visitors, this might feel like “been there done that”. Yes, there are too many blog posts out there that have discussed the topic but I’ll promise you this: In the usual SocialMouths style, we’ll go over the why, the what and the hows of building a landing page for your Facebook Page. Why is it important? What do we need to consider? and…
A guide to building a basic Facebook landing page. Yes, step-by-step, with screenshots and everything! You already know how I love to be very visual. Also, we are going to keep it simple so we won’t be adding any email signup boxes or embedding video players.
Also as usual, let’s start at the beginning.
Why Is A Landing Page Important?
The landing page is usually setup as the “Welcome” tab for people that has not “Liked” the page. Saying that it is for first-time visitors is totally wrong, if I keep visiting your page every week without “Liking” it, I will land on the Welcome tab every time until the day I click on the freakin’ button.
But the Facebook Landing Page is important for two main reasons:
- The Wall is generic, there is no distinction between one page or another. There is no way of standing out and creating a good first impression. There is nothing clear and obvious about who you are or what yo do or offer. There is no branding other than the profile pic (limited to 200 x 600 pixels). The landing page gives you those opportunities
- The landing page, just like your website or blog, should focus on a strong CTA (Call-To-Action)
Just ask yourself this question: What about the Wall makes me click on the “Like” button? I’ll give you my answer: Nothing.
What Is The Main Goal?
There can be many goals for a Facebook landing page but there is one that has to be the first and most important one: Get your visitor to click on the “Like” button. The “Like” triggers everything. Now these people will get your content on their Facebook News Feed.
If you are trying to get traffic to your Facebook Page, perhaps you’re looking at this all wrong. Traffic to your Page has no value to you, you don’t own it, you don’t even own the domain. What you need is a simple “Like”. It’s like permission marketing. Think of a Twitter follower, you don’t need that person to go to your actual profile, you only need him/her to see your Tweet and for that you need that person to follow you.
The magic happens on the News Feed but first… you need a “Like”.
What Else Can We Do?
Then we can have secondary goals, let’s look at some examples:
- An image is worth a thousand words and Facebook lacks that, which is not completely a bad thing, we don’t need it to look like a flea market like MySpace. Use a good visual to express your message
- The landing page can tell a story, tell people who you are or what your business does. Now your first-time visitor know where he/she landed and what they’re about to get from you
- You can use it also to link to your site and other online properties. Use it as an external navigation to your main site
- You can use it to integrate multimedia such as videos to better engage users
Be creative. We are not going to look at very complex design here but think that whatever you can do on HTML, you can do here.
But I’m Not A Designer… Or A Programmer
I think you should hire someone that can design and program a kick-ass landing page, one that’s focused on Facebook Like Conversion (Did I just invent a term there?) and here is exactly what I think, this goes for your site and everything you do online too. The Internet and the available technology of today allows us to pretty much do things on our own, that doesn’t mean we should. This is the most powerful marketing platform for small business and we should focus on design that converts, not just pretty looks.
But this post is about building a Facebook Landing Page on your own so, let’s do this!
Build Your Own
This is where the real juice of the post is, let’s do this as a step-by-step guide:
This can be as easy as displaying a simple image but we want to add some interactivity to the mix so we’ll add some linkage to that image. Again, we are not going to get into any complicated coding here.
1. Get some inspiration
First thing you should do is get some inspiration for your design, there are some great examples out there. Look for people and businesses in your industry. I’m not going to post a bunch of images for good practices because this is not an inspiration post but here is a good example from Mari Smith. And who are we kidding, Mari is the queen of Facebook. I say she should sit next to Mark Zuckerberg at board meetings!
One thing you should know before crafting your masterpiece is that the dimensions you have to play with are 520 pixels wide and it can be as tall as you want (don’t make it too tall).
2. Create your image
For this we’ll need an image editor, I use Photoshop but you can even use a web-based application such as Picnik. It will be enough to work with some images and text.
Here is my image already design, optimized for web and saved on my computer. I’m keeping it simple, an image, some text and a couple of links I will need to give life to.
3. Upload to the internet
You can use services like Photobucket to host an image and get a unique URL for it but… call me old-fashioned but I rather host my images on my own server. No, I’m not going to ask you to get a FTP Client or anything like that.
This is as easy as uploading your image through your WordPress dashboard. Go to your Media Library > Add New
Now go to the Media Library, find the image you just uploaded (should be the first one on the list), click on edit and grab the “File URL”. Believe me, it doesn’t get any easier than this.
4. Create an Image Map
An “Image Map” is a simple image that contains more than one link in it, also known as “Hot Spots”. There are a few ways you can do this, if you have some basic programming knowledge a text pad such as TextEdit will be enough for you, then you have software like Dreamweaver that allows you to do stuff without knowing code. But I promised to keep it simple so we want this done for us, don’t we?
Good thing there are web-based tools for this, the one I like is Image-Maps. See how on the next image it gives you the option to work with an image on your computer or from a URL, since we are already hosting our image on our server and we also have the URL, go with the second option and click on the “Start Mapping Your Image” button.
This is what you’ll get. Click to continue…
Using the rectangle tool, select the area where you want to insert the link and add the URL where you want it to point. Repeat this action with as many links you want on your image.
Once you are done adding your links to the image, click on “Get Code”, you will get a few options. On the top navigation, select the CSS Code and copy it. We’re taking this puppy out of here for one last step before we head to Facebook.
5. Clean your code
There are a couple of lines of code here that we need to delete. Paste your piece of code into any text editor to get rid of them. They look like this:
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
This line of code will create a dotted black line around our links (not pretty). For each link on your image you will find a line like this, just remove it. Now we are ready to go to Facebook.
6. Install the FBML Facebook Application
We need to install the FBML Application that will allow us to insert that piece of code. This is easy stuff.
Let’s go to your Facebook Page now. Click on the “Edit Page” right below your profile picture (you need to be logged in for this). This will take you to another page, on the left menu click on “Applications” and look for the FBML App to add it to your page.
7. Bring your code in
Now that we have installed the application, open it by clicking on “Go To Application” and you will get an empty vase that looks like this. Give your application a name, it would usually be something like “Welcome” (this is going to the tab at the top of your page) and paste your chunk of code. We’re almost there!
8. Arrange your Tabs
Head back to your page and arrange your tabs so the new “Welcome” tab show on top. This is just drag-and-drop.
9. We have a Landing Page!
Pray a couple of minutes and hit on the tab to see if your landing page is there. Uff… Luckily mine is, look at that beauty!
10. Set as Default Landing Tab
Almost forgot. In order to show the landing page to visitors that have not yet “Liked” you, it needs to be set as the default landing tab so, go back to your admin and fix it under “Permissions”.
Track The Results
I will be a good idea to see how your “Liking” performance has been to this point. I suggest you take a look at your Facebook Insights and remember the this date so you can measure the landing page impact. It is not guaranteed that you will immediately start getting loads of “Likes”, remember that this is a testing game and your work might need some tweaking to perform better. Keep testing.
Final Word
Yes, I’m tired after 1,870 words and 16 screenshots… but before you (and me…) go, I wanna leave you with this thought, as I mentioned before, there are many things you can do with your Facebook page but the first step is to get that precious “Like”. Once you got that taken care of, deliver tons of awesome value!
Let Me Hand It To You…
As usual, you’re invited to share your thoughts, share your secret formula or simply ask questions. Seriously, use the comments to ask whatever you want.
I hope you liked this post. If you did, as a token of appreciation (to me…) consider visiting the SocialMouths Facebook Page, check out the landing page and… LIKE IT!
“Sand Dune Backflipping”
Break Dancing
Extreme Gymnastics + Parkour
Roller Suiting
(SUPER) High Diving
Insane Mountain Biking
Trampoline Dunking
Reverse Bungee Jumping
