Facebook Fan Page Manual

Advanced: Creating Custom Facebook Tab with Sliding Billboard

In this tutorial we will show you how to use Sliding Billboard in your Facebook Custom Tab/App with the help of Facebook Fan Page.

*You can also check out the video.

How to do it

1. For this tutorial we'll use Sliding Billboard in order to show images of our products to our Page fans. Click the Facebook Fan Page to open the user interface window. 
   
   

2. In the Facebook Fan Page window add your App ID/API Key, your App Secret (2) and choose Local Test (3). Click the OK button when you're done.
   
   

3. Now we're going to insert the Sliding Billboard on our page. Click shte Sliding Billboard extension icon.
   
   

4. Import a whole folder of images (1) and click the Advanced tab in order to customize the Sliding Billboard (2).
   
   

5. Note that if your content width is more than 520px you'll have scrollbars in Facebook. For our Sliding Billboard we set 510px width and 300px height. You can also customize the layout and the animation if you want. When you're done, click the OK button.

6. Click on the Sliding Billboard (1) so you can make it visible only to your Facebook page fans. Open the Facebook Fan Page dropdown menu (2) and select Show if User is a Fan menu item (3).

7. For our non fan page users we'll include a simple image. Go to Dreamweaver Insert menu and select the image menu item.

8. Select the image and click OK.

9. In order to make it visible only to non fans, click the image (1), open the Facebook Fan Page menu (2) and select Show if User is Not a Fan menu item (3).

*Note: Do not forget to switch the Run mode to: Online on Facebook upon saving, when you include the page in your Custom tab on Facebook.