How To Add YouTube Videos To FBML Facebook Fan Page Tabs

Here’s a video I added to my Facebook Fan Page via the FBML app as the example to accompanies this article.

Adding a YouTube video your Facebook Fan Page is a great way to get your message out to visitors, and also to keep people coming back to your Facebook Fan Page.

And once you get the steps down to adding YouTube videos to your custom FBML tabs, you’ll be able to add more videos making your Facebook Fan Page even more dynamic.

However, in order to get a YouTube video embedded onto your Facebook Fan Page, you must use Facebook’s FBML tags. And if these tags are not utilized properly, then the video will not appear in your FBML tab.

Here’s the code to add a YouTube video to your Facebook Fan Page / proper FBML tag structure:

Replace “xxxxxxxxxx” with the YouTube video ID, which is the string of characters after the “v=” in the URL in your browser’s address bar (up to the “&” or anything following it, if you see that after the string of letters and numbers).

For example:

Here’s a YouTube video URL >

You would replace “xxxxxxxxxx” with “p2D5_6gC5Qg” in both places, resulting in:

<fb:swf
swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
swfsrc=’https://www.youtube.com/v/p2D5_6gC5Qg’
imgsrc=’https://socialmediaseo.net/wp-content/uploads/2010/11/twitter-to-facebook.jpg’ width=’340′ height=’270′ />

The .jpg (image) that I’m using is an image I’ve uploaded to use as the main image for my video. You can upload / add any image you want to act as your front image when people first see your video.

Positioning the video:

More than likely, you don’t want to just drop the video into your FBML tab, so you’ll n3eed to do some position.

This is done easily with <div> and css style elements.

Center the video:

<div style=”margin:0 auto; width:492px;”><fb:swfswfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;” swfsrc=’https://www.youtube.com/v/p2D5_6gC5Qg’ imgsrc=’https://socialmediaseo.net/wp-content/uploads/2010/11/twitter-to-facebook.jpg’ width=’340′ height=’270′ /></div>

Notice the “margin:0 auto;” portion of the code above.

Setting the margin to “auto” will center you video inside of the FBML tab. For other left or right adjustments, then use the following:

“margin: 5px 6px 7px 8px;”

This means that, reading from left to right, the top margin would be 5px, right margin 6px, bottom margin 7px, and left margin 7px.

This is just an example, use whatever margins fit your situation best.

Set to 1 click play:

With Facebook, there is no way to set your video to autoplay. Facebook requires a clickable action be taken.

That means, even if you set the URL to auto, as I show you how to do below, visitors will still need to click at least once to get the video to start playing.

However, if you set your YouTube URL to autoplay, at least you can get your video playing after that first initial click, instead of forcing people to have to click twice to get the video playing.

Here’s how you set autoplay on your YouTube video:

swfsrc = ‘https://www.youtube.com/v/p2D5_6gC5Qg&autoplay=1’

So look at the complete code above and find the swfsrc= element. At the end of the URL being referenced there (which is the URL to your YouTube video), paste &autoplay=1 at the end of that URL.

Hope this helps, let me know if you have any questions in the comments below.