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 this to the plugin's...

Change text of Facebook post Call-To-Action buttons

$('.cff-cta-link a').each(function(){ if( $(this).text() == 'Book Travel' ) $(this).text('Book Now'); }); This will change the button text "Bo...

Changing the size of the Facebook author avatar

Add this to the plugin's Custom JavaScript section (Facebook Feed > Customize > Misc): $('.cff-author-img img').each(function(){ $(this)....

Add dates to Photo, Video, and Album feeds

Photo Feeds Add the following to the plugin's "Custom JavaScript" section, which can be found under Customize > Misc in the settings: function...

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 the plugin's Custom CSS section (Facebook Feed > Cus...

Add captions text to Photos grid layout

setTimeout(function(){ $('.cff-album-item').each(function(){ $self = $(this); $self.append( '<p style="padding:5px;height:100px;overflow:hidd...

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 into the Custom CSS section, found under the Misc tab on the plugin's Customize page. Standalone Plugi...

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: Add the following to the relevant custom code sections in the following location: Facebo...

Remove a particular string or hashtag from the post text

Just add the following to the plugin's "Custom JavaScript" section (Facebook Feed > Customize > Misc): $('#cff .cff-item').each(function(){ ...

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

$('#cff .cff-event').each(function(){ $self = $(this); $self.find('.cff-post-links').prepend('<a class="cff-viewpost" href="'+$self.find('...

Use full size images in Facebook Photo grid feed

Just add this to the plugin's "Custom JavaScript" section, which can be found at Facebook Feed > Customize > Misc. setTimeout(function(){ $...

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

$('.cff-item').each(function(){ var $list = $(this).find('.cff-comments-wrap'); var $listItems = $list.children('.cff-comment'); $list.app...

Only show events from the next 30 days

setTimeout(function(){ $('.cff-event').each(function(){ var $event = $(this), event_date = $event.find('.cff-date > .cff-start-date k...

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

Add the following to the plugin's Custom JavaScript section (Facebook Feed > Customize > Misc): var postsWrap = $('.cff-posts-wrap'); var items...

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

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

#cff .cff-photo-hover .fa{ display: block; } You can change the icon to be any icon listed here. To change the icon, simply add the following to...

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

$('.cff-item').each(function(){ $(this).prepend( $(this).find('.cff-shared-link') ); });

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

$('.cff-album-item .cff-video').each(function(){ $(this).add( $(this).find('.cff-lightbox-link') ).css('height', $(this).innerWidth()/(16/9) ); });

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

$('#cff .cff-author-img img').attr('src', 'http://path-to-your-image.jpg');

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