Loading...

Blog

How to Create a Custom Facebook FBML Slideshow

With slideshows becoming more and more popular in modern web design, the demand for adding them to Facebook’s Static FBML tabs has also risen. Adding a slideshow to your Static FBML tab is an appropriate and interactive solution to displaying multiple images in a nice organized and compact manner. This tutorial will teach you, in just 4 easy steps, how to implement a slideshow on your Static FBML tab using Facebook’s FBML Javascript.

FBML Slideshow

Step 1: Building the FBML Slideshow Container DIV

The first step is to build the actual slider html code; this is all pretty basic css and html, so no big surprises here. Note the use of relative positioning; this is important later when positioning the navigational elements in Step 3.

CSS

.slideshow{ 
width: 440px; 
height: 250px; 
float: left; 
background: #000; 
border: 5px solid #000; 
position: relative; 
overflow: hidden; 
}

HTML

<div class="slideshow">
</div>

Step 2: Adding the FBML Slideshow Images

The second step is another easy step, just add all of the images you want to toggle through for your slideshow. Each image must be put into its own DIV with a unique id name, the id names must be unique in order to correctly toggle through our images in Step 4. Every DIV except for the first initial DIV must have the display none style attribute added in order to initially hide them.

CSS

.slideshow img{ 
display: block; 
border: 0; 
}

HTML

<div class="slideshow">

  <div id="image1">
    <img src="image1.jpg" alt="image1" />
  </div>
  
  <div id="image2" style="display: none;">
    <img src="image2.jpg" alt="image2" />
  </div>

  <div id="image3" style="display: none;">
    <img src="image3.jpg" alt="image3" />
  </div>
          
</div>

Step 3: Adding the FBML Slideshow Navigation

The third step is to add the navigational elements to the slideshow so that users can actually toggle back and forth between the images. We will be adding two buttons; one button to view the previous image and one button to view the next image. Each of the image DIVs created in Step 2 will need to have its own set of buttons added to it. Please note that in our example the buttons are absolutely positioned over top of the slideshow images so make sure you use pngs or transparent gifs.

CSS

.prev, .next{ 
width: 220px;
height: 250px;
position: absolute; 
top: 0; 
z-index: 9;
text-indent: -9000px; 
}
.prev{ 
left: 0; 
background: url(prev.png) no-repeat;
}
.next{ 
right: 0; 
background: url(next.png) no-repeat;
}
.prev a, .next a{ 
width: 220px; 
height: 250px; 
display: block; 
}

HTML

<div class="slideshow">

  <div id="image1">
    <div class="prev"><a href="#">Previous Image</a></div> 
    <div class="next"><a href="#">Next Image</a></div>
    <img src="image1.jpg" alt="image1" />
  </div>
  
  <div id="image2" style="display: none;">
    <div class="prev"><a href="#">Previous Image</a></div> 
    <div class="next"><a href="#">Next Image</a></div>
    <img src="image2.jpg" alt="image2" />
  </div>

  <div id="image3" style="display: none;">
    <div class="prev"><a href="#">Previous Image</a></div> 
    <div class="next"><a href="#">Next Image</a></div>
    <img src="image3.jpg" alt="image3" />
  </div>
          
</div>

Step 4: Making It Work with FBML Javascript

The final step is to make everything work using the FBML Javascript used to show and hide elements. Adding the FBML Javascript is actually pretty simple, it consists of two elements clicktoshow and clicktohide. Each button needs to be setup to show and hide the correct DIV id names that were added in Step 2. After you have added all of the FBML Javascript upload it to your Static FBML tab to test. It’s that simple!

HTML

<div class="slideshow">

  <div id="image1">
    <div class="prev"><a href="#" clicktoshow="image3" clicktohide="image1,image2">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image2" clicktohide="image1,image3">Next Image</a></div>
    <img src="image1.jpg" alt="image1" />
  </div>
  
  <div id="image2" style="display: none;">
    <div class="prev"><a href="#" clicktoshow="image1" clicktohide="image2,image3">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image3" clicktohide="image1,image2">Next Image</a></div>
    <img src="image2.jpg" alt="image2" />
  </div>

  <div id="image3" style="display: none;">
    <div class="prev"><a href="#" clicktoshow="image2" clicktohide="image1,image3">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image1" clicktohide="image2,image3">Next Image</a></div>
    <img src="image3.jpg" alt="image3" />
  </div>
          
</div>

Complete Code

CSS

.slideshow{ 
width: 440px; 
height: 250px; 
float: left; 
background: #000; 
border: 5px solid #000; 
position: relative; 
overflow: hidden; 
}
.slideshow img{ 
display: block; 
border: 0; 
}
.prev, .next{ 
width: 220px;
height: 250px;
position: absolute; 
top: 0; 
z-index: 9;
text-indent: -9000px; 
}
.prev{ 
left: 0; 
background: url(prev.png) no-repeat;
}
.next{ 
right: 0; 
background: url(next.png) no-repeat;
}
.prev a, .next a{ 
width: 220px; 
height: 250px; 
display: block; 
}

HTML

<div class="slideshow">

  <div id="image1">
    <div class="prev"><a href="#" clicktoshow="image3" clicktohide="image1,image2">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image2" clicktohide="image1,image3">Next Image</a></div>
    <img src="image1.jpg" alt="image1" />
  </div>
  
  <div id="image2" style="display: none;">
    <div class="prev"><a href="#" clicktoshow="image1" clicktohide="image2,image3">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image3" clicktohide="image1,image2">Next Image</a></div>
    <img src="image2.jpg" alt="image2" />
  </div>

  <div id="image3" style="display: none;">
    <div class="prev"><a href="#" clicktoshow="image2" clicktohide="image1,image3">Previous Image</a></div> 
    <div class="next"><a href="#" clicktoshow="image1" clicktohide="image2,image3">Next Image</a></div>
    <img src="image3.jpg" alt="image3" />
  </div>
          
</div>

FBML Slideshow DEMO

We have created a LIVE DEMO on one of our Facebook fan page tabs.

Download

Click here to download all the files.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

Leave a Comment

41 comments
Humaira
Humaira

I thought slideshow by fbml is not possible. But now I can say it is possible. Thanks for sharing

baotri
baotri

This article is amazing, thanks for doing this. I had noticed that this was possible from the fan pages of others but hadn’t had the time to find out how FB code worked (if only all social networks used the same code or even plain html!!). Thanks again, saved me loads of time.

Jam
Jam

Hi i don't understand where would i put the code of CSS?

mark shirley
mark shirley

Thanks new to FB design this means I cant use it going forward as FB fan pages are now html?

mark shirley
mark shirley

Isn't this tutorial out of date now facebook isn't using fbml anymore on fanpages. Does anynone know of a link to a current tutorial using the up-to-date code for facebook.

Aned Esquerra
Aned Esquerra

Hello Daddy design, I appreciate your information in blogs, but i have two quesions. Can I use this slideshow in my user page or company page, or is only for fans pages? How do I upload to FB the CSS and HTML codes? Hope you can help me to understand!!! Thanks

Danny
Danny

hahaha sorry for the spanish words lol bottom line to whatever I said is that it is not working for me, either there is something wrong I'm doing or have to do with the Static HTML tab that I'm using or there's really something not right with it. Please help me!

sanal
sanal

Thank you so much DaddyDesign. I really like your slide show FBML. Could you teache us more about multi-tab FBML on Facebook Page? I hope you will help us. Regards Sanal

ruby
ruby

static fbml tabs will be going away as of sometime this month I think. it's too bad because I had just discovered the clicktoshow and clicktohide myself.

Melanie
Melanie

Thanks for this great tutorial, it worked perfectly for me. WIth the new changes to facebook pages and the deprecation of FBML do you have any plans to re-write the tutorial so it will work without FBML? I would love to keep the viewer I created but it doesn't seem to work without the FBML. Thanks!

Aron Standley
Aron Standley

Hey, Thanks for writing the how-to! I have come across a challenge. When I post the code, as written above, the images from my flickr account show up on the page, with the links 'previous image' and 'next image' above the photos. Clicking on the photos goes nowhere, so they're clearly not linked. Clicking on the 'next image' link moves through the photos, but after reaching the end of the photo set, both the text links and the photos disappear. Can you help to fix this?

Shimrit
Shimrit

Hi there, Great tutorial, though I seem to be having a problem showing the previous and next buttons. Facebook seems to be somehow rewriting something and looking for them at the wrong place. Here's what I've got: http://www.facebook.com/pages/DIY-Tel-Aviv-alternative-city-guide/126634280695953?sk=app_4949752878 I've rewritten the paths to point at full url paths for the prev and next images and also tried with the path without the domain. They are definitely the right file names and all uploaded to the same directory on my site as the stylesheet. Any ideas why this could be? Thanks :)

Justin
Justin

How do you enter the code in the fbml edit box? Do you just put the string of html underneath the css?

Busi
Busi

Ok, feel a tad daft... I attempted to add the 4th image this way, but it's not coming up. It doesn't appear as though a 4th image has been added. Previous Image Next Image I've uploaded my images to my server and am referencing the complete URL in the img src. Thanks again for all your help.

Busi
Busi

Thank you, I just altered the placement of the next button and all looks well now! :) Just going to add more images.. This is such an awesome site. Thanks again!

Busi
Busi

Thank you for the awesome slide show! So I put my own png images for the previous and next images in my style sheet and I'm unsure how to drop them to the middle of the page and to either side. They currently appear in the top left area, can you assist. I would like them placed as you do yours on the facebook demo. Thanks for your help.

Dail
Dail

Thank you for this great code! Do you have to use your own prev and next button? Do they need to be uploaded on server and the url to them inserted? Thanks for your help!

Ronald
Ronald

Hello, in the demo, how show with fbml the complete name with the link in the fanpage: Hello ! Thank you for checking out our Custom Facebook FBML Slideshow

Andie
Andie

@hunter Thank you.

hunter
hunter

@Andie, yes you must upload your images somewhere and then add the full image link in order for them to show up.

Andie
Andie

Hi Thanks for the inspiration, been looking for ways to create a facebook page, thanks. Just 1 question, being new to facebook.... Previous Image Next Image how do you get image1.jpg to show? where is it uploaded to? or do you link to images on an external site? Thanks again Andie

Aaron
Aaron

Terrific Post! I am really into social media right now (like everyone else out there!), especially Facebook Marketing and FBML. It can be hard to keep up to date with such a fast changing innovative topic but I manage to do it through the fan page factory and blog posts exactly like yours. Tips and tricks rock. I am trying to learn as much as possible to put myself ahead of the curve. So thank you again! Enjoy! Aaron

daddydesign
daddydesign

@Charles, glad you were able to fix it. This tutorial is set up as a very simple example of how to set up a slideshow inside FBML. If anybody wants to play around with making auto play work, we would love for you to share it here.

Charles
Charles

img src="animal_32.jpg" alt="image1"

Charles
Charles

This is a fantastic tutorial! Would be kind enough to help me please because no photo's are showing? ------------------------ If I add this image url <a href="http://media.bigoo.ws/content/layout/animal/animal_32.jpg" clicktoshow="image1" what would be the? Many Thanks for you'e great blog Kind Regards Charles

daddydesign
daddydesign

Yes this is for FBML, you can find many tutorials on the web which will show how to create a basic slideshow for websites, which would work in facebook iframe tabs as well.

daddydesign
daddydesign

this code is only for fbml coded tabs. not basic html..

daddydesign
daddydesign

Well, it wont be going away if you have the fbml already. Just wont be able to add new fbml tabs. But yes, we agree it is too bad.

daddydesign
daddydesign

Please supply us a link to your fanpage so we can see your issue. Thanks.

daddydesign
daddydesign

You need to either externally link to a css stylesheet or wrap it inside of style tags, however the first option is best since IE has issues with the style tag.

daddydesign
daddydesign

Best practice is to link to an external stylesheet.

daddydesign
daddydesign

For this example we only used 3 images. If you would like more images, then you will have to add it to the html. [code lang="html" wraplines="false"] <div id="image4" style="display: none;"> <div class="prev"><a href="#" clicktoshow="image2" clicktohide="image1,image3" rel="nofollow">Previous Image</a></div> <div class="next"><a href="#" clicktoshow="image1" clicktohide="image2,image3" rel="nofollow">Next Image</a></div> <img src="image4.jpg" alt="image4" /> </div> [/code] and so on...

daddydesign
daddydesign

Hi Busi, as you can see in the code. We made the Next and Prev images the full height of slideshow and both are exactly half the size of slideshow. width: 220px; height: 250px; To help everyone out a little more with this tutorial, we just added a link at bottom of post to download all the files including images. It can be downloaded here: http://dev.daddydesign.com/freebies/FBML_slideshow.zip

daddydesign
daddydesign

@Ronald, add this inside the FBML: fb:userlink uid="loggedinuser" . This will insert the name of the USER. So in our case we did: Hello ! Thank You.....

daddydesign
daddydesign

@aaron, thank you and its our pleasure! Keep checking in as we have 2 more tuts coming out this week that are really good!

Shimrit
Shimrit

I did, though I have removed it now. Let me know if you want to have a look at it and I'll put it back. Thanks.

Lloyd
Lloyd

I tried adding fb:userlink uid=”loggedinuser” into a line of text but it is not working. My line of text looks like this: Welcome NOTE: Click image to go forward Am I missing something? Also, I cant get the prev and next images to show up...any help on that?

Lloyd
Lloyd

Ok I think I got it, I had to change the code to FBML:fb:userlink uid="loggedinuser" /