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.