How good is your online presence? Have you set up Twitter, YouTube and Facebook accounts? Are they linked to your main website?
Most successful bloggers have Twitter, YouTube and Facebook accounts that match the appearance of their main websites. Customizing the appearance of your Twitter and YouTube accounts is fairly easy. You just upload a unique background image and logo and change the font colors to match your website.
But what about Facebook? All Facebook accounts are not created equal. Yes they’re blue and white on the inside but you can still add your own corporate colors, design and layout.
** Read the first post in this series - How to use Thesis to create a Facebook landing page
Don’t miss the opportunity to impress
- Did you know that you can customize the left-hand sidebar of a Facebook page by adding a 180×540 pixel image?
- Do you know how to personalize your Facebook account by adding a unique landing page?
- When visitors arrive at your Facebook page for the first time, present them with a professional looking page rather than a series of wall posts and comments from random friends.
Following are some basic instructions to help you create your own Facebook landing page for free based on a mini site that looks like your main website. You don’t have to be a geek either. The instructions below are pretty basic and there are lots of helpful tips at Facebook.com and within the WordPress community.
Facebook landing page and mini site case study
Following is a screenshot of my Facebook page for Blogshido.com. This is what visitors see when they first visit my Facebook page.
The next time they visit, usually after they like it, become a friend or spend a little bit of time there, they will find themselves at the ‘Wall‘.
Following is a screenshot of my mini website for Blogshido.com. The mini site is what my Facebook landing page uses to look the way it does.
How to create your own unique Facebook landing page
1. Grab yourself a Facebook account
- If you already have a Facebook account – move on to step 2.
- If you don’t have an account, visit Facebook.com and sign up for free.
2. Create a Facebook page
Visit the Facebook Help Center and read more about pages or jump straight to create a page.
- I recommend you name the page to match your main website, product, cause, etc.
- My main website (that I made the Facebook landing page for) is Blogshido.com so I named my Facebook page http://www.facebook.com/blogshido
- At first you won’t get the name (or username) without a string of numbers after it. You need to get at least 25 fans to secure the username of choice (if it is available).
Here’s the link to secure a username for your page – http://www.facebook.com/username – it’s just like a user selecting a username for their profile.
Read more about Facebook usernames.
3. Create a mini website that will become your landing page for Facebook
This step is a little complicated but not too difficult.
What you need:
- Access to your self-hosted website control panel (I use cpanel, hosted by Webcity in Australia).
- About an hour.
- This tutorial is for Thesis Theme – free if you already use Thesis.
- If you don’t currently use Thesis but want to consider using Thesis to power your WordPress site – read more.
- If you don’t use Thesis – you can adapt this tutorial to any WordPress theme that you can customize to create a mini website.
You can also skip this tutorial and use the Clean Business Theme by Digital Renewal for less than $30 and have a matching website and Facebook page in a range of colors – but where’s the fun in that!?
Step 1: Create a sub-domain
Log in to your site’s cpanel and create a sub-domain. This is simply a prefix to your domain name.
Most hosting accounts let you have multiple sub-domains. If you can’t create a sub-domain yourself you might need to request your hosting provider create a sub-domain for you. It only takes a few seconds and shouldn’t cost you anything. If you are charged more than $15 I would recommend you either upgrade your account to give you more control or consider using a different hosting provider.
My main domain name is http://blogshido.com – I created a sub-domain http://facebook.blogshido.com
Step 2: Install WordPress in the sub-domain
You can usually have multiple installations of WordPress on the one hosting account but you can’t have more than one installation on the same level.
- I use Fantastico in the control panel to install WordPress.
- Make sure you record the username and password for your new WordPress account, installed in your sub-domain.
Step 3: Install Thesis on your new mini WordPress site
Log in to the Dashboard of your new WordPress mini site.
- Go to ‘Appearance’, ‘Themes’ and ‘Install Themes’.
- Upload Thesis and activate it.
- If you have forgotten how to install Thesis, log in to your DIYthemes account, download the latest version of Thesis and carefully follow the instructions.
Go to ‘Settings’, ‘Privacy’ and make sure that ‘Site Visibility’ is set to ‘‘
Step 4: Configure Thesis Options
You do not need to make any changes to ‘Site Options‘.
Go to ‘Design Options‘.
- Under ‘Site layout’ choose: 1 column, 480 pixels wide, page framework with outer page framework of 0.5.
- Go to ‘Display Options’. Make sure the Header and Bylines boxes are all unchecked.
- Go to ‘Home Page Display Options’. Select ’0′ featured posts.
- Go to ‘Fonts, Colors and More’. Choose the same font and colors as your main site.
- TIP: If you open up the Dashboard to your main website, you can switch between tabs and add the same color hex codes, font types and sizes. Just be sure you are paying attention when switching between tabs!
- Go to ‘Multimedia Box’. Select ‘Do not show box’.
Go to ‘Header Image‘.
- Upload a header image that has a maximum width of 500 pixels. You should be able to use your existing header with little or no modifications. Thesis can crop it for you. Just make sure it isn’t blurry.
Step 5: Create pages for your mini site
For my Facebook mini site I created a main page (I call my welcome page) and have two navigation menu tabs that take visitors to my main site. You can create multiple unique pages or set up a similar design.
In your Dashboard, go to ‘Pages’ and select ‘Add new’.
- In my example I did not name my page – I did not give it a headline/title – leave it blank. You can still save a page without giving it a name. Just edit the Permalink to something friendly like …/welcome
- Select ‘no sidebars’ for your page type.
- Add no more than about 100 words. I used 85 words.
- Mix it up to make it easy to read by using bold words, bullets, short sentences and several paragraphs.
- Hit ‘Publish’.
Step 6: Set up your mini site settings
Go to ‘Settings’, ‘Reading’ and select ‘static page’.
- Click on the drop down next to ‘front page’ and select the blank selection (not the ‘- Select -’ option). Remember we didn’t name the page so it will appear as a blank.
- Select ‘full text’.
Step 7: Set up your navigation menu
Go to ‘Appearance’, ‘Menus’. Under Primary Menu, create a menu. I named mine ‘Blogshido on Facebook’.
- Add your page (remember it looks like a blank) and give it a navigation label e.g. ‘Welcome’.
- Add one or two custom links to your main site. I added my home page link and gave it a navigation label of ‘Visit Blogshido.com’. I also added my contact page link and gave it a navigation label of ‘Contact us’.
Step 8: Test your mini website
Save your changes and preview your site. Make any necessary changes to your colors, fonts, etc to make it look like your main site.
Step 9: Add bells and whistles – optional
- My mini site has a few extras like the Facebook like and send (2 in 1) plugin by Darko Mitrovic and the Akismet plugin (a must have for any WordPress site).
- I also use the Thesis OpenHook plugin to help with adding RSS, Twitter and YouTube icons/links to my header area. I will add a link how to do this here some time in the future.
4. Create a Facebook application that will link your landing page to your Facebook page
I used the following YouTube video by Digital Renewal to help me through the process of creating my own Facebook landing page.
- Thanks to Trish for presenting the steps in an easy to follow video. Some of the other instructions I found around the web were quite baffling. When I came across this tutorial I breezed through the process of creating my own Facebook application.
- I made some modifications but generally followed the Facebook portion to the letter.
- If you don’t want to use Thesis or your own website as the basis for your design, you could purchase the Clean Business Theme for Facebook by Digital Renewal for less than $30.
So that’s it. How did you go?
I have added the task of creating a unique landing page for Thesis Theme HQ to my ‘to do’ list.
{ 17 comments… read them below or add one }
That’s a awesome tutorial, always thought i had to pay to get a custom Facebook page!, Thanks a ton, I will have a shot at this tomorrow.
Yes, linking with Facebook and different social networking sites increases the site’s visibility.
Wow, why you don’t create a mini ebook with this info because you explained exactly for dummies. This is not a “i like you ” comment, i am really amazed of how simple it is to do this.
Wow ! Great and nicely explained tutorial for Facebook,i agree that Twitter, YouTube and Facebook must match the website’s look and appearance.well twitter and youtube can be customized but i didnt knew about facebook.and yeah i liked the Landing page of facebook point too.I am going to try it for my blog.Thanks for the tutorial.
Nicely explained Somone
You can also create a “fan gate” that you can use in your Facebook fan page, I am suppose to post a tutorial about that but a bug from Facebook end came up (holding the post until the bug is resolve). You can also create from html and css to design the welcome page.
sounds interesting. e sure to post a link to your post when it is published, here in the comments.
I have one Joomla website which have a facebook module installed which allows people to see how many people have already ‘liked’ my website, it is now showing only 2 persons like it. However, the facebook homepage currently has 11 friends. Shouldn’t those 11 friends be synchronised with the number of people who have ‘liked’ in the joomla website?
I can’t comment on Joomla specifically but I do know that not all plugins are created equally. I would send a query througgh to the plugin developer and get them to answer.
Question for you: why do this in a subdomain? Is that because Thesis doesn’t allow you to create a single page with a different layout from the rest of the site?
I use the Builder framework from iThemes; I can create a specific layout for this purpose and attach it to a single page that isn’t linked to from the rest of the WordPress site.
Does Thesis not allow you to do that, and that’s why you created a second installation of WordPress in a subdomain?
The reason I used a subdomain is because I didn’t know any better. There’s many ways to do it – I just wanted to have a separate WordPress install in case I want other landing pages/applications for Facebook in the future.
Thanks for the explanation! I wasn’t sure if it was something specific to setting up the connection to Facebook that drove that decision.
Somone, nice tutorial.
I would comment on the sub domain aspect. It might be better to use a folder for fan page. On fan pages that I need to host for clients on my site or for multiple apps/pages on a client domain I just create a structure like this for example; site.com/fbpgs/clientnum/20110914_welcome or client.com/fbpgs/20110914_welcome.
The reason you might prefer to have it as a folder over a subdomain is starting next month you have to have your FB apps go through SSL. Because of that and that single domain SSL certificates are a lot cheaper then wildcard domains (which you would need for sub domain handling of SSL or otherwise you’d be getting a sinlge domain cert for each sub domain) makes it a a more cost effective structure.
Having a folder allows you the same flxibility of maintaining a separate wordpress install per page if you would like.
Great advice. I will make a modification and update the post this weekend. I really am self taught so I appreciate the time you have taken to bring this to my attention and assist others trying this out as well.
hey wow, its me! Thanks so much for mentioning my theme and showing the video. Im glad it helped and I hope it helps your readers a ton. I never thought to do this with Thesis, there are some great ideas here. Have you had issues with scrollbars showing up on taller custom pages in facebook? I had to build a short script into the header of my theme to eliminate the scroll bars. Theres a setting in Thesis where you could paste this in. I’ll send over the code if anyone needs it.
As you may already know, as of Oct. Facebook requires these minisites to be hosted on a secure server. Ive been tinkering in my host gator account to figure out how to set one up. It seems that subdomains built on a SSL might in fact be the way to go. Hopefully I’ll have another video on how to make these changes.
Well, I love what you’ve done with thesis on your sites, theyre beautiful. You cant even tell its thesis! :D I know from experience that can be quite challenging. Looks like you rocked it!
BTW, you have one more facebook fan :D and a gift coming by email (check your Blogshido account)
Thanks again!
Trisha
thanks Trisha. I didn’t catch your comment until now. The script would be great. When you have it up on your site feel free to post a link to your article here in the comments and peeps can visit your site to read it.
Hi, thanks for such an awesome tutorial, I wanted to give this a shot on my own facebook fan page, but I wanted to see how it all looks in action, but when I went to your facebook fan page, it goes straight to the wall page, has this been changed?
yes. I have decided not to develop Blogshido just yet and focus on some other pursuits.