Snippets personalizados

Apresentar a caixa de comentários pendente e os primeiros 4 comentários por defeito

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

Adicionar um contorno ao seu feed

Altere o tamanho, o estilo ou a cor do seu contorno.

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

Exibir mensagens horizontalmente

Consulte esta FAQ para obter instruções sobre como o fazer.

Alterar o tipo de letra do seu feed do Facebook e utilizar o Google Fonts

Consulte esta FAQ para obter instruções sobre como o fazer.

Alterar as imagens de ligação em miniatura para o tamanho do esquema de meia largura

Por predefinição, as imagens associadas aos links partilhados são apresentadas como miniaturas devido ao seu pequeno tamanho. Este snippet aumenta o seu tamanho para corresponder ao layout de meia largura.

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

Alterar as imagens de links em miniatura para o tamanho do layout de largura total

Por predefinição, as imagens associadas aos links partilhados são apresentadas como miniaturas devido ao seu pequeno tamanho. Este snippet aumenta o seu tamanho para corresponder ao layout de largura total.

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

Remover a barra de deslocamento de altura fixa no telemóvel

Ao definir uma altura fixa no feed, é aplicada uma barra de deslocação. Pode utilizar o seguinte snippet CSS para remover a altura fixa no telemóvel, de modo a que a barra de deslocamento não seja aplicada.

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

Adicionar uma sombra às mensagens

Pode utilizar o seguinte snippet para adicionar uma sombra à volta de cada publicação:

#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);
}

Pode utilizar o seguinte excerto para adicionar uma sombra quando se passa o rato por cima da publicação:

#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);
}

Consulte aqui para obter informações sobre como editar os valores do snippet.

Criar um esquema de grelha de colunas de alvenaria a partir das suas publicações do Facebook

Consulte esta FAQ para obter instruções sobre como o fazer.

Ligar o cabeçalho do feed à sua página do Facebook

Altere o URL no snippet em conformidade.

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

Remove publicações de atualização de fotografias de capa

Remove todas as mensagens que contenham o texto "actualizaram a fotografia de capa". Este texto pode ser alterado para qualquer idioma.

$( "#cff .cff-item:contains('actualizaram a sua fotografia de capa')" ).remove();

Remover uma determinada cadeia de caracteres ou hashtag do texto da publicação

Se estiver a utilizar um hashtag para filtrar mensagens (por exemplo: #showonwebsite), pode não querer que esse hashtag apareça no seu feed. Pode utilizar o seguinte snippet para remover uma determinada cadeia de caracteres ou 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", "") );
});

Criar um título de publicação com os primeiros 50 caracteres da publicação

O snippet abaixo cria uma etiqueta de cabeçalho 3 para cada publicação com base nos primeiros 50 caracteres da publicação.

$('#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>'); });

Adicionar um botão "Pin it" do Pinterest às fotografias no seu feed

Para que este snippet funcione, primeiro tem de desativar a caixa de luz pop-up para fotografias. Para isso, marque a configuração "Disable Popup Lightbox" (Desativar caixa de luz pop-up ) na página Personalizar do plug-in. Adicione o snippet abaixo à secção JavaScript personalizado do plug-in:

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

Criar uma apresentação de diapositivos básica a partir das suas publicações do Facebook

Consulte esta FAQ para obter instruções sobre como o fazer.