Masonry Columns Extension


The Masonry Columns extension allows you to create a masonry style feed for your Facebook posts.

Below is an example of using the Masonry Columns extension.

Screenshot of the Masonry extension for the Custom Facebook Feed plugin

Shortcode used above:

[custom-facebook-feed masonry="true" masonrycols=3]

See the How to use tab above for directions on how to use the extension.

How to use


Extensions are installed just like any other WordPress plugin. You can follow the same process used when uploading and installing the Custom Facebook Feed Pro plugin.

Choose CSS or JavaScript versions

There is an additional option in the Masonry Columns settings area to choose how the feed is displayed. By default, CSS columns are used to create the feed with a fallback to JavaScript for older browsers. You can choose to use the JavaScript version only by checking the box.

The default CSS layout method displays the post order like this:

1  4  7
2  5  8
3  6  9

And the JavaScript method displays the post order like this:

1  2  3
4  5  6
7  8  9

Creating a “Boxed” Style

To create a “box” style layout to your posts (as shown in the example on the Overview tab) there are two options:

1) Simply add a background color to the posts by using the “Background Color” setting. This can be found at: Facebook Feed > Customize > Style Posts > Post Item, or by using the following shortcode setting: postbgcolor="f9f9f9". Adding a background color will automatically add padding and spacing to the posts.

2) Add the following to our plugin’s Custom CSS section (Facebook Feed > Customize > Misc):

#cff.cff-masonry .cff-item{
  padding: 20px !important;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #f9f9f9;


The Masonry Columns extension allows you set several options for displaying our feed on the “Post Layout” tab on the Settings page or directly in the shortcode:

[custom-facebook-feed masonry=true masonrycols=3 masonrymobilecols=2]

Shortcode Options

Name Attribute Options Description Example
Masonry Feed masonry true
Whether or not to apply the masonry columns style to this feed masonry=true
Number of columns masonrycols 2-6 The number of columns for the feed for desktop masonrycols=3
Number of columns for mobile masonrymobilecols 1-2 The number of columns for the feed on mobile displays masonrymobilecols=2

Change Log

= 1.1.3 =
* Fix: When the page was resized down and then back up again the Masonry layout wasn’t correctly reapplied when using the “JavaScript” method

= 1.1.2 =
* Fix: Fixed a Firefox display issue

= 1.1.1 =
* Tweak: Updated the plugin updater script to reduce requests on the WordPress Plugins page

= 1.1 =
* New: Includes support for loading more posts (requires version 3.0 of the Custom Facebook Feed Pro plugin)
* New: Added 2 column option for desktop

= 1.0.3 =
* Fix: Fixed an issue with the CSS layout method not displaying the feed in columns in the latest update of the Firefox browser due to a deprecated CSS property

= 1.0.2 =
* Fix: Fixed an issue with column padding when using the JavaScript layout option
* Fix: Fixed an issue when trying to display the Credit link at the bottom of your feed

= 1.0.1 =
* Fix: Fixed an issue with the layout in some web browsers

= 1.0 =
* Launched the Masonry Columns extension