UPDATE: YouTube has changed the admin interface, and I have changed this post to reflect these changes.
In my earlier post on embedding Flash or YouTube videos on your Static FBML page, I described how Facebook’s Static FBML application supports the embedding of Flash objects, including YouTube videos.
NOTE: If you can’t get it working, make sure:
- The URLs to both the activation image (imgsrc) and the video channel are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.
- You have closed the <fb:swf> tag, with </fb:swf>. If the tag isn’t closed, it won’t work.
- All quotes are closed. It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width=”xxx’ ).
For businesses or organizations that have a YouTube channel, the good news is that you can embed a slideshow of your YouTube channel on a Static FBML application tab page. The presentation is quite nice, with the main video and, below it, a scrollable row of thumbnails that appears when the big video is moused over.
Here’s the drill:
Create the Custom Video Player in your Channel Account
Log in to your YouTube account;
Once you are logged in, you want to go to this URL:
http://www.youtube.com/custom_player/
Make your selections, making sure that, under “Layout,” you select the player that doesn’t have the two columns of thumbnails to the right of the main video (the one on the left, below):
(You want to use the narrower player because Facebook plans to reduce the width of Application Tabs from 760px to 520px in “early 2010″ (See my post on the Facebook Fan Page width reduction.)
Select the videos to populate your slideshow/player (“My Videos”, “My Favorites” or a Playlist):
After choosing all your options, 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>Create the FBML Code for Static FBML
You will need to extract the “value” string from the <param> tag in the YouTube-generated code and make it the value for “imgsrc”:
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI='
imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='492' height='391'/>
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).
Simply paste the code into your Static FBML instance and, assuming the URLs to the player and to the load image are correct, it should work. (Refer to my post on embedding Flash or YouTube videos on your Static FBML page for more info.
If you want different dimensions for the video and the activation image
If you’d like the activation image to be a different size from the video itself, just add the values to “imgstyle”, for example:
imgstyle="width:500px;height:400px"
Related: How to Embed a Flickr Slideshow in your Facebook Static FBML Application Tab Page
Related: Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML
Related: Tutorial: Embedding YouTube Videos and Other Flash in your Facebook Fan Page with Static FBML
Static FBML Code Templates for Sale!
#1 by Cherry - February 23rd, 2010 at 10:07
how can i centralized the video?
#2 by admin - February 23rd, 2010 at 10:22
Cherry, I don’t understand your question….
#3 by Valerie Cudnik - February 23rd, 2010 at 20:42
I’m obviously missing something…
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/cp/vjVQa1PpcFM8SoewIarDxI3A8abfgrwEzuWlXbqwC2k=' width='416' height='337'
imgsrc='http:/blogging2blog.com/media/youtubeplayer.jpg' width='416' height='337'
/>
Zilch on my tab. My other tabs with html are all fine. Tried with hex codes, color names, no style, single quotes, double quotes. Tested the URLs for the youtube code and the image code (found the info that image must be jpg or gif on the developer wiki). I even through in other html to make sure that the tab was refreshing, etc., and it all worked. I’m getting a blank tab. I’m actually reasonably adept at swiping code and making it work… I’m stumped.
#4 by admin - February 24th, 2010 at 01:03
Your YT video URL goes to a video, so that’s fine as long as there’s no line break in the code.
And your imgsrc will work *if* you put 2 forward slashes after “http:” – there’s just one, and that might be the problem.
#5 by Valerie Cudnik - February 24th, 2010 at 20:19
Thanks! I can’t believe I missed something so basic! Working fine now!
#6 by MAVERICK SHAW - February 24th, 2010 at 00:43
HELP me…Im confused…here is my code:
but HOW can I make it work?
#7 by admin - February 24th, 2010 at 01:06
You didn’t surround your code in the code tags:
<code></code>
Code won’t display in comments if you don’t do that.
#8 by Testing - February 25th, 2010 at 15:55
For some reasons I cannot get photo to show up on Facebook web site – I am using link from Flickr – any ideas? Thanks!
#9 by admin - February 27th, 2010 at 18:54
With no code or URL, I really can’t help.
#10 by VRROOM - March 4th, 2010 at 23:42
Can I embed more than one video player within the same FBML tab?
Or, if not, can I have more than one FBML tab with a player on each tab? In other words, I would like to have multiple players.
I’ve tried a couple of different things, but can’t seem to get it to work.
#11 by admin - March 5th, 2010 at 13:59
You can embed multiple videos or a YouTube channel on a Static FBML page. You can also have a separate tab for each video. Here’s our tutorial on embedding a YouTube channel in Static FBML. Here’s our tutorial on embedding Flash or YouTube videos in Static FBML.
#12 by Thomas - March 12th, 2010 at 09:58
Dear Sir,
I am a complete and total novice at this. I am not sure what the problem is, I took the code generated from You Tube and tried to emulate the example above in the article that showed the changing HTML into FBML. I get nothing but a blank screen when I click the You Tube tab I created. I do not have an “image” per se. I thought that this code would open the YT channel that I created and that would be that. Similar to when I click the You Tube tab from the HyperArts FB page. My FB page is not published yet.
Thank you in advance…
Here is my HTML directly from You Tube
And here is how I adjusted it based on what we talked about (my FBML)
#13 by Thomas - March 12th, 2010 at 09:59
Here is the code…
Here is my HTML directly from You Tube
And here is how I adjusted it based on what we talked about (my FBML)
#14 by timware - March 12th, 2010 at 10:15
You need to put your code between these tags:
<code></code>
Otherwise, I can’t see it.
#15 by derrick - March 14th, 2010 at 11:52
for some reason it won’t display the player. Here is the code can you help me please
<div id="nav2" style="display: none;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFOr_9ut_h-O8hcd3h6Zs0QqjVEUL3bHVmk='
imgsrc='http://www.hyperarts.com/facebook/umf/click-to-play.gif' width='416' height='337'/>
#16 by admin - March 14th, 2010 at 12:38
The imgsrc points to a valid file. I suspect have the div in which the video is embedded set to “display:none” is the culprit. Remove that and you may have a better view…
#17 by Justin Beausoleil - March 20th, 2010 at 17:26
I know you said that facebook is changing the size of their FBML page but I would like to do this.
#18 by admin - March 20th, 2010 at 18:21
That appears to just be what is now Option 3 in setting up a YouTube Channel player, with the thumbs to the right of the main screen.
#19 by Michele Augis - April 6th, 2010 at 00:46
tim! i went to finally try this on an artist fan page and it appears the “new” youtube interface has me stumped in finding the “create custom player” button or option. is there a new place to look to find that? yay – thxxx!
#20 by timware - April 7th, 2010 at 13:08
Yes, it appears that YouTube has changed its admin interface. As I note above in my update (just added), after logging in to your YouTube account, you’ll want to go to this URL: http://www.youtube.com/custom_player. Then proceed as described in my post.
#21 by Michele Augis - April 9th, 2010 at 00:06
oh what a thrill! thx for all the care here, tim. do you have a blog post yet for using FBML for creating a comments section (below the youtube channel, for example)? i feel like i have seen it is poss. if you have a post on it, that would be swell. if not, i’ll find it somehow!
#22 by Nick - April 7th, 2010 at 07:45
I too am stumped with the new interface as I cannot find the “create custom player” as well.
#23 by timware - April 7th, 2010 at 13:08
Nick, I have updated my post with new instructions for embedding your YouTube custom player.
#24 by Nick - April 8th, 2010 at 08:03
Thank you
#25 by katie - April 8th, 2010 at 10:09
I’m not seeing anything, but I’m also could have goofed up along the way.. here is my code, I thought I plugged in the value string from the tag…
<fb:swfswfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFPBDKirSKEBjLVm5YH0Dxqp_1WDICRNc0E='
imgsrc='http://www.hyperarts.com/facebook/umf/click-to-play.gif' width='492' height='391'/>
#26 by timware - April 8th, 2010 at 10:24
Hi Katie. Your URL to the Flash file is fine. But the URL for the “activation” image points to a file on our server, which is no longer there. So you can’t see the image. Point that URL to an image you want to use as the activation image and all will be well.
#27 by katie - April 8th, 2010 at 11:45
Thank you!!!! it works like a charm
Will be tweeting this!
#28 by Jennifer - April 10th, 2010 at 12:34
Hi,
I know you have explained every single step very clearly but I still don’t get it.
The only thing I have achieved is a tab vith an image of a video camera on which one can click. After clicking, nothing happens.
This is the code I have created on youtube
and this is the code which I have used for FBML
Thank you in advance for your help!
#29 by Jennifer - April 10th, 2010 at 12:35
Hi,
I know you have explained every single step very clearly but I still don’t get it.
The only think I have achieved is a tab vith an image of a video camera on which one can click. After clicking, nothing happens.
This is the code I have created on youtube
<object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFOQhSxd7X9xd1xNOKy9fggJWcEMU5Bbwhs="></param><embed src="http://www.youtube.com/cp/vjVQa1PpcFOQhSxd7X9xd1xNOKy9fggJWcEMU5Bbwhs=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>and this is the code which I have used for FBML
<fb:swfswfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/jVQa1PpcFOQhSxd7X9xd1xNOKy9fggJWcEMU5Bbwhs'
imgsrc='http://img.youtube.com/vi/jVQa1PpcFOQhSxd7X9xd1xNOKy9fggJWcEMU5Bbwhs=/2.jpg' width='340' height='270' />
#30 by timware - April 11th, 2010 at 08:50
Your URL to the video is incorrect. You omitted the “=” from the video URL. If you add that, it should work.
Most problems that users have with the <fb:swf> code is that the URL to either the activation image or the video is incorrect.
#31 by Daryl - April 10th, 2010 at 13:08
Thanks for the wonderful help with FBML.
For some reason, I can’t embed multiple youtube videos in my FBML. Any help would be appreciated.
<br>
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/FyeavCxyhaM'
imgsrc='http://farm5.static.flickr.com/4061/4508735348_f17cf10905_o.jpg'width='280' height='180'
</br>
<br>
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/FyeavCxyhaM'
imgsrc='http://farm5.static.flickr.com/4061/4508735348_f17cf10905_o.jpg'width='280' height='180'
</br>
#32 by timware - April 11th, 2010 at 09:04
You need to close each instance of the <fb:swf> tag. It appears you neglected to close either tag, using </fb:swf>. If you do this, your multiple embeds should work fine.
#33 by Nick - April 18th, 2010 at 00:16
I’m at wit’s end here, I’ve tried with and without the
</fb:swf>at the end. Im trying to post in my facebook notes along with regular info. Thx.<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/HjuQ0nxmYz8'
imgsrc='http://img.youtube.com/vi/HjuQ0nxmYz8/2.jpg' width='340' height='270' />
</fb:swf>
#34 by timware - April 18th, 2010 at 06:48
You can only do this in Static FBML or other application tab app, or on a canvas page. You can’t add FBML to a note.
#35 by Aphra Behn - April 18th, 2010 at 11:14
I’ve gotten the embedded code it is:
I am not sure what to do as in your example you changed
http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc
TO ‘http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI=’
Also re landing page. Is this any page I want to choose such as .jpeg photo on my web site.
I am a real novice so forgive me in advance.
#36 by Aphra Behn - April 18th, 2010 at 11:15
Here is the embbedded code:
object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFP0yynq5e0tJPc1yg8-C-Wfs_L9_bBRrIw="></param><embed src="http://www.youtube.com/cp/vjVQa1PpcFP0yynq5e0tJPc1yg8-C-Wfs_L9_bBRrIw=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>#37 by timware - April 18th, 2010 at 11:56
From the embedded code you provided, you want to use “http://www.youtube.com/cp/vjVQa1PpcFP0yynq5e0tJPc1yg8-C-Wfs_L9_bBRrIw=” for the “swfsrc” value. The “imgsrc” has to be a URL to an image online somewhere, JPEG, GIF or PNG.
#38 by Aphra Behn - April 18th, 2010 at 11:19
Here is what I’ve been trying to paste with a landing page just the home page of my web site. I get a blank square on the FBML page
#39 by Aphra Behn - April 18th, 2010 at 11:21
Oops..here is it
fb:swfswfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;" swfsrc=' http://www.youtube.com/cp/vjVQa1PpcFP0yynq5e0tJPc1yg8-C-Wfs_L9_bBRrIw=';
imgsrc='http://www.guerrillagirlsontour.com/’ width='416' height='337'/>>
#40 by timware - April 18th, 2010 at 11:59
Hopefully, your opening tag is <fb:swf> and NOT just fb:swf! You really need that opening “< ".
And you didn't follow my example with any precision and code is all about precision. It's really sloppy.
Get rid of the semicolon after the "swfsrc"
You have two ">“s for the closing tag. That shouldn’t make a difference, but I’d clean it up.
Cheers.
#41 by Aphra Behn - April 18th, 2010 at 13:46
Thanks for the reply. Here is what I’m trying.
swfbgcolor=”000000″
imgstyle=”border-width:3px; border-color:white;” swfsrc=’http://www.youtube.com/cp/vjVQa1PpcFP0yynq5e0tJPc1yg8-C-Wfs_L9_bBRrIw=’
imgsrc=’http://www.guerrillagirlsontour.com/china/china007.jpg’ width=’416′ height=’337′/>
#42 by Aphra Behn - April 18th, 2010 at 13:47
It does contain but for some reason it did not put that in the message.
#43 by Aphra Behn - April 18th, 2010 at 13:48
fb:swf#44 by timware - April 18th, 2010 at 13:58
PLEASE surround your code with the <code> </code> tags! I’ve made that instruction red and in italics and yet people ignore that. Your code is fine EXCEPT your quotes are of the “fancy” (Rich Text) variety, aka curly quotes or whatever, where they should just be plain-text, just straight up and down. If you fix that, your SWF will load.
#45 by Aphra Behn - April 18th, 2010 at 14:23
Got it! Thanks so much for all the help.
#46 by Val Stow - April 20th, 2010 at 12:59
I must be blind…..please help me figure why I don’t get anything when I use this code on my FB page. Could it be the https:// ?
Here is the code:
<fb:swfswfbgcolor="ffffff"
imgstyle="border-width:3px; border-color:white;"
swfsrc=‘http://www.youtube.com/cp/vjVQa1PpcFNI1yDOQzch7oDRdohHWnbiQGLTh8hBhrQ='
imgsrc=‘https://alidasfruits.3dcartstores.com/assets/images/Nonproductpics/Untitled-1.jpg’ width='416' height='337'/></fb:swf>
Thanks,
#47 by timware - April 20th, 2010 at 13:25
The problem is that you have some “curly” quotes in there. Make sure all your quotes are of the “straight” variety, straight up and down. Fix those and it’ll work.
The https for the imgsrc should work fine.
Also, you can close the code with just “/>” (w/o quotes), instead of </fb:swf>, although it works either way.
#48 by Val Stow - April 21st, 2010 at 07:26
Thank you so much! I new it was something simple. Thx!
#49 by Eilish - April 28th, 2010 at 05:25
Hi Tim,
I’ve pored through all the comments and replies on this but I still can’t get it to work in my FBML tag on Facebook.
I’ve checked the links in my browser and they bring up a full screen player though in the custom channel set up I opted for the narrow layout as suggested.
Do you have any ideas as to what I’m doing wrong?
Really appreciate the help!
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc="http://www.youtube.com/cp/vjVQa1PpcFN-s9lc_aBVEuHaOAb88B5gVvHI74s2DSQ="
imgsrc="http://www.youtube.com/cp/vjVQa1PpcFN-s9lc_aBVEuHaOAb88B5gVvHI74s2DSQ="
width="416" height="337"/>
#50 by timware - April 28th, 2010 at 08:06
I wish all questions were this easy! Your “imgsrc” is the same Video Channel. Per *very* clear instructions here, it should be an image that, when clicked, activates the Flash video. Point “imgsrc” to an image and this will work.
#51 by kevin - April 28th, 2010 at 12:10
sorry forgot the to add the tags…any help appreciated.
<fb:swfswfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc="http://www.youtube.com/cp/vjVQa1PpcFOcd5rrW7MLVSF7px_acxJTXFNpE5XrJTI="
imgsrc='http://fit4mum.com/wp-content/uploads/2009/12/BuggyFit_006-300x252-custom.jpg" alt='BuggyFit_006' width='300' height='252'/>
#52 by timware - April 28th, 2010 at 17:24
Your “imgsrc” has a single quote to open the URL and a double quote to end it. I explicitly state at the beginning of this post to check for this. Cheers….
#53 by Eilish - April 30th, 2010 at 05:13
Hi Tim – I actually figured out what I was doing wrong so no need to get back to me on this.
It was a problem with the creation of the player on YouTube not the code. I wasn’t hitting the “select” button to select the videos within the player. My bad. Thanks for the great advice here – I love this site!
e
#54 by Kiss - May 10th, 2010 at 16:15
Hi, im wondering how can I do this on my Facebook. Take a look on the left side on this website http://www.facebook.com/cocacola?v=wall and click on the video it popups. Please help. Thank you in advance.
#55 by Kiss - May 17th, 2010 at 09:56
Hello, i really want to know how to make this one in the sidebar of the wall. Please take a look at this facebook page at http://www.facebook.com/cocacola?v=wall on the left side under videos if you click it, it popups and display the video.
#56 by Phil - May 20th, 2010 at 12:41
Hi Tim – Thanks for all the info. Things are working great but I am trying to center the flash player horizontally with the tab and I am missing something…code is below:
<table width="750" height="652" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td width="800" height="98"><p><a href="http://recoverygear.com"><img src="http://www.thevisualgroup.com/storage/rg/Recovery%20Gear-White.jpg" width="310" height="57" hspace="15"></a></p></td>
</tr>
<tr align="center" background="http://www.thevisualgroup.com/storage/rg/GenericBack.jpg">
<td width="800" height="550" align="center">
<fb:swf
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFP-ElbFps9VCJzyuRrCdhwcDcsSCOPMXhg='
imgsrc='http://www.thevisualgroup.com/storage/rg/Youtube%20Image.jpg' width='600' height='413'/></fb:swf></td>
</tr>
</table>
Thanks in advance.
#57 by Phil - May 20th, 2010 at 13:27
No worries as I figured it out. Just had to add a tag and all is good. Thanks for this great resource!
#58 by timware - May 20th, 2010 at 18:03
In the <td> that contains the FBML, you might try:
style=”text-align:center”
instead of: align=”center”
#59 by John - May 20th, 2010 at 19:42
I tried to follow the instructions above, but I still only get a blank Tab on our Facebook Page. Does this look right?
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFOIDVVu3HAI-Cap1_DQ_z9pIycj5Rn-v2U='
imgsrc='http://www.youtube.com/cp/vjVQa1PpcFOIDVVu3HAI-Cap1_DQ_z9pIycj5Rn-v2U=' width='492' height='391'/>
#60 by timware - May 22nd, 2010 at 08:56
Your “imgsrc” value points to the video, not to an image. I wish people would read this post more carefully!
#61 by Chelsea - May 22nd, 2010 at 06:35
Hi there,
Thanks for this tutorial and others, I have found them really useful.
I am wondering if you know any way around this problem:
“Currently, Facebook wraps the resultant Flash object in a tag, so despite the fact that the embed/object tag is not block-level, consecutive tags will appear one above the other instead of side-by-side. ” – http://wiki.developers.facebook.com/index.php/Fb:swf
I am trying to embed multiple videos into a slideshow in a Static FBML tab that works fine for images, and I believe that the above is the root of my problem, no matter how I tweak the code the videos appear one above the other. Do you know whether it is because of the above in which case I will just look for another way to do it, or is there something I can do to override this? Thanks so much!
#62 by timware - May 22nd, 2010 at 12:12
Chelsea, Great question. I decided to do a blog post on creating rows of videos (or Flash) in Static FBML tabs. Check it out. It should set you up.
#63 by ryan - May 28th, 2010 at 21:02
hello am im a beginner in fbml and i would like to learn more i want to make my fan page popular could you send me a simple code for example: step 1: click “like button” step 2: suggest this page to your friends and when the person completed that they will unlock the content that they can only see if they do the step 1 and 2
#64 by timware - May 30th, 2010 at 08:18
You want them to become a fan AND suggest your site to friends and then you show them your content? Well, read the post here on showing content to fans only. But even these days you’ve gotta give folks some reason to make you popular
#65 by Marilyn - June 2nd, 2010 at 12:47
Hi Tim,
I’ve been able to load the video and image onto my facebook page no problem. The only thing I can’t seem to figure out how to do is to have the small thumbnails of my other videos appear in the bottom of the box like you have pictured in the picture at the top of the page. Is there a way to do this?
#66 by timware - June 2nd, 2010 at 12:52
Sounds like you’re linking to an individual video, not a channel. Follow the instructions here to the “T” and you should get it working. If you properly link to a channel, and select the correct option in the YouTube interface, you should be able to get it working. Make sure all the videos you want in the slideshow are all in one channel. And I can’t support you on how to do that part.
#67 by Marilyn - June 2nd, 2010 at 14:40
All the videos are in the channel, I believe. I can see them when I hit the rectangular button next to the play button. I was just wondering if there was a way to have them show consistently. Here is the code I used.
<fb:swfswfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNyCR-wALtNA1NEwrDykscGgTE1nbswwOg=' imgsrc='http://www.discoverthewave.com/content/MCVideo416x337.jpg' width='416' height='337’/>
#68 by Chris - June 4th, 2010 at 08:10
Hi,
I just got FBML working and can now display a YouTube video in its own tab.
In the FBML “Application Settings” there is a tab titled “Additional Permissions” with a checkbox “Publish recent activity to my wall”. Does this mean my FBML YouTube video should appear on my wall? I have the box checked but I don’t see the video on my wall.
Thanks for advise.
Chris
#69 by timware - June 4th, 2010 at 12:24
This option is there only because Static FBML is an application, and even though it doesn’t have this sort of information-sharing functionality, they still have to ask permission. More info on this here.
#70 by jenny - June 11th, 2010 at 05:45
Hello!
I have been searching everywhere (!) for a way to have ‘sample digital files’ on my FB business page. They would be just small 50 second meditation audio files, as is on my website: http://www.createyourday.com.au/audiosamples/
I have checked out some FB applications such as Music Player and they do not work! Do you have any suggestions or know how to use FBML to do this? I would have just a button for ‘play’ and then another link that could go straight to my online store on my website…
#71 by timware - June 11th, 2010 at 06:28
Your audio files will have to be in a format that can be embedded in Static FBML: .swf, .mp3. So convert them, probably to .mp3 files then you can use fb:mp3 tag to embed them, per our tutorial on embedding mp3s in Static FBML.
#72 by Chris - June 15th, 2010 at 17:17
I’ve been having a heck of a time trying to figure out how to get the player to display on my embedded video. It displays an image of the video but not the player and requires a user to click on the image first then the player is displayed. Can you help tell me what I am doing wrong or point me somewhere that might help?
Thanks
<fb:swfswfbgcolor="000000" imgstyle="border-width:20px; border-color:white;"
swfsrc="http://www.youtube.com/v/UuxP0fB5PYw="
imgsrc="http://img.youtube.com/vi/UuxP0fB5PYw/2.jpg" width='400' height='270' />
#73 by timware - June 15th, 2010 at 17:59
As this post clearly explains, a user click is required to load the YouTube video or other Flash object. That’s the rules. Also, your “swfsrc” URL doesn’t go to a video. Obviously, if you can’t access the URL in swfsrc, then nothing’s going to work for you.
#74 by Arnault - June 25th, 2010 at 06:24
Hi there, i’ve been having some hard times finding a way to place my video into the right spot on my page.
‘Cuz with the basic code, once it’s in your FBML tab, it stays on top left. I just can move it with tags, but is there any more precise way to move my youtube video around my mini page ?
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/68Yb_2z7TeY'
imgsrc='http://www.trianon-residences.fr/medias/Photos/barneytrianonfcbk.png'
width='330' height='220' style="position: absolute; width: 367px; height: 304px; top: 40px; left: 372px;" />
When I use this code, the image is at the right spot, but once I click it, the videos appears elsewhere =’(.
It’s a real nightmare ! Could you please help me with that ?
#75 by timware - June 25th, 2010 at 09:09
Your video appears elsewhere because you’ve absolute positioned it but not the activation image (imgsrc). I’d recommend surrounding the <fb:swf> code in a containing DIV and positioning that.
#76 by Arnault - June 28th, 2010 at 06:46
Brillant ! Thank you so much Tim, you just made my day ! It seems so easy now =)
Keep up the good work !
#77 by Arnault - June 28th, 2010 at 08:47
I’m so sorry to bother you again, but i’m facing a new challenge : the box is placed perfectly but I can’t make any links underneath its area.
==> I can put a picture below the first one, but the link of that second picture won’t work !
I’ve tried to put the 2nd image in other Div tags, or tried the “max-height” property for the first one, and it’s the same pb.
It’s like once i’ve created a Div, all the area located bellow the Div doesn’t work properly …
Is there any special trick i’m unaware of ? Thanks again so much.
#78 by Arnault - June 29th, 2010 at 08:24
Actually, the whole thing works with IE … but not with Firefox or Chrome :
http://www.facebook.com/pages/Trianon/131049873586119?v=app_4949752878
#79 by Vas - July 1st, 2010 at 07:44
Hey! Excellent fbml tips! I have successfully embedded a YouTube channel in my facebook page, but can I autoplay the first video using the “&autoplay=1″ at the end of my value string YouTube address?
Thanks again!
#80 by timware - July 1st, 2010 at 09:29
Well, you can certainly try!
#81 by Vas - July 2nd, 2010 at 05:26
Thanks timware, it worked!
#82 by John - July 2nd, 2010 at 16:01
Everything’s good but I have one problem.
I’m trying to reduce the size of the player so I put in different values for the width and height in the correct ratio. However, the strange thing is, my video player is one size and my imgsrc is another. Is there a way to display a width and height separately for the swfsrc and the imgsrc?
#83 by timware - July 2nd, 2010 at 16:44
I don’t think you can have separate dimensions for the video and the activation image. Of course, if anyone knows of a way, I’d love to hear it!
#84 by John - July 3rd, 2010 at 14:49
Got it!
You can just add the styles to the imgstyle:
imgstyle=”height:282px;width:510px;”
#85 by timware - July 3rd, 2010 at 16:27
Great, John! Thanks for sharing this. I’ve added this to the post.
#86 by Alicia - July 23rd, 2010 at 09:37
How can I center the video on my page. I put align center but its not doing anything.
#87 by timware - July 23rd, 2010 at 09:52
As I’ve said before, put the FBML video code (fb:swf or fb:flv) in a DIV and center the DIV.
#88 by Shaun - July 24th, 2010 at 02:50
I really like your work, this website has helped me a lot so far. Thank you.
I am trying to working how to put a opt-in box to the right hand side of a video. The only way I could get the opt-in box on the right hand side was to surround it with div tags so I have the video working fine however I can not get them to site side by side. Is it possible to achieve this?
#89 by timware - July 24th, 2010 at 10:46
It’s all just CSS positioning. Check W3 Schools for CSS help.