Benutzerdefinierte Snippets

Anzeige des Dropdown-Kommentarfelds und der ersten 4 Kommentare als Standard

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

Fügen Sie einen Rahmen zu Ihrem Feed hinzu

Ändern Sie die Größe, den Stil oder die Farbe Ihres Rahmens.

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

Beiträge horizontal anzeigen

Eine Anleitung dazu finden Sie in dieser FAQ.

Ändern der Schriftart in Ihrem Facebook-Feed und Verwendung von Google Fonts

Eine Anleitung dazu finden Sie in dieser FAQ.

Ändern Sie die Größe der Miniatur-Link-Bilder auf die halbe Breite des Layouts

Standardmäßig werden die mit gemeinsamen Links verbundenen Bilder aufgrund ihrer geringen Größe als Miniaturbilder angezeigt. Dieses Snippet vergrößert sie so, dass sie dem halbbreiten Layout entsprechen.

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

Ändern Sie die Größe der Miniatur-Link-Bilder auf die volle Breite des Layouts

Standardmäßig werden die mit freigegebenen Links verbundenen Bilder aufgrund ihrer geringen Größe als Miniaturbilder angezeigt. Dieses Snippet vergrößert sie, damit sie dem Layout in voller Breite entsprechen.

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

Entfernen Sie die Bildlaufleiste mit fester Höhe auf dem Handy

Wenn Sie eine feste Höhe für den Feed festlegen, wird eine Bildlaufleiste angewendet. Sie können das folgende CSS-Snippet verwenden, um die feste Höhe auf Mobilgeräten zu entfernen, so dass die Bildlaufleiste nicht angewendet wird.

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

Hinzufügen eines Schattens zu den Pfosten

Sie können das folgende Snippet verwenden, um einen Schatten um jeden Beitrag hinzuzufügen:

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

Sie können das folgende Snippet verwenden, um einen Schatten hinzuzufügen, wenn der Mauszeiger über den Beitrag bewegt wird:

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

Wie Sie die Snippet-Werte bearbeiten können, erfahren Sie hier.

Erstellen eines Masonry-Spalten-Gitter-Layouts aus Ihren Facebook-Posts

Eine Anleitung dazu finden Sie in dieser FAQ.

Verlinken Sie die Kopfzeile des Feeds mit Ihrer Facebook-Seite

Ändern Sie die URL im Snippet entsprechend.

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

Entfernt Cover-Foto-Update-Beiträge

Entfernt alle Beiträge, die den Text "Ihr Titelbild aktualisiert" enthalten. Dieser Text kann in eine beliebige Sprache geändert werden.

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

Entfernen einer bestimmten Zeichenfolge oder eines Hashtags aus dem Beitragstext

Wenn Sie einen Hashtag zum Filtern von Beiträgen verwenden (z. B. #showonwebsite), möchten Sie vielleicht nicht, dass dieser Hashtag in Ihrem Feed angezeigt wird. Sie können das folgende Snippet verwenden, um eine bestimmte Zeichenfolge oder einen Hashtag zu entfernen.

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

Erstellen Sie einen Beitragstitel aus den ersten 50 Zeichen des Beitrags

Das nachstehende Snippet erstellt für jeden Beitrag ein Überschrift-3-Tag, das auf den ersten 50 Zeichen des Beitrags basiert.

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

Hinzufügen einer Pinterest-Schaltfläche "Anheften" zu Fotos in Ihrem Feed

Damit dieses Snippet funktioniert, müssen Sie zunächst die Popup-Lightbox für Fotos deaktivieren. Sie können dies tun, indem Sie die Einstellung "Disable Popup Lightbox" auf der Seite Customize des Plugins aktivieren. Fügen Sie das folgende Snippet in den Abschnitt "Custom JavaScript" des Plugins ein:

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

Erstellen Sie eine einfache Diashow aus Ihren Facebook-Posts

Eine Anleitung dazu finden Sie in dieser FAQ.