Facebook Generator – Photos by user album - example

Facebook generator

Step 1

Create an application at facebook.

Step 2

Choose the advanced setup instead of the ones listed.

Step 3

Give your APP a Display Name, choose a Category, click on Create App ID and pass the security check.

Step 4

Go to Settings, and click on + Add Platform.

Step 5

Pick Website.

Step 6

Write the website’s URL, where you want to use the facebook application into the Site URL.

Step 7

Also add a Contact email, and save on it.

Step 8

Go to Status & Review, and make it available for the public.

Step 9

Go back to the Settings, and copy the App ID, and the App Secret (click on Show), and put them into your Smart Slider’s Settings -> Facebook generator, then click on Request token.

Step 10

Press Okay to let your website use this application, and Save on the Settings

Step 11

Click on START at the Dynamic Slider.

Step 12

Choose Facebook: Photos by user album.

Step 13

You can choose the settings of the generator.

  • Slider name: the name of the slider
  • Slider size: the size of the slider, the canvas size only matters, if you want to change your slider type to accordion
  • Slides: the number of slides
  • Create real slides: you will see the slides in the backend

You will be able to change these settings, and see the advanced options when you are done, if you will click on Generator -> Settings.

  • Cache expiration: the slider will refresh the cache in every day if you leave it on 24 hours, and the new photos will appear, when this cache is refreshed
  • Slides: the number of slides
  • Create slides: you will see the slides in the backend with the variables
  • Static slides: if the create slides is turned on too, then the slides will appear in the backend with the contents, not the variables
  • Group result: you can get more variables if you put here a bigger number, and you can put more photos into one slide, not just 1 (if you change this, then save on the slider, and you will be able to see the other variables too)

Step 14

Choose the Album from where you want to show the images.

Step 15

Choose a predefined preset and layout.
You will be able to create your own, when you are done, just click on Generator -> Edit Layout, and use the variables. For this example I picked 2 as a group result, so I can show two photos with their datas in one slide. I put {|description-1|} into one heading item, {|description-2|} into an other, gave {|image1-1|} to the first image’s url, and {|image1-2|} to the second, because this is the original size of the images, and not some smaller one. Just to make it interesting, I put the {|link-1|} and the {|link-2|} into the special items html code, so you can see, that these variables can be used in almost every place, so these will link to the facebook pages of the photos. I used it by creating a link over the item, and it looks like this on the first pin:

<a href="{|link-1|}">
<div class="pin">
  <div class="circle"></div>
  <div class="innercircle"></div>
  <div class="aura"></div>


Step 16

Save on it, then go to Edit Slider.

Step 17

Turn the Autoplay on
or choose some Widgets (arrow, bullet, autoplay or thumbnail), so you could slide the slider, and your generator is done.
You can still modify your layout, but you might need to click on Refresh cache when you are done. You can also click on this option, if you want to see the new photos before the given time at the Cache expiration.