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 your preferred custom CSS location or stylesheet. One option is the default additional CSS location found at WordPress Dashboard > Appearance > Customize > Additional CSS.

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

Use the first paragraph of the post text

Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

$('.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 following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

$('.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.

Couldn’t find your answer in the docs?

Contact Support