Cheryl Waller

Posts Tagged ‘HTML/CSS’

Facebook: How to Add Your YouTube Videos to Your Business Page

21 April 2010 | No Comments » | Cheryl Waller

This post was requested by AR member Melissa Zavala. In her comment on my blog post Facebook: Profiles, Fan Pages, and Groups… Oh My!

She asks “…Can you write a blog post about how to embed youtube video into a fan page? I know how to insert it into an fb personal page, but cannot figure out how to add it to a fan page…”

No problem Melissa!

With Facebook custom business pages you are most likely going to be using the static FBML app. If you are not sure how to add or use it, just check out the videoHow to Create Your Own Facebook Custom Fan Page

In order to add YouTube, Facebook or swf videos to your custom fan page, you are going to have to get a little bit ‘techy’. It’s actually pretty simple, but if you have never even worked with HTML, then FBML may be a bit intimidating. Fear not though because I am going to make this as simple as possible for you.

When you are editing your custom business page using the static FBML application you will see an empty box.

In that box you will need to paste your CSS, HTML and FBML. Let’s say for the sake of argument right now that we want to just add a youtube video with a headline, a subheading, and a little anchor text below the video linking to our website. What we are going to need first is a little HTML to get this started.

Let’s start with the headline. I am just going to be using the H1 tag here because there are a lot of HTML tags that will not work with the static FBML application. Most of them include font color, sizes and positioning. All of that NEEDS to be controlled with CSS, but that is beyond the scope of this post.

<h1>This is My Awesome Headline</h1>

That will give you a nice large, bold headline that will be left aligned. Now lets add a break so that the subheading starts on the next line and add our subheading.

<h1>This is My Awesome Headline</h1><br >

<h2>This is My Cool Subheading</h2>

Ok great, now we have both our headline and subheading. Let’s get to the fun part. Adding the video in FBML. Now I will let you know here that there are different versions of FBML, but as long as you are using the most current FBML version, then you do not need to specify FBML with tags. <FBML></FBML>

For our video we are going to be using <fb:swf>. Now there are many variables and controls that we can add here, but we are going to keep this nice and simple.

<h1>This is My Awesome Headline</h1><br >

<h2>This is My Cool Subheading</h2><br>

<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/1.jpg’

width=’340′ height=’270′ />

Ok cool now all we have to do is get our video ID from youtube and replace the xxxxxxx above for both. Don’t change anything else unless you are certain that you know what you are doing.

Ok now we are going to add another break and some anchor text underneath the video that leads to our website.

<h1>This is My Awesome Headline</h1><br >

<h2>This is My Cool Subheading</h2><br>

<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/1.jpg’

width=’340′ height=’270′ /><br>

Please visit <a href=http://www.MyCoolWebsite.com>My Cool Website</a><br>

Copy and paste all of your code into the FMBL box, choose the title of your tab and that’s it. You have successfully added a heading, subheading, video and anchor text to your custom business fan page. When you are done it should look like this:

Have another request for a tutorial? Leave a comment and let me know.

If you like what you read here, please ‘Like’ Custom Fan Pages so I can send you updates when new tutorials come out.

Cheryl Waller
Marketing Consultant SEO, SEM, SMM
www.CherylWaller.com

Like my post? Take a sec and ‘Like’ my pages ;)

Social Networking for Real Estate Agents

CUSTOM ‘FAN’ PAGES

BUSINESS PAGE TEMPLATES

Bookmark and Share

LinkedInFacebookBlogTwitterActiveRain

Get Adobe Flash playerPlugin by wpburn.com wordpress themes
6 visitors online now
6 guests, 0 members
Max visitors today: 7 at 08:42 am EDT
This month: 24 at 09-05-2010 01:36 pm EDT
This year: 60 at 08-03-2010 07:12 pm EDT
All time: 60 at 08-03-2010 07:12 pm EDT