Docs    Facebook    Customizations

Create a custom title in your Facebook posts

This allows you to grab a certain piece of text from your Facebook post and create a title out of it.

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 > Customize > Misc):

.cff-post-text::first-line { 
  font-weight: bold;
  font-size: 22px;
}

 

Use the first paragraph of the post text

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

$('.cff-text').each(function(){
  var textarr = $(this).html().split('<br>'),
  firstline = textarr[0],
  newText = '';
  textarr.shift();

  for (var i = 0; i < textarr.length; i++) {
    newText += '<br>' + textarr[i];
  }
  $(this).html( '<b style="font-size: 22px;">'+firstline+'</b>'+newText.toString() );
});

 

Add markers to your Facebook text to create a custom title

In this example, put your title text within “|” symbols in your Facebook post, as shown below:

| Title text |
Rest of the post text

Then add the snippet below to our plugin’s Custom JavaScript section (Facebook Feed > Customize > Misc):

$('.cff-item').each(function(){
if( $(this).find('.cff-text').length ){
  var $self = $(this),
      test_str = $self.find('.cff-text').html(),
      start_pos = test_str.indexOf('|') + 1,
      end_pos = test_str.indexOf('|',start_pos),
      title_text = test_str.substring(start_pos,end_pos);

  if( title_text.length > 1 ){
    $self.find('.cff-author').after('<h3>' + title_text + '</h3>');
    $self.find('.cff-text').html( $self.find('.cff-text').html().replace("|" + title_text + "|", "") );
  }
}
});

This will then create a title element out of that text.

Technical Support

Still have questions? We are here to help you succeed.

Open a support ticket