Snippets

Add captions text to Photos grid layout

To add caption text below each photo in your Photos grid feed simply add the following to the plugin’s Custom JavaScript section:

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 Plugin: Add these snippets to your website’s […]

Create a “pinned post” in your Custom Facebook Feed

Pin a post to the top of your Facebook feed using this handy code snippet.

Display Message if No Events are Scheduled

The plugin is not able to remove widgets on your site if there are no events scheduled but it can be customized to display a message

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 you can add an invite link to the bottom of your events which will link users to the event on Facebook and allow them to invite other people from there. Just add the following to the plugin’s Custom JavaScript section (Customize > Misc > Custom JavaScript):

Insert your own content every X number of posts

Add ads or content in between your Facebook posts.

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

Create a “3D” effect on the post box when the visitor hovers over it with the mouse.

Change the Share Tool Tip Box

Change the background color, icon color, or icon color on hover.

Change Background Colors and Opacity

The plugin does not have a setting for background opacity so you would need to clear the background color option and use this code.

Center the Like Box

The likebox is floated to the left of the page by default. It can be centered with this CSS:
.cff-likebox { text-align: center; }
.cff-likebox .fb_iframe_widget { width: 500px !important; float:none; }

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{ float: none; }

Change the Header Text and Author Icon

Snippets to center the text, center the author icon, hide the text, or hide the author icon.

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 […]

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 can manually change the […]

Creating a Masonry grid layout from your Facebook posts

If you’re using the Pro version of the Custom Facebook Feed WordPress plugin then you can use our Masonry Columns extension to display your Facebook posts in a Masonry grid […]

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 on a site though and each one […]

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 top just add the following to the plugin’s Custom JavaScript section:

Styling Facebook posts by different authors

If multiple people are posting to your Facebook page or group, or if you’re using our Multifeed extension to display posts from multiple different Facebook pages in one single feed, […]

Display video grids in 16:9 format

By default videos in a Videos-only grid are displayed as square. Add this snippet to the plugin’s Custom JavaScript section (Customize > Misc > Custom JavaScript) to display them in a 16:9 format.

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 below. First, go to […]