Custom Snippets

Display the drop down comments box and first 4 comments by default

#cff .cff-comments-box{ display: block; }

Add a border to your feed

Change the size, style or color of your border.

#cff{
  border: 1px solid #000;
}

Display posts horizontally

Please refer to this FAQ for directions on how to do this.

Changing the font in your Facebook feed & using Google Fonts

Please refer to this FAQ for directions on how to do this.

Change thumbnail link images to half-width layout size

By default the images associated with shared links are displayed as thumbnails due to their small size. This snippet increases their size to match the half-width layout.

#cff .cff-link {
  width: 50%;
  max-width: none;
}
#cff .cff-link img {
  max-width: none;
  width: 100%;
}
#cff .cff-text-link {
  width: 47%;
}

Change thumbnail link images to full-width layout size

By default the images associated with shared links are displayed as thumbnails due to their small size. This snippet increases their size to match the full-width layout.

#cff .cff-link {
  width: 100%;
  max-width: none;
}
#cff .cff-link img {
  max-width: none;
  width: 100%;
}
#cff .cff-text-link {
  width: 100%;
}

Remove the fixed height scroll bar on mobile

When setting a fixed height on the feed a scroll bar is applied. You can use the following CSS snippet to remove the fixed height on mobile so that the scroll bar is not applied.

@media all and (max-width: 480px){
  #cff{ height: auto !important; }
}

Add a shadow to the posts

You can use the following snippet to add a shadow around each post:

#cff .cff-item {
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

You can use the following snippet to add a shadow when the post is hovered on:

#cff .cff-item:hover {
box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px 10px rgba(0,0,0,0.5);
}

Refer here for information on how to edit the snippet values.

Creating a Masonry columns grid layout from your Facebook posts

Please refer to this FAQ for directions on how to do this.

Link the feed header to your Facebook page

Change the URL in the snippet accordingly.

$('.cff-header').css('cursor', 'pointer').click(function(){
  window.open('https://facebook.com/smashballoon', '_blank');
});

Removes cover photo update posts

Removes any posts which contain the text ‘updated their cover photo’. This text can be changed to any language.

$( "#cff .cff-item:contains('updated their cover photo')" ).remove();

Remove a particular string or hashtag from the post text

If you’re using a hashtag to filter posts (eg: #showonwebsite) then you may not want that hashtag to show up in your feed. You can use the following snippet to remove a particular string or hashtag.

$('#cff .cff-item').each(function(){
  var $self = $(this),
    str = $self.find('.cff-text').html();
  
  if( typeof str !== 'undefined' ) $self.find('.cff-text').html( str.replace("#myhashtag", "") );
});

Create a post title from the first 50 characters of the post

The snippet below creates a heading 3 tag for each post based on the first 50 characters of the post.

$('#cff .cff-item').each(function(){
  var $self = $(this),
  posttext = $self.find('.cff-text').text(),
  elips = '...';

  if(posttext.length < 50) elips = '';
  $self.prepend('<h3 style="margin-bottom: 20px;">' + posttext.substr(0,50) + elips + '</h3>'); });

Add a Pinterest “Pin it” button to photos in your feed

In order for this snippet to work you’ll first have to disable the pop-up photo lightbox. You can do this by checking the “Disable Popup Lightbox” setting on the plugin’s Customize page. Add the snippet below to the plugin’s Custom JavaScript section:

$('.cff-item').each(function(){
	var $cffItem = $(this),
		$cffPhoto = $cffItem.find('.cff-photo');

	$cffPhoto.prepend('<a href="https://www.pinterest.com/pin/create/button/?url=' + $cffPhoto.attr('href') + '&media=' + $cffPhoto.find('img').attr('src') + '&description=' + $cffItem.find('.cff-text').text() + '" data-pin-do="buttonPin" data-pin-config="above" style="position: absolute; top: 10px; left: 10px; z-index: 999;" target="_blank" title="Pin it"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>');
});

Create a basic slideshow from your Facebook posts

Please refer to this FAQ for directions on how to do this.