Facebook is one of the best ways to grow your brand and connect socially with all your customers at one time. When looking specifically at ways to gain new customers through Facebook you will notice that custom landing pages are becoming wildly popular, and for a good reason. They allow you to add opt-in forms, advertise products, or any custom html/css and java code allowing you to design almost any page you want. The best part about having a custom landing page and tab on your Facebook profile is that Facebook allows you to advertise that page through their site at a cheaper price than your website.
Creating custom landing pages and tabs on your Facebook profile is easy, especially if you follow our guide below. Let’s jump right into it!
Our entire tutorial of setting up a custom Facebook landing page is below, but we also created a video showing you exactly how to do it, enjoy!
Step 1 – Add The “Static HTML: iFrame Tabs” App To Your Profile or Page
The first thing you need to do is login to your Facebook account and perform a search for “static html: iFrame tabs” in the search bar at the top of your Facebook profile. This will pull up a list of apps and the top one should be the correct app. It has a gray background with a white star logo.
Once you find it, hit the “Go To App Button”.
Once the app opens up hit the “Add Static HTML to a Page” button.
After you hit the “Add Static HTML to a Page” button you need to choose which page you want to add the app. Hit the drop down button and choose your business profile or whatever page you are adding the page too. Once you choose which page you want to add the app to, hit the “Add Static HTML: iFrame tabs” button.
Step 2 – Customize The Tab Image
Once you add the app you will be redirected to your profile. Depending on how many tabs you’re already using you will see the Static HTML: iFrame app on the top row or you will have to hit the drop down menu to the right of your tabs to open up the second row. If the app was successfully installed you will see it in either the top or bottom row.
The first thing we want to do is change out the thumbnail and correctly re-name the tab. To change out the thumbnail you need to design a custom thumbnail using your image editing software (Paint, Fireworks, Photoshop, etc). The size available is 111px X 74px and any image larger than that will be sized down. I recommend using the full 111px X 74px area given to you, but you can use any amount you want.
Once the thumbnail is made, hover over the image, click on the pencil icon and choose “Edit Settings”.
You will see a field call Custom Tab Image, click the link “Change” next to it. Choose the image off of your computer and upload it. It should change the thumbnail image.
To change the name of the tab just fill in the field next in the Custom Tab Name box and hit save then okay.
Step 3 – Add In Your Custom HTML/CSS
Now that the tab thumbnail and name are complete you can add in your html/css to custom design your own landing page. The first thing you need to do is go to the profile you added the app to and click on your new tab. It will bring you to the edit page. Take the HTML/CSS for your new page and paste it into the Public Content box.
This app also has tools to help you out, which you can see and use on the edit page. It will allow you to add in images, design the page, etc. Play around with it if you are unfamiliar with html code. These pages are great for opt-in forms, contact forms, advertising new products, playing videos, etc.
Note – if you are taking code from one of your webpages make sure all the links in the code are full URL’s. For example, a url to your style sheet should be http://wwwyoursite.com/cssstylesheet.css not ./cssstylesheet.css
Once you’re done, hit the preview button to see it before going live or hit “save and Publish” if you’re all set. Once you hit save and publish you can go to your page and see your brand new Facebook landing page!
Other Cool Things
You can add other tabs like YouTube and Twitter. All you need to do is perform a search for them in the search bar at the top of your Facebook page and you will see some being populated. All you need to do is add the app to your profile and you’re all set!
You can also move around the apps by hovering over them and clicking the pencil icon. Once you click a dropdown menu will appear and at the top you will see “Swap Position With” and a list of apps you can switch positions with. Choose the app you want to trade positions with and you’re all done.
I hope this tutorial helped you out and it was an easy guide to adding a custom landing page to your Timeline style business profile. If you have any questions please let us know and if you enjoyed this guide please leave us a comment below and share with your friends via Facebook, Twitter, or Google+.
Feel free to check out our list of how you can get more Facebook “likes” or how to create a professional looking Facebook profile.