How to Embed A Youtube Video On Your Facebook Page - Creating A Killer Facebook Fan Page Part Four

"The important thing about a problem is not its solution, but the strength we gain in finding the solution" - Unknown Author

 
Here's the result you will have when finished applying the steps in the video tutorial or the article. It's still simple and nothing jazzy but what I want is first to everyone doing this and later in time we get kicked.

We'll need it when we make everything hot and fancy later on:
 

 
Before you can embed the Youtube Video onto your facebook fan page, we need to do some preparation. We need to have the image ready so people see your video to press on or it won't work.

 
Let’s get the preparation done and afterwards we can add the code for the youtube video and the direct link for your image.
 
If you need a free design software and haven't Photoshop, then you can download GIMP. It's a free software, for retouching images.

Or you can check out 25 Free Must Download Design Programs that will do the job too.
 

Creating Your Image For Your Youtube Video

Go to any of your videos on youtube and press on your keyboard to Print screen. This will capture a still image of your video.
Or you can use a software like Camtasia to record and then capture an image.
 

Open a design software on your computer. I use Photoshop but you can use Gimp which is free or paint brush. I created a canvas to have this size:

 

When your canvas is ready then paste the image of the still image onto it using the CTRL + V on your keyboard.

 

Clean it up by cutting out the full player and paste again. Then Resize it to fill the canvas. We’re going to add some colour and text to it, to make it more presentable:

 

I don’t need to slice this image. You just need to save it in a format that will help us to upload it online. We’ll save this image file as a Jpeg file:

 

Upload Your Video To An Image Hosting

You can use any online image hosting that works for you. I’m going to use Photobucket, which is free to upload your images:

 

When the image has been uploaded to Photobucket – it will give us different links. The one to copy is the “Direct Link.”

 

Now we need to also get the link for our youtube video.

It’s the Direct URL Link that we need. Highlight the direct youtube url, right click with your mouse and copy it and paste it in your note pade or word document.

 

Pasting The Code On Your Facebook Fan Page

On part 3, we created the tabs and we used FBML to create a box to paste the code. Its time to login to your Facebook account. 

Then type on Facebook search box your own profile facebook name or the name of your fan page and click on it.

When you’re on your Facebook Fan page, we need to go to one of the tabs we have created. Look on your left where your profile photo would be. Under it, click on 'Edit Page.'

 

This will take you to all the applications that’s on your Facebook Fan Page. Scroll down until you find the tab you want to put the youtube video in and click on 'Edit.'

 

You'll come to the box where we are going to add the code. We will make some slight changes too. We can’t just paste the code in straight off. Just a few changes are needed:

 

The full code to paste into the box above is this:

I'll not go into explain what the code means as I don't want you to go to sleep. Let's keep it brief in say:

A) Your telling facebook where the image is.

B) You're telling facebook where the video is and the format type of video it is.

Swf = is the format of your video. It stands for Shockwave Flash.
Src = stands for source. It needs to be the the direct, absolute URL link your video or image is being hosted on.

All we got to do is change the youtube link to work with Facebook Markeup Language (FBML):

And here's the full code. All you got to do is replace the link for the image and the youtube video and replace them with your link. I've highlighed them as bold:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc=' http://www.youtube.com/v/ca083F0jZu8'
imgsrc='http://i329.photobucket.com/albums/l367/onedarkangel_uk/youtubeimage.jpg' width='680' height='480' /></center>

It’s time to paste the code into the box tab of our facebook fan page.

Before we save the work, we add one slight change so we can centre everything, give the page a headline, and also make some paragraphs. These are the added changes I made:

We add the headline:
<h1> HEADLINE HERE.</h1>

We centre the video, image of the video and headline:
<center> and I close the centre like this </center>

Then add paragraph break:
<p> and I close this paragraph </p>

Below is what it looks like with everything added in the FBML box:

 

Let's see what it looks like by saving your hard work:

Next is go back to our face book fan page by clicking on the link above or by using Facebook search engine.

Which will lead us back to our fan page. Click on the tab you have pasted the code in:

 

 Your Result shows the image first on your facebook fan page:

When you click on the image your video will be activated:

And press play.

Congratulations you have now got your own youtube playing on your facebook fan page.

 

------------------------------------------------------------------------------------------------------------------------------

The Killer Facebook Fan Page Series:

Part One - The Beginners Guide To Creating A Killer Facebook Page
Part Two - Taking Action To Plan Your Facebook Fan Page
Part Three - Creating A Welcome Tab, Ezine Tab To Your Facebook Fan Page
Part Four - Embeding Youtube Video and Any SWF Videos to Facebook Fan Page
Part Five - How To Add Aweber Opt-in Form To Facebook Fan Page
Extra Extra - How to block Games Applications On Your Facebook Wall

 

Adam Taha
Helping You Get Started With Internet Marketing And Social Media