Docs    Facebook    Customizations

Creating a slideshow, slider, or carousel from your Facebook posts

If you’re using the Pro version of the Custom Facebook Feed WordPress plugin then you can use our Carousel extension to create sliding carousels out of your Facebook content.

If you’re using the free WordPress plugin, or the PHP Standalone version, then it’s possible to achieve a basic slideshow by doing the following:

————

1) Add a class to the shortcode of the feed that you want to convert into a slideshow:

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
Smash Balloon
3 months ago
Smash Balloon

Is your Facebook Business Page feeling a little... quiet? Don't worry, it happens to the best of us!

The good news? There are tons of ways to turn your page into a vibrant online community and attract tons of Likes and engagement!

Here are a couple of quick tips to get you started:

❇️ Craft a Memorable URL: Ditch the generic page name. Choose something catchy and easy to remember, so people can find you with ease!

❇️ Website Integration is Your BFF: Don't let your website visitors slip away! Integrate your Facebook Page seamlessly, so they can Like and follow you in just one click.

Our video dives deep with even more effective strategies! ⤵️ ... See MoreSee Less

Video image
View on Facebook
· Share
Share on Facebook Share on Twitter Share on Linked In Share by Email
View Comments
  • likes 1
  • Shares: 0
  • Comments: 1

1 CommentComment on Facebook

You do yourselves a huge disservice by constantly forcing your ad banner on the dashboards of users of your free version.

Load more

2) Set the number of posts to display to be the number of posts you want to include in the slideshow (10 for example). You can do this by using the ‘num’ shortcode option:

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
Smash Balloon
3 months ago
Smash Balloon

Is your Facebook Business Page feeling a little... quiet? Don't worry, it happens to the best of us!

The good news? There are tons of ways to turn your page into a vibrant online community and attract tons of Likes and engagement!

Here are a couple of quick tips to get you started:

❇️ Craft a Memorable URL: Ditch the generic page name. Choose something catchy and easy to remember, so people can find you with ease!

❇️ Website Integration is Your BFF: Don't let your website visitors slip away! Integrate your Facebook Page seamlessly, so they can Like and follow you in just one click.

Our video dives deep with even more effective strategies! ⤵️ ... See MoreSee Less

Video image
View on Facebook
· Share
Share on Facebook Share on Twitter Share on Linked In Share by Email
View Comments
  • likes 1
  • Shares: 0
  • Comments: 1

1 CommentComment on Facebook

You do yourselves a huge disservice by constantly forcing your ad banner on the dashboards of users of your free version.

Load more

3) Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here. Please note, if you change the class option in the shortcode above to be anything but “slideshow” then make sure to change that on the first line of the snippet below:

var shortcodeClass = 'slideshow',
    cffSpeed = 5000, 
    $cff = $('#cff.'+ shortcodeClass);
    $cffItem = $cff.find('.cff-item'),
    cffNum = $cffItem.length,
    cffCur = 0;
$cffItem.hide();
setTimeout(function(){ $cff.find('.cff-item').eq(0).show(); }, 200);
setInterval(function(){
    $cff.find('.cff-item').eq(cffCur).fadeOut( "fast", function() {
        if( cffCur == cffNum-1 ) cffCur = -1;
        cffCur++;
        $cff.find('.cff-item').eq(cffCur).fadeIn();
    });
}, cffSpeed);

4) You can change the speed of the transition by editing the cffSpeed = 5000 value at the top of the snippet. 5000 is equal to 5 seconds (5000ms).

support

Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?

Categories