In my last post, Is Your Facebook Fan Page A Virtual Ghost Town?, I discussed techniques that you can do to engage your audience, encourage participation and overall give some life to your page even if you are the only one driving the conversation.
One of the areas I briefly touched up on was creating a landing page for your first time visitors.
Well, due to popular demand (I always wanted to say that
), I’ve taken on the arduous task of creating a tutorial on how to create a customized landing page.
And guess what?
It’s pretty darn easy to do…I kid you not. It’s one of those things that once you see how it’s done, you’ll think to yourself, “self, I could of done this earlier!”.
In the video, I add a profile picture, and show you a very simple design, but you can get really super creative here by adding customized images.
Adobe Photoshop is great for this. If you don’t have Photoshop and don’t want to spend the insane amount of money to get it, check out a free image editor such as Paint.net.
OK, so without further ado, the topics to be covered in the video are:
- What can be added to your Facebook Fan Page
- Using WordPress to create your customized landing page
- Adding staticFBML to your page
- Adding the HTML code to your FBML application
- Adding videos to your page using YouTube & some code (see transcription for the code)
This video is a bit under 10 minutes, so grab a cup of coffee, put your feet up and enjoy the show – yes, I know, a bit dramatic.
Video Transcription:
[spoiler]
Hello this is Michele Welch from NewBizBlogger and this is the second part to the last video I made on Facebook engagement techniques.
In this video I would like to go more into depth with how to create a landing page which is going to be your default page. This is the page people visiting your Facebook fan page for the first time will see first. On this customized page you can basically put whatever you want, whether it’s information about you or your business or you can add videos. As you can see here, I’ve added some bullet points and what I do for a living and that sort of stuff.
Ok, so let create a page and you’ll get to see how easy it is. Now I’m going to show you using WordPress, but you can also do this with a text editor, basically any software that’s going to generate html code for you.
Another neat trick is to actually sign up for a free blog at wordpress.com and use that text editor to create your Facebook landing page.
>OK, so lets’ sign into our WordPress Dashboard. I’ve already signed in. If you are new to WordPress just sign in and under your ‘Post’ click on ‘add new’ and you’ll get into a new page. I’m just going to go ahead and go back since I already have one for this presentation.
And it doesn’t matter what title you put because you are actually going to save it as a draft post. You are not going to publish this post.
And you are going to type whatever you want here…and I’m going to show you in a little bit how to add a video to your fan page as well.
So let’s go ahead and add a picture, a profile picture > click on the ‘add image’ icon. [Click on ‘select files’ and browse through your computer to select your image].
You can choose where you want it aligned…I’m going to leave it as ‘none’ – default size is fine with me- then I’m going to click on ‘insert to post’.
Let’s go ahead and look at it and click on ‘preview’… So you can see it needs a little fixing so I would just go back [and fix it up a bit] and then preview the page… you can always go back and fix it…
Now let’s head over to Facebook and we are going to do a search on ‘static FBML’ and click on ‘add to my page’ – now I already have this application so it’s not going to show up, but you are going to see your page show up here, just click on it and then click on ‘add to page’.
Now go back to your Facebook page and click on ‘edit page’ and you will see something here that reads FBML. Just click on ‘edit’ …
I already have something here so I’m going to leave the title, but you can put whatever title you want in here. You can put ‘Welcome’ or ‘Join my Newsletter’ or whatever you want to put and then what we are going to do is go back to our text editor, in my case I’m using WordPress> click on HTML> copy all the HTML code in here> right click and copy.
Go back to our Facebook page and you are going to paste all that [HTML code] right in here and click on ‘save changes’.
Now let’s go back to NewBizBlogger and we are going to search for that page that you just created and you see here, that it’s been created. Now you can just go back and clean this up a bit, just go back to your text editor and fix all these features. I’m not going to do that now for this presentation, but you can go ahead and work on that.
Now adding video is just a bit more technical but still relatively easy to do even for the novice.
Now I need to give props where props is due…I actually learned this neat trick from HyperArts.com.
OK, so what you are going to do is upload your video to YouTube and I’ve already uploaded a video. And what you are going to do is, in the URL, the information you are going to need is this code [code after where it says v=] , let’s go ahead and copy it and plug into a notepad. And you are going to take all this code right here:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />
And copy it and let’s go ahead back to our Facebook page and click on ‘edit page’ and go back into the page we just created and in the bottom, you are going to paste that code.
Now where you see xxxxxx , this is where you are going to paste this little ID code from the URL that you’ve just grabbed. So let’s copy that and paste that ID where the x’s are and click on ‘save changes’.
Now let’s go ahead and check out our site. Let’s go back to the page you created and you see here that the video has been added.
Just one more note on that; let go back to the page:
I’ve actually added the center tags so the video is centered on the page, [otherwise it sits to the far left of the page] but if you don’t want it, you can just take it out.
And there you have it….your own custom landing page. Like I said before, it’s really simple, you can get as creative as you want with pictures and video and text and all that. It’s just going to take a little bit to work out the kinks. But overall a very easy process.
This is Michele Welch with NewBizBlogger , good luck and good bye.
Oops forgot one last step-
And that’s how to make your landing page your default page.
Go to ‘edit page’ , scroll down to wall settings, click on ‘edit’ and where it says ‘Default Landing For Everyone Else’ you are going to select the name of the customized landing page that you’ve just created.
That’s it…thanks again for watching.
[/spoiler]
If you would like to join me on Facebook, click here.
Don't forget to check out Part 2 of "Creating a Facebook Landing Page That Rocks" and learn how to create a landing page with an image file!
So what did you think? Easy or Not? If you feel others can get some value from this video, please feel free to share it- tweet it, flip it, like it, diggit, you get it!
[spoiler]







Hi Michele,
Super helpful post here, as you mentioned it was easier than I expected. I especially like how you added the youtube video. For such a visually appealing presentation it is a simple and quick process.
Thanks for sharing!
Ryan Biddulph
Your welcome Ryan…glad you found it helpful.
Thanks for stopping by!
Alongside “Is Your Facebook Fan Page A Virtual Ghost Town?” and this post, you have written two very good articles. Can't wait to watch your video though;
It's buffering right now
Hi Peter,
So glad you had a chance to view them. I'm glad you've found them useful. Please let me know if you have further questions on any of the steps mentioned in the videos.
Thanks for stopping by!
thank you, Michele information was very helpful
OK. Just wanted to watch this video so badly I had to download it cause I think that YouTube today is not working as good as it should be. Watched it and although I am not a FB savvy kinda guy, I think I am now an expert when it comes to making a customized FB landing page. Heck, I might even sell a service of creating FB landing pages for anyone who does not know how to, haha. Just kidding.. Great Michele. Off to build my “subscribe to newsletter” landing page (followed your advice on building a list). I'll let you know how it goes. Hopefully I won't have to come back here and bother you with technical difficulties. I am following this by the “video”
OK. Done it. Not looking so good, but I got the handle on things. Now all I have to do is do a little teaking and I'm good to go. Wooot. Tks again for introducing me to FBML
Cool…can't wait to see how it looks when you're done…send me the link. BTW, you can always just pay someone a few bucks to make you a really cool image banner and then upload that image to your wordpress.
Then copy and paste the html into your FBML area…just a thought
P.S. You can do this with Adobe as I mentioned in the post…but if you are not familiar with the program, go to fiverr.com and see if someone can do it for $5…worth the shot.
I have a welcome tab but the problem is its not functioning as a landing page.. there’s no option to make the welcome tab as a landing page.
Hi Jan,
On your FB page you will see a link that reads ‘Settings’ just below your status update box (where you type in your message). Click on that and under ‘View Settings’ where it says ‘Default Landing Tab for Everyone Else:’ click on the arrow and select your Welcome page there.
Good luck and thanks for stopping by!
I cant find the html code you promised to put on your site for this video? Can you please help me.
Thank you Amee
Hi Amee,
You had to click on the ‘show transcription’ link to see the code. Here it is:
Good luck and thanks for stopping in!
oops …for some reason, not coming up on the comment section. On my site, click on the link ‘show’ under the video and you will see the code.
Hey Michele, GREAT tutorial! I finally figured it out. Just one question. Is it possible to drop the video into a specific location on the landing page? We’ve created a “poster” and we want the video to occupy a certain place on that poster. Is that possible?
Hi Diane,
Thanks for the wonderful compliment!
Hmmm…that’s going to be a bit tricky. I’m assuming the poster is a image file. I think I know what you mean, although that type of graphic design is a bit advanced. Definitely not up my alley. LOL
Send me a link to an image file if you can an I’ll have a look at what you’re talking about.
BTW, Facebook has very recently moved to IFrames to creating custom pages and there are tons of sites out there that are offering their services to create them. You may want to look into this. May save you a lot of headache.
Does this work now that Facebook is on iframe?
Hi again,
As far as I know static FBML still works although not sure for how long. I currently still have my newsletter page set up on my FB business page that is run by this app.
Ciao