« return to hot glue media

How to Add Video to Your Facebook Fan Page

Please note: as of March 18, 2011, this tutorial is no longer accurate, due to Facebook’s deprecation of FBML. Please see this post for details.

Facebook fan pages are hip, hip, hip these days, and videos are all the rage. Combine the two? Not as easy as it probably should be. But (as with most things internet), it’s totally do-able, given enough time and know-how. Got the time, need the know-how? Here you go, from beginning to end.

You don’t need knowledge of HTML or FBML to follow along, but basic internet knowledge and the willingness to muck around a bit are required. :)

Preliminaries
Well, to start, you need a Facebook account, a YouTube (or Vimeo, or other video hosting service) account, and a video that you’d like to use. You can sign up for a Facebook account here (be sure to read their somewhat dubious privacy policies first) and YouTube here.

Step 1: Facebook Fan Page Basics
A standard Facebook page isn’t quite enough – you need to create a Facebook Fan Page. If you haven’t already created one*, visit the Facebook Pages page and click the green “Create a Page” button. Select your page category and give your page a name (usually the name of your product or business.) Read and agree to the terms and conditions, and click the “Create Official Page” button. Once your page has been created, click the “Info” tab at the top of the screen, click the “Edit Information” link, and enter basic information about your business.

Next, click the “Photos” tab, and upload your logo or profile picture. Tip: in order for the image to display correctly in both the main logo area and the avatar/icon, the image must be square. View the photo and click “Make Profile Picture for Page”. Your Fan Page basics are now set.

*Not sure if you’ve already created one? While logged in to Facebook, click the “Account” drop-down in the upper right corner of any page, and click “Manage Pages”. This will show you all of the pages associated with your account.

Step 2: FBML
The next step is to set up the FBML application with your page. FBML, short for Facebook Markup Language, is what allows you to add video (or HTML, or pretty much anything you’d like) to your Facebook Fan Page. To add FBML to your page, click the “Edit Page” link just under the logo on the left side of your fan page. Scroll all the way to the bottom to the “More Applications” box, and click “Static FBML”. Once on the Static FBML page, click “Add to my Page” just underneath the logo on the upper left side. You’ll be presented with a pop-up list of all your Fan Pages. Click the “Add to Page” button directly to the right of the page you’d like to add it to; then click “Close”.

Step 3: FBML Configuration
Return to your Fan Page: click the “Account” dropdown in the upper right corner of the screen, and select the “Manage Pages” link to view a list of your Fan Pages. Click the “Go To Page” button directly to the right of the page you wish to edit.

Once again, click the “Edit Page” link on the left just under your logo. Scroll down to the “Applications” area and look for “FBML”. Click the “Application Settings” link in the FBML box. Change your settings to read “Box: Available” and “Tab: Added”. Click “Okay”. Next, click the “Edit” link in the FBML box. The “Box Title” will appear as the name of the tab on your Fan Page. Enter your business name, product name, tagline, or anything you’d like here. (It’s worth noting that you only get ten characters or so on the tab, so keep it short or Facebook will truncate it for you.) The large “FBML” text area is where we’ll add the video code; for now, just type “Test” or something similar. Click “Save Changes” at the bottom.

Step 4: Show the World
Return to your Fan Page and click the “Settings” button, just under the “Share” button in the center column. Change the “Default Landing Tab for Everyone Else” to the FBML page you created in the previous step.

Return to your Fan Page again and copy the public URL for your page. The easiest way to do this is to copy the beginning of the URL from your browser’s address bar, before the first question mark. It should look something like this: http://www.facebook.com/pages/City-ST/Your-Company-Name/00000000, except those zeroes will be a string of integers. Log out of Facebook (or open a new Incognito Window, if you’re using Chrome), and paste that URL  into your address bar. You should see your thumbnail logo, your tabs, and the word “Test” (or whatever you typed in the FBML field in the previous step). Congrats – you’re on your way to a custom page.

Step 5: Upload your Video
In order to embed a video on your Facebook Fan Page, you first need to upload it to a video hosting service, such as YouTube. To upload your video to YouTube, log in and click the “Upload” link at the top of the page. Click the yellow “Upload Video” button. Browse to and upload your video. Wait while it processes – this may take quite some time, depending on the size of your video. Add your video’s title, tags, and description. Click “Save Changes”.

Step 6: Add Video to your Facebook Fan Page
It’s been a long time coming, but we’re finally at the point where you can add video to your Fan Page. :)  To do so, make note of the URL for the video you just uploaded (presented in a green box at the top of the upload page as “Your video will be live in a moment at:”.  Go back to your Fan Page, and click “Edit Page” under the logo on the left side. Scroll down to your FBML settings – the box will now be titled with whatever you named your FBML page in Step 3 – and click “Edit”. In the large “FBML” box, paste the following code:

View Code

<fb:swf swfbgcolor="000000" imgstyle="border-width:##px; border-color:white;" swfsrc="http://www.youtube.com/v/YOUTUBEID" imgsrc="YOURIMAGE" width="520" height="400" />

Replace the YOUTUBEID with the ID of your video. Your video ID is the string of random characters in the URL you noted above. Next, you’ll need to provide the URL of an image that will display as the placeholder for the video. This can be an image in your Facebook gallery, Flickr stream, etc. Replace YOURIMAGE with the complete URL for your placeholder image (including http://).

If you’d like to use the placeholder image created by YouTube, log in to YouTube and click your user ID in the upper right corner. Click “My Videos” on the dropdown menu, and click the “Edit” link for the video whose image you’d like to use. Scroll down to the “Video Thumbnail” section. Right-click on the image you’d like to use, and copy the image URL (“Copy Image Location” in Firefox, “Copy Image URL” in Chrome, “Properties > Address URL” in Internet Explorer). Paste that URL in place of YOURIMAGE above.

After you have edited the code to include your video ID and image URL, Click “Save Changes”.

Return to your Fan Page again and copy the public URL for your page. The easiest way to do this is to copy the beginning of the URL from your browser’s address bar, before the first question mark. It should look something like this: http://www.facebook.com/pages/City-ST/Your-Company-Name/00000000, except those zeroes will be a string of integers. Log out of Facebook (or open a new Incognito Window, if you’re using Chrome), and paste that URL  into your address bar. You should see your thumbnail logo, your tabs, and your video image. Click the image to play the video.

Congrats! You’ve got a video on your Facebook page.

The results of this tutorial can be seen on the Videos tab of our brand spanking new Facebook Fan Page if you’d like to check it out. (Including cameraphone videos from a rainbow we were lucky enough to see on one of our first days in Buffalo.)

So Now What?
You can add additional information to your FBML page, such as text, more videos, or HTML if you’re up for a challenge. Have fun!

Please note: as of March 18, 2011, this tutorial is no longer accurate, due to Facebook’s deprecation of FBML. Please see this post for details.

made this mess on June 28th, 2010 and filed it under Social Media

Discussions regarding “How to Add Video to Your Facebook Fan Page”