This is a quick video tutorial on how to put a Youtube channel or Playlist into your Facebook Fan Page.
Example: Selby (musical artist – Sacrilicious Client)
While putting a Youtube video in your fan page is cool – it is often more useful to place an entire playlist or channel there to give fans a better more interactive experience and automate the process of updating your fan page with all your latest Youtube content. So, this is a quick tutorial with instructions, video and code sample.
Step by Step Instructions
1. Login to your Youtube account
2. Create your custom player by going to the following url: http://www.youtube.com/custom_player/
Make your color selects and be sure to select the slimmer width player “Layout.” Make sure you select the player that doesn’t have the two columns of thumbnails to the right of the main video. Facebook will be reducing the width of fan pages to 520pixels later this year and the slimmer player will be compliant with that change.
Select the videos to populate your slideshow/player from any of the following (“My Videos”, “My Favorites” or one of your created Playlists).
After making all your option selections, click the “Generate Code” at the bottom of the page. Your “Embed Code” that is generated will look something like this:
<object width=”416″ height=”337″><param name=”movie” value=”http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc=”></param><embed src=”http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc=” type=”application/x-shockwave-flash” width=”416″ height=”337″></embed></object>
3. Create the FBML Code from the Embed Code
Using the below FBML code, you will remove the “value” string from the <param> tag in the YouTube-generated code and make it the value for “imgsrc.” The “imgsrc” is the absolute URL to the image that will be clicked on to load the video player in your FBML page (Facebook doesn’t allow Flash to load or JavaScript to run until the user takes an action, usually a click). Make sure the image is the same dimensions as the width and height values of the video player, as reflected in the YouTube-generated code (492 x 391px, in the example here). You will also change the <object> tag to the <fb:swf> tag as seen below.
ORIGINAL YOUTUBE EMBED CODE
<object width=”416″ height=”337″><param name=”movie” value=”http://www.youtube.com/cp/vjVQa1PpcFMbh5IChE9Fa54rO-v6qsd7iMZk6sLQub8=”></param><embed src=”http://www.youtube.com/cp/vjVQa1PpcFMbh5IChE9Fa54rO-v6qsd7iMZk6sLQub8=” type=”application/x-shockwave-flash” width=”416″ height=”337″></embed></object>
RESULTING FBML
<fb:swf swfbgcolor=”000000″
imgstyle=”border-width:3px; border-color:white;”
swfsrc=’http://www.youtube.com/cp/vjVQa1PpcFMbh5IChE9Fa54rO-v6qsd7iMZk6sLQub8=’
imgsrc=’http://i921.photobucket.com/albums/ad60/sacriliciousmarketing/video.png’ width=’492′ height=’391 />
Now that you have you FBML, simply, create a new FBML tab on your page and paste this code into the FBML tab editor and it should work.
Popularity: 9% [?]
