Tutorial: How To Add Video To Your Facebook Welcome Page

Tutorial: How To Add Video To Your Facebook Welcome Page

Facebook account holders know that the simplest way to feature videos on their Facebook Fan Page or Business Page is to go to the "Video" tab and either upload or record a video. But what if you're looking for additional features for showcasing your video content on Facebook? Do you want to create a custom video welcome page, one where people automatic come to when they visit your Facebook site?

Here's a step-by-step tutorial so that you can decide if doing-it-yourself is right for you.

Add Video To Your Facebook Fan/Business Page?

A Facebook Fan Page is also known as a Business Page. The key difference is: Fan pages are created by users who already have a personal profile on Facebook.com, whereas business pages can be created without having an account on Facebook.com.

"Business prefer to have a fan page instead of a group, because Groups are built around a group of people rather than a business or brand." Explains Saquib Imran, Head of Technical for the 1 Social Media, a developer of Facebook Fan Pages for businesses.  He also explained that Facebook Fan Pages don't have the limitations on video that Group pages do. "Group owner scan send messages to group members, but this information (including video) can't be shared among friends of group members." So what this also means is that you can create a custom page featuring your video app on your Facebook Fan/Business Page, but not for a Group Page.

For more information on this, I recommend reading the Facebook blog post, What's the Difference between a Facebook Page and Group?

As for why you should add a video to Facebook, do I really need to tell you readers the power of video as a story-telling tool?  I didn't think so.

Do-it-Yourself Tutorial For Non-Programmers

Step 1: Setup A Facebook Page

If you don't already have one, go to Facebook.com/pages, and click "Create Page." (If you don't already have a Facebook account, then you can create just a Facebook business page.) You will want to make a selection from the "Official Page" box.

Step 2: Setup The Static FBML Application

FBML Stands for "Facebook Markup Language." Facebook launched Static FBML application for page owners to create custom landing tabs, and for advanced functionality and Page customization. Here's what you need to do:

On your Facebook Fan Page and click the "Settings" link in the masthead. From there, click on the "Apps" sidebar tab. At the bottom of this page, you will see the "Static FBML" application. Click "add application." This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for advanced functionality and enhanced Page customization.

Tutorial: How To Add Video To Your Facebook Welcome Page

(Note: When you add the FBML app to your page, you can choose what pages or applications you want to add the FBML to. You can add it to multiple pages, but be aware that you can only have 1 FBML application on a page.)

Step 3 – Add Your Video Using fb:swf

Under the applications list on your Facebook Fan page, you will see the FBML icon Click it and a text box appears. You now add video on your custom FBML tab using FBML tag fb:swf.

Keep in mind that when users see this page, they will have to click on the poster image to access the video controls.  As a result, you may want to set your video to autoplay so that they don't have to click twice to watch the video.  You can also change background color, add CSS styles using <imgstyle> and have your choice of dimensions.

Here's some some examples using FBML code:

For YouTube Videos:

<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx&amp;autoplay=1'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg'
width='340' height='270' />

For A BrightCove Video (taken from their homepage):

<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://admin.brightcove.com/viewer/us1.24.04.07.2011-01-10152041/BrightcoveBootloader.swf?isUI=1&isVid=1&playerKey=AQ~~,AAAAAEMcUfw~,AWP48oYUzyfuRZZHJ28PU6pKctIjV-DP&videoId=49774962001'
imgsrc='PATH_TO_IMAGE_HERE'
width='340' height='270' />

For A JWPlayer Video:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='PATH_TO_YOUR_JWPLAYER_SWF?file=PATH_TO_FILE_HERE&autostart=true'
imgsrc='PATH_TO_IMAGE_HERE'
width='340' height='270' />

Step 4: Set Up Your Page's Default Facebook Welcome Tab

Your Facebook Fan page will already have a "Video" tab, but it's really your "Welcome" page where you want people to first come to when they visit your Facebook site. To change your Default Tab to your "Welcome" page, simply go to the "Edit Page" link in the left-hand sidebar (under your profile photo), click the "Default Landing Tab" menu, and select "Welcome."

edit page -> manage permissions -> default landing tab -> Welcome

The Challenges In Building Your Own Facebook Video Page

Does any of this sound easy? I guess that depends coding experience you already have; and as, explained to me by Saqib, everything needs to be hard-coded. "If you're going to change any bit of the tab content, one has understand at least the basics HTML, CSS, and FBML.”

So guess what that means? If you wan to do it yourself, then you'll 1) have to do manual coding, and 2) Have knowledge of coding in HTML, CSS, and FBML at the very least. Now if you're not a programmer and it's not your primary job to program code, do you really feel up for learning all that?

Also, is FBML really the right avenue for doing video? Facebook has already announced that they are in the process of deprecating FBML – i.e., they will not be providing any new features to FBML. Facebook has instead recommended that application development, including video on fan pages, should be created using Facebook Developer Libraries. If you are building a new application on Facebook.com, they recommend you implement your (video) application using HTML, JavaScript and CSS; along with their JavaScript SDK.”

Great, so now they recommend you adding Javascript to your list. Not to mention, some companies like 1 Social Media recommend building fan page and video application development in other programming languages, including PHP and Microsoft.Net SDK

Tutorial: How To Add Video To Your Facebook Welcome Page

Nick Shin, MarketingShinDig.com

Article Update: I recently heard back on this subject from online marketing strategist Nick Shin,  who wrote the article featured on Social Media Examiner, "How to Customize Your Facebook Page Using Static FBML," published back in June 2010. Here's what he had to say about building your own video apps in FBML:

"I don't recommend people creating video apps with Static FBML because the FBML tags will eventually get broken.  The same can be said for embedding video apps that very well could have used FBML code that will be deprecated. It all comes down to how much time and money you're investing.

"I'm not a developer/programmer, but based on my research, [Saqib] hit it on the end.  With FBML deprecating this just means more work for programmers.  From my experience, I will say that programmers who are competent enough to develop apps are knowledgeable already in HTML, CSS, and Javascript so that's not an issue.  However, like the article states, if a non-programmer who's been developing on his/her own free time with no formal training or experience, i.e., doing it for fun, then it's just a matter of learning a bit more.  If you were motivated enough to learn it once, chances are, you'll take on this new challenge that Facebook seems to be presenting in or near Q1.”

So does it really make sense to try and create a custom Facebook video page yourself? Well, if you're not a developer, and not looking to become one,  I would say "no" for myself.

Is There An Easier Way To Do This?

That's why I decided to interview two companies specializing in developing Facebook Fan Pages – 1 Social Media Agency, and NorthSocial, and ask them for some advice on building your own custom video Facebook page. You can read about what they have to say in my upcoming posts!


Don't Miss Any Stories!
Get daily online video news, tips and trends via email!


Posted in Social Video
Video Companies:
About the Author -
Grant Crowell View All Posts By -

What do you think? ▼
  • http://www.reelseo.com/author/grantastic/ Grant Crowell

    ARTICLE UPDATED: I've included some feedback from online marketer and writer Nick Shin, who wrote for Social Media Examiner on doing FBML back in June 2010. He shares his comments on if he thinks it's worthwhile to do FBML for video apps today.

  • http://www.VideoLeadsOnline.com/ Ronnie Bincer

    I thought you were saying a while ago that Facebook was easy!?! Looks like these comments and such along with the article are pushing the need for a programmer to make this kind of stuff work, and then it will change soon anyways… growl. Still not a fan of facebook for marketing, even though I guess it is a required place to be seen!

    • http://www.reelseo.com/ Mark Robertson

      If it helps – I think it's easy

  • http://www.facebook.com/profile.php?id=100001013070163 Ephran Price

    Thanks for the info. I'm going to try and set it up.

  • Abaya

    Thanks for sharing knowledge. I will try this for sure.

  • http://bit.ly/gLaguh Alvin

    Dear Nick Shin,

    Can you modify your html code to associate it with "like" click and "play" video. It means, once people click on the video, automatically they like the page. Sound great right?

    Thanks.

    Alvin

  • http://www.facebook.com/profile.php?id=100001370633785 Diane Bija

    still cannot get my swf to show.

    • Vansh Monga

      The youtube code in this article does not work for me either. This is what I did, and worked, so thought I should share:

      Go to your youtube video.
      Click the share button.
      Then, click the "embed" button.
      And copy that iframe link in the textbox to Tab settings of your welcome page.

  • http://www.facebook.com/profile.php?id=1129389803 Juan E Christopher

    CAN'T GET MY VIDEOS TO SHOW.

    • Vansh Monga

      The youtube code in this article does not work for me either. This is what I did, and worked, so thought I should share:

      Go to your youtube video.
      Click the share button.
      Then, click the "embed" button.
      And copy that iframe link in the textbox to Tab settings of your welcome page.

  • http://www.facebook.com/profile.php?id=100000488785268 Aico Recites

    tenx

  • http://www.facebook.com/profile.php?id=100000099144387 Upendra Sharma

    thanks

  • Steve Goldberg

    The instruction do not make sense. I cannot even find the settings tab or a way to add an application

↑ Top