Using Custom JavaScript code in our plugins

To use Custom JavaScript snippets in our plugins, we recommend using the following approach: 1. Install the Insert Headers and Footers plugin by...

Moving Custom JavaScript code out of our plugins

The Custom JavaScript field has been deprecated in our plugins. To continue using Custom JavaScript snippets, we recommend using the following appr...

Specifying exact image sizes using the cff_resized_image_sizes filter

As Facebook only provides large image sizes in their API for timeline feeds then it often results in images being displayed in your feed which are ...

Link to the Facebook Page of Group after loading posts X number of times

First, add a class to the feed that you want to apply this to: [custom-facebook-feed class="cff-limit-clicks"] Then add the following JavaScr...

Change text of Facebook post Call-To-Action buttons

By default, the plugin uses the text provided by the Facebook API, but this can be changed by adding the following JavaScript to your site. This ca...

Changing the size of the Facebook author avatar

The standard size of the Facebook author avatar is 40px but this can be increased by using the following snippets. Add the following JavaScript ...

Add dates to Photo, Video, and Album feeds

You can use this snippet to add dates below the posts in your Photo, Album, and Video grid feeds. Photo Feeds Add the following JavaScript to you...

Create a custom title in your Facebook posts

There are a few ways to do this: Use the first line of the post text Add the following to your preferred custom CSS location or stylesheet. One o...

Add captions text to Photos grid layout

To add caption text below each photo in your Photos grid feed, add the following JavaScript to your site. This can be done manually using a custom ...

Can I display my Facebook posts horizontally or in multiple columns?

There is now a built-in setting to create a multi-column masonry layout for your feed. Just use the setting in the following location: Facebook Fee...

Custom Snippets

CSS WordPress Plugin: Copy and paste these to your preferred custom CSS location or stylesheet. One option is the default additional CSS location ...

Create a “pinned post” in your Custom Facebook Feed

The Facebook API doesn't include whether or not a post is pinned, however you can achieve the same result by manually moving a post to the top of y...

Display Posts Based on Shares and/or Likes

Javascript: $('#cff .cff-item').each(function(){ $self = $(this); var likes = parseInt($self.find('.cff-likes .cff-count').text()), s...

Set Height and/or Width of Each Image Cropped and Centered

1) Set a static height with a fluid width for each image: Custom CSS: Add this to your preferred custom CSS location or stylesheet. One option is...

Remove a particular string or hashtag from the post text

Just add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documen...

Add an "Invite" link to the bottom of your events

Due to Facebook API limitations it's not possible to add the actual functionality of the Invite button which you see on Facebook in your event, but...

Use full size images in Facebook Photo grid feed

By default, the plugin uses a medium sized image in the photo feed grid layout to help with performance, and then displays the full size image in t...

How to only display the Like Box by itself

The Facebook "Like Box" widget can be optionally included in your feed, but if you'd like to only display the Like Box and not any posts then you c...

Reverse the order of comments beneath your Facebook posts

You can reverse the order of the comments beneath your Facebook posts by adding the following JavaScript to your site. This can be done manually us...

Only show events from the next 30 days

Add this JavaScript to your site to only show events from the next 30 days. This can be done manually using a custom JavaScript plugin. For further...

Add Facebook event details to the lightbox

First, make all of the event details visible in the feed by ensuring the following setting is enabled: Facebook Feed > Customize > Post Layou...

Displaying a stacked event date format

There are two different formats you can achieve; just the date and the month, or the entire date. See below for directions for each:   Dis...

Change the size of the Load More button

#cff .cff-load-more{ float: none; position: relative; width: 105px; margin: 10px auto; top: 10px; }

Reversing the order of items in a photo, video, or album feed

Use this snippet to reverse the order of visible items in a photos, videos, or albums feed. Add the following JavaScript to your site. This can ...

Insert your own content every X number of posts

var number_of_posts = 5, content_to_add = 'Add content here', i = 1; $('#cff .cff-item').each(function(){ if( i % number_of_posts == ...

Change Border Color Around Post Box on Hover (3D Effect)

CSS: This snippet creates a 5px black border around the Post. #cff .cff-item.cff-box { box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); -moz-box-shadow: ...

Change the Share Tool Tip Box

CSS: Background color:#cff .cff-share-tooltip{ background: yellow; } Icon color:#cff .cff-share-tooltip a { color: red !important;} Icon color o...

Change Background Colors and Opacity

You need to use a CSS snippet instead of using the built in color setting. You can use the color picker tool here to create a color. Then copy and...

Center the Like Box

1) Set the width of the Like Box to be 500 in the following location: Facebook Feed > Customize > General > Like Box / Page Plugin > Custom Like Bo...

Center the Entire Feed on the Page

The feed is floated to the left and stretched across it's containing element by default. You can center the entire feed with the following CSS:#cff...

Change the Header Text and Author Icon

CSS: This will center the author icon and hide the text in the header:#cff .cff-header .fa{ float: none; }#cff .cff-header span{ display: none; } ...

Display an icon when hovering over a photo or video

To display an icon when hovering over a photo or video, add the following CSS to your preferred custom CSS location or stylesheet. One option is th...

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 ou...

Changing the font in your Facebook feed & using Google Fonts

The plugin is designed to naturally inherit the font that's used on your website or WordPress theme so that it fits seamlessly into your site. You ...

Creating a Masonry grid layout from your Facebook posts

If using v3.8+ of the Pro plugin and v2.11 of the free plugin, then there is a built-in setting to create a multi-column masonry layout for your fe...

Change Dates to Relative "Time Ago" Time

if (!Date.now) { Date.now = function() { return new Date().getTime(); } } var sbiDateIcon = '<svg class="svg-inline--fa fa-clock fa-w-16...

Translate the months of the date using JavaScript

In the WordPress plugin the date will be displayed in whichever language your WordPress installation is in. Sometimes you may have multiple feeds o...

Move shared links to display at the top of the Facebook post

By default the link boxes which are displayed when you share a link on Facebook are displayed at the bottom of the post. To display these at the to...

Styling Facebook posts by different authors

If multiple people are posting to your Facebook page or if you're using our Multifeed extension to display posts from multiple different Facebook p...

Display video grids in 16:9 format

By default videos in a Videos-only grid are displayed as square. Add the following JavaScript to your site to display them in a 16:9 format. This c...

Change the layout of shared link posts to match photo/video posts

By default the shared link posts have a different layout to photo and video posts, but you can change this to match by following the directions bel...

Change your Facebook profile image/avatar

Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentatio...

Creating a dynamic Like Box

Add a Like Box for the author of the first post shown in the feed 1) First add a class to your feed by adding the following to the shortcode cla...