Facebook Generator – Photos by user album - example

Facebook generator

Step 1

Create an application at facebook.
new_app

Step 2

Choose the advanced setup instead of the ones listed.
advanced_setup

Step 3

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

Step 4

Go to Settings, and click on + Add Platform.
add_platform

Step 5

Pick Website.
facebook_platform

Step 6

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

Step 7

Also add a Contact email, and save on it.
contact_email

Step 8

Go to Status & Review, and make it available for the public.
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.
token

Step 10

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

Step 11

Click on START at the Dynamic Slider.
dynamic_slider

Step 12

Choose Facebook: Photos by user album.
photos_by_user_album

Step 13

You can choose the settings of the generator.
fb_generator_settings

  • 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.
fb_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.
facebook_profile_pictures

Step 15

Choose a predefined preset and layout.
preset_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>
</div>
</a>

facebook_slide

Step 16

Save on it, then go to Edit Slider.
edit_slider_button

Step 17

Turn the Autoplay on
manual_slider_autoplay
or choose some Widgets (arrow, bullet, autoplay or thumbnail), so you could slide the slider, and your generator is done.
facebook_slider
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.
refresh_cache