Snippets personnalisés

Afficher la boîte de commentaires déroulante et les 4 premiers commentaires par défaut

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

Ajouter une bordure à votre flux

Modifiez la taille, le style ou la couleur de votre bordure.

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

Afficher les messages horizontalement

Veuillez vous référer à cette FAQ pour savoir comment procéder.

Modifier la police de votre flux Facebook et utiliser Google Fonts

Veuillez vous référer à cette FAQ pour savoir comment procéder.

Modifier la taille des vignettes des liens pour qu'elles soient en demi-largeur

Par défaut, les images associées aux liens partagés sont affichées sous forme de vignettes en raison de leur petite taille. Ce snippet augmente leur taille pour correspondre à la disposition en demi-largeur.

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

Modifier la taille des vignettes des liens pour qu'elles occupent toute la largeur de l'écran

Par défaut, les images associées aux liens partagés sont affichées sous forme de vignettes en raison de leur petite taille. Ce snippet augmente leur taille pour qu'elles correspondent à la présentation pleine largeur.

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

Supprimer la barre de défilement à hauteur fixe sur mobile

Lorsqu'une hauteur fixe est définie pour le flux, une barre de défilement est appliquée. Vous pouvez utiliser l'extrait CSS suivant pour supprimer la hauteur fixe sur les téléphones portables afin que la barre de défilement ne soit pas appliquée.

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

Ajouter une ombre aux messages

Vous pouvez utiliser l'extrait suivant pour ajouter une ombre autour de chaque article :

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

Vous pouvez utiliser l'extrait suivant pour ajouter une ombre lorsque l'article est survolé :

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

Vous trouverez ici des informations sur la manière de modifier les valeurs de l'extrait.

Créer une grille de colonnes de maçonnerie à partir de vos publications Facebook

Veuillez vous référer à cette FAQ pour savoir comment procéder.

Liez l'en-tête du flux à votre page Facebook

Modifiez l'URL dans l'extrait en conséquence.

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

Supprime les messages de mise à jour de la photo de couverture

Supprime tous les messages contenant le texte "a mis à jour sa photo de couverture". Ce texte peut être modifié dans n'importe quelle langue.

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

Supprimer une chaîne de caractères ou un hashtag particulier du texte du message

Si vous utilisez un hashtag pour filtrer les messages (par exemple : #showonwebsite), il se peut que vous ne souhaitiez pas que ce hashtag apparaisse dans votre flux. Vous pouvez utiliser l'extrait suivant pour supprimer une chaîne de caractères ou un hashtag particulier.

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

Créer un titre d'article à partir des 50 premiers caractères de l'article

L'extrait ci-dessous crée une balise heading 3 pour chaque article en se basant sur les 50 premiers caractères de l'article.

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

Ajouter un bouton Pinterest "Pin it" aux photos de votre fil d'actualité

Pour que ce snippet fonctionne, vous devez d'abord désactiver la boîte à lumière pop-up. Vous pouvez le faire en cochant le paramètre "Disable Popup Lightbox" sur la page Customize du plugin. Ajoutez le snippet ci-dessous à la section Custom JavaScript du 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>');
});

Créez un diaporama de base à partir de vos publications Facebook

Veuillez vous référer à cette FAQ pour savoir comment procéder.