We have been asked lots of questions about FBML and developing custom tabs for Facebook Pages. Often they are the same basic questions and we are happy to answer them...But sometimes telling you how to do things is not nearly as effective as showing you!
Here are some videos that show you set-by-step instructions for optimizing your Facebook page and custom FBML tabs with video, music, photos and more:
How to add FBML to your Facebook Page
How to Embed a Flickr Slideshow
How to host and add images to FBML
How to embed MP3s in FBML
How to embed a YouTube video in FBML
Static FBML Code Templates for Sale!
#1 by Steve - May 24th, 2010 at 07:49
Thank you so much for the tutorials. The basics can be easy to start out with but it's a real help to watch the creation occur in front of your very eyes. Great help, thanks!
#2 by Al - May 31st, 2010 at 00:01
I appreciate the generosity of sharing these tutorials. Following your indications, when I save the changes to this following code on my static FBML biz page, nothing appears but a frame with a red x and its image is not showing.
<div align="center">
<img src="http://www.coastaliberoamerica.com/images/tit_pasosiguiente.jpg" width="600" height="80" border="0" alt="paso que sigue" />
</div>
I wonder what has to be corrected. Thanks again for your kind input on this.
#3 by timware - May 31st, 2010 at 14:33
Well, try accessing your image. It's inaccessible.
#4 by Al - June 1st, 2010 at 20:10
Tim, how thoughtful to take your time and share a hint. My page on track,let you know when ready. Txs!
#5 by Derek - June 3rd, 2010 at 12:27
Sorry if this is a repeat post, I hit submit but I'm not sure it went through...
I'm having the same problem that Al mentioned... I've got a fairly simple image link I want displayed in my static FBML but I can't get it to show up. The image worked before, and now doesn't. I moved the image from my own web server over to Photobucket and it still does not work. I reduced the size to 520px wide and still nothing. I've double checked that the image is accessible and it is (when I enter the image link into the address bar the pic comes up fine). Any ideas what I am doing wrong? Here is the current code:
<div align="center"<a href="http://www.ovu.edu" target="_blank"><img src="http://i1032.photobucket.com/albums/a407/dwcole/OVU%20Facebook%20Stuff/AboutOVUHeaderPic_520x154.jpg" width="520" height="154" border="0" alt="Ohio Valley University | Life in the right direction"></a></div>I appreciate any help you can send my way. Thanks!
#6 by timware - June 3rd, 2010 at 12:43
Assuming you closed that opening <div> tag (and you said you did in a follow-up message), then everything else looks fine here. The image URL definitely goes to an image at Photobucket. Have you tried recreating your Static FBML tab? Facebook aggressively caches images and Flash objects, and you might just input a re-save your FBML tab. Or try giving the image a slightly different name and changing your code to reflect that.
#7 by Derek - June 3rd, 2010 at 13:01
Thanks for the quick feedback. I have tried just changing the image name slightly and reconnecting accordingly, and like I said, I changed the image entirely and still no avail. I'm not sure about what all is involved in recreating the tab, but I'll look into that. If you don't mind, how does image caching effect this?
#8 by Derek - June 3rd, 2010 at 13:34
Just tried recreating the tab. Here is where it gets interesting. The image shows up when I first start the process. As soon as I add the newly created FBML box as a tab though, the image becomes a broken link again. If you have any ideas at all I'd appreciate your thoughts. Thanks!
#9 by Niko - June 5th, 2010 at 03:33
Thanks for the post!
I have FBML page on my websites Facebook fan page. It's set as a landing page (as instructed).
FBML page is not shown as the first page when fan visits the FB profile, it is only shown as the first page to those who aren't fans.
I would love to know how can I add FBML page as a landing page for fans also?
#10 by timware - June 5th, 2010 at 13:14
Yes, we'd all love to know that
But it's not currently possible.
#11 by mehran - June 10th, 2010 at 14:21
i have created a page with windows live writer and i have 3 problems
1. image frame is on the page but not the image itself.
2. video doesn't appear at all.
3. the new page doesn't default on the wall page but its there on the tab with other boxes.
could you shad some light on these issues.
Thank you in advance.
#12 by timware - June 10th, 2010 at 14:50
No code, no help.
#13 by Leonardo - June 18th, 2010 at 15:28
Hi, have created a fan site and create a FBML tab. I need show the fan_count of my page in this tab just Pedigree page does it but I cant find de if exist.
Here the example.
http://www.facebook.com/Pedigree?v=app_345186569012
As well when you become fan you see a link to the app (http://apps.facebook.com/pedigreehelpdogs/app.php) , this app load in the same tab, but when I use Click here my browser go to this address leaving the fan page.
#14 by Adriana Murillo - June 22nd, 2010 at 16:37
I have sucessfully pasted the FBML into my facebook page, but when people opens my page and goes itn to the FBML tabs, the picture on it take them to mi photobucket account, I I dont want them to be redirected there. I would like that picture to take them to a more elaborate description of the service or to not take them aniwere at all, but it look horrible that my page goes to photobucket account... do you know how to change this.
This is the HTLM code for one of the pictures.
And this it my business page on Facebook: http://www.facebook.com/profile.php?id=653835729&v=box_3#!/pages/MercaIdeando/132729916754477?ref=ts
PLEASE HELP ME!!!!
#15 by timware - June 22nd, 2010 at 17:49
I can't access your business page URL. Your image URL just goes to your Photobucket account, not to an image. I think you just need to follow instructions more carefully. Photobucket makes it pretty easy to get the URL for any images uploaded there. And, speaking of not following instructions, the bright red text below the comment box asks that you surround any code in <code>...</code> tags which you didn't do so I can't see it at all.
#16 by Abhishek Gupta - June 22nd, 2010 at 23:08
Hello Sir,
I tried to add Static FBML application on my fanpage but when i clicked on Add To page then its not showing any of pages in popup... So please reply me asap what to do.. how i can add static fbml app on my fan page..
#17 by Scott I - June 22nd, 2010 at 23:56
When I use this code from photobucket, it just gives me a LINK to the photo. How do I get the pic to actually show up on the page?
<a href="http://s769.photobucket.com/albums/xx335/sridc2/Inoue%20Chiropractic/?action=view¤t=Profile1.jpg" target="_blank"><img src="http://i769.photobucket.com/albums/xx335/sridc2/Inoue%20Chiropractic/Profile1.jpg" border="0" alt="Dr. Inoue"></a>#18 by timware - June 23rd, 2010 at 08:43
You don't need to surround the <img /> tag with the <a href> </a> tags. You're just linking your image to your image! Your img code looks correct and does point to an image, so if it's not showing up I don't know why.
#19 by Sergey - June 24th, 2010 at 07:07
I looking for video tutorial: How to add FBML to your Facebook Page, but in my account i don't see button 'Edit Page'. Can you help me to find it? Thank you
#20 by timware - June 24th, 2010 at 18:35
If you don't see "Edit Page" your either not an admin of the page or you're not logged in. That link is under the avatar/logo image in the top left.
#21 by Jeff Willis - June 23rd, 2010 at 02:01
I am having the same problem as the person above me.
I tried to add Static FBML application on my fanpage but when i clicked on Add To page then its not showing any of pages in popup… So please reply me asap what to do.. how i can add static fbml app on my fan page..
Read more: http://www.hyperarts.com/blog/facebook-pages-fbml-tutorial-videos/#ixzz0rfI1tQ3b
#22 by Analisa - June 23rd, 2010 at 10:51
Have you checked that the FBML is showing up in the editing interface of your page? After that, you need to activate the tab for it to show up on your page.
#23 by Analisa - June 23rd, 2010 at 11:12
Hello all! Yes, the application Static FBML is currently not working, I am not sure why. You can follow the situation on our Facebook page or on Twitter (use hashtag #FBML).
#24 by Chili - July 6th, 2010 at 03:24
Hi there,
I've got a problem with my first Facebook-App (iframe) and though I wrote it in the Developer-Forum nobody could help me. Perhaps anybody here has a solution.
I just want to inculde some kind of Back-Button which directs the user back to the Facebook-Page-Tab where my app has startet.
So I use the normal HTML way like:
<a href="FacebookPageLink">Back</a>But when I click on it I just get a black/grey page. By clicking this black page I'm directed to the link above. However this is not what I want -.- .
Only when I open the link in another tab I get the result I need...
Does anyone has an idea what I'm doing wrong?
Thanks a lot!!
#25 by timware - July 6th, 2010 at 06:17
If the above code you provided is what you're using, then that's the problem. You need to put in the full URL to your tab. To get that URL, just go to your page and click on the tab, then copy the URL in the browser's address bar and paste it into the "href" value. If you don't understand what I'm talking about, you may be in over your head in trying to code an iFrame canvas application.
#26 by Paige - July 8th, 2010 at 07:27
Hello. Just curious is there anyway if I use the html codes from photobucket to not allow my facebook users to click on the photos and be linked back to my photobucket account?
#27 by Analisa - July 8th, 2010 at 13:36
Hi Paige,
If you grab the HTML code from Photobucket (the "img src" tag) but NOT the link (the "a href" tag) then you won't have a link that takes people back to your account.
Hope that helps,
Analisa
#28 by Paige - July 8th, 2010 at 14:18
Thank you very much for your help! If i use the link "img src" from photobucket that looks like this
[IMG]http://i1010.photobucket.com/albums/af221/fsbank/fbml4-1.jpg[/IMG]
the picture will no longer post on my static fbml tab. Do I need to add something else to it?? Again, I reallllly appreciate your help!
#29 by Paige - July 12th, 2010 at 08:43
Hello. I did figure out what you were talking about above. However, now i have a link on my fbml page that looks like this
"http://s1010.photobucket.com/albums/af221/fsbank/?action=view¤t=lightgreybackground-1.jpg" target="_blank">how do I take this off my fbml page??
I cant thank you enough for all of your help!
#30 by Analisa - July 12th, 2010 at 10:50
Paige, it looks like you don't have complete code there, and you are confusing the img tag with the link tag. There is a closing > but not an opening one (<) and this should be an img src tag, correct?
It will probably be easier if you just watch the video I made specifically about adding images to FBML from photobucket:
http://www.youtube.com/watch?v=jn4kpA3i8no
Hope that helps!
-Analisa
#31 by naqi - July 8th, 2010 at 20:59
Hello,
i have a simple question. I know how to hide content if someone has not "liked" my fan page. And the content will only display after he/she LIKES the fan page.
Is there any other way of hiding content? Let's say i want them to publish something to their wall before showing them more content?
thanks!
#32 by timware - July 9th, 2010 at 11:26
No. That's expressly forbidden by Facebook's Terms of Service and I would strongly advise you not to violate the TOS. Read this blog post: http://www.hyperarts.com/blog/3-step-code-script-require-sharing-invites-fan-page/
#33 by holly stoehner - July 10th, 2010 at 00:09
Thank you so much for all the great tutorials! I can't believe you give this stuff away for free!
#34 by Melvin - July 22nd, 2010 at 07:03
Great Tutorial!
One problem. I followed your instructions but when I click on Static fbml from the more applications section; I don't receive the link that says, "Add to my page". The only option it gives me is, "Add to my page's favorites".
Am I doing something wrong? This is a brand new fan page that I'm trying to set up. I'm looking to add this to my arsenal of services. Please advise.
#35 by timware - July 24th, 2010 at 10:09
Your page has to be associated with your personal profile account. If you're logged in to your personal profile and you're an admin of the page, you should be able to add Static FBML to your page.
#36 by Melvin - July 27th, 2010 at 07:32
Timware:
I appreciate your response. Thank you. I can't believe you guys give this info away for free.
#37 by Stephen - August 2nd, 2010 at 07:32
I am trying to include a small twitter update box on my landing page. Below is a link to my FB landing page. On the right hand side where it says twitter updates is where I would like it to be. So far The code I put there works ofline but does not show updates whe loaded in FB
http://www.facebook.com/pages/manage/?act=36041024#!/pages/Sassy-Golfers/136505266389248
#38 by timware - August 2nd, 2010 at 09:33
As my post on using RSS feeds on Facebook tabs says, you can't embed RSS feeds on Static FBML tabs, only on canvas applications.
#39 by jaye - August 5th, 2010 at 18:44
I am having trouble making a basic link in the FBML box.
Could you tell me simply how to make a link to a webpage?
many thanks
#40 by Analisa - August 6th, 2010 at 10:48
You just want to add a text link?
<a href="yourlinkhere">text link</a>
You can also wrap an image tag in that link tag and make the image into a link.
#41 by lisa d - August 10th, 2010 at 20:49
you rule. thank you so much for all this info. i struggled for a whole day pasting some weird wrong code into a box that turned out empty. believe me, you really helped. xoxo
#42 by Yusuf - August 11th, 2010 at 07:19
Thank you very much for this useful information and I have a question how can I hide content(for e.g coupon) if someone has not "liked" my fan page . And the content will only display after he/she LIKES the fan page.
Is there any way of hiding content, I found this code but it is not working, when I clicked like button nothings is happening
<!--Start: Check if user is fan or not -->
<script>
var q = "SELECT uid FROM page_fan WHERE page_id =" + pageId +" AND uid =" + FB.Facebook.apiClient.get_session().uid;
FB.Facebook.apiClient.fql_query
(q,function(result)
{
if(result.length != 0)
{ $('#printing').css('display','block');}
else
{ $('#printing').css('display','none');}
}
);
FB.Event.subscribe('edge.create', function(href, widget) {
$('#printing').css('display','block');
});
</script>
<!--End Like Button Test -->
<div id="printing" style="display:none">50% off code #: abcAndxyz</div>
fyi, I have put this code in fbml box after
thanks!
#43 by timware - August 11th, 2010 at 19:30
You should read my post on using the show to fans and hide from non-fans code. I don't understand the code you pasted in there!
#44 by Walvin - August 22nd, 2010 at 18:17
EEk! I'm trying to add fbml to my page. I can add it no problem, works fine.... except the left bar won't go away like I keep seeing on everyone elses fbml pages, as well as the one in this video. What in the world am I doing wrong? I even just typed in "second page" and my left bar is still there when you view my page. Any help will be greatly appreciated!
my page: http://www.facebook.com/pages/SafeShine-Headlight-Restoration/102115113175739?v=app_4949752878
it's the "welcome tab". Gah, I'm at my wits end with this one. I'll keep checking this, maybe someone is willing to help.
#45 by timware - August 22nd, 2010 at 19:19
Read this:
http://www.hyperarts.com/blog/facebook-static-fbml-tabs-reduced-520-760-static-fbml/
#46 by Walvin - August 22nd, 2010 at 19:42
Thank you my friend. Interesting how one link can fix 3 days worth of head banging. If I wasn't hopped up on TheraFlu I may have guessed that myself. lol.
Thank you for the help! and super fast response!!