Snippet personalizzati

Visualizzare la casella dei commenti a discesa e i primi 4 commenti per impostazione predefinita

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

Aggiungete un bordo al vostro feed

Modificare le dimensioni, lo stile o il colore del bordo.

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

Visualizzare i messaggi in orizzontale

Per le istruzioni su come fare, consultare le FAQ.

Cambiare il carattere del feed di Facebook e utilizzare Google Fonts

Per le istruzioni su come fare, consultare le FAQ.

Cambiare le immagini dei collegamenti in miniatura con un layout a mezza larghezza

Per impostazione predefinita, le immagini associate ai link condivisi vengono visualizzate come miniature, a causa delle loro piccole dimensioni. Questo snippet ne aumenta le dimensioni per adattarle al layout a mezza larghezza.

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

Cambiare le immagini dei link in miniatura con le dimensioni del layout a tutta larghezza

Per impostazione predefinita, le immagini associate ai link condivisi vengono visualizzate come miniature, a causa delle loro dimensioni ridotte. Questo snippet ne aumenta le dimensioni per adattarle al layout a tutta larghezza.

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

Rimuovere la barra di scorrimento ad altezza fissa su mobile

Quando si imposta un'altezza fissa sul feed, viene applicata una barra di scorrimento. È possibile utilizzare il seguente snippet CSS per rimuovere l'altezza fissa sui dispositivi mobili, in modo da non applicare la barra di scorrimento.

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

Aggiungere un'ombra ai messaggi

È possibile utilizzare il seguente snippet per aggiungere un'ombra intorno a ogni 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);
}

È possibile utilizzare il seguente snippet per aggiungere un'ombra quando si passa il mouse sul post:

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

Per informazioni su come modificare i valori degli snippet, fare riferimento a questa pagina.

Creare un layout a griglia con colonne in muratura dai post di Facebook

Per le istruzioni su come fare, consultare le FAQ.

Collegate l'intestazione del feed alla vostra pagina Facebook

Modificare l'URL nello snippet di conseguenza.

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

Rimuove i post di aggiornamento delle foto di copertina

Rimuove i post che contengono il testo "aggiornato la foto di copertina". Questo testo può essere modificato in qualsiasi lingua.

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

Rimuovere una stringa o un hashtag particolare dal testo del post

Se si utilizza un hashtag per filtrare i post (ad esempio: #showonwebsite), è possibile che non si voglia che quell'hashtag venga visualizzato nel feed. È possibile utilizzare il seguente snippet per rimuovere una particolare stringa o 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", "") );
});

Creare un titolo per il post a partire dai primi 50 caratteri del post.

Lo snippet sottostante crea un tag heading 3 per ogni post in base ai primi 50 caratteri del 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>'); });

Aggiungete un pulsante "Pin it" di Pinterest alle foto del vostro feed.

Affinché questo snippet funzioni, è necessario innanzitutto disabilitare la casella di foto a comparsa. È possibile farlo selezionando l'impostazione "Disable Popup Lightbox" nella pagina di personalizzazione del plugin. Aggiungete lo snippet sottostante alla sezione Custom JavaScript del plugin:

$('.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 una presentazione di base dai vostri post su Facebook

Per le istruzioni su come fare, consultare le FAQ.