Fragmentos personalizados

Mostrar el cuadro desplegable de comentarios y los 4 primeros comentarios por defecto

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

Añade un borde a tu feed

Cambia el tamaño, el estilo o el color del borde.

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

Mostrar entradas horizontalmente

Consulte las FAQ para saber cómo hacerlo.

Cambiar el tipo de letra de tu feed de Facebook y utilizar Google Fonts

Consulte las FAQ para saber cómo hacerlo.

Cambiar el tamaño de las imágenes de los enlaces en miniatura a media anchura

Por defecto, las imágenes asociadas a enlaces compartidos se muestran como miniaturas debido a su pequeño tamaño. Este fragmento aumenta su tamaño para ajustarse al diseño de media anchura.

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

Cambiar el tamaño de las imágenes de los enlaces en miniatura a tamaño completo

Por defecto, las imágenes asociadas a enlaces compartidos se muestran como miniaturas debido a su pequeño tamaño. Este fragmento aumenta su tamaño para ajustarse al diseño de ancho completo.

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

Eliminar la barra de desplazamiento de altura fija en móviles

Al establecer una altura fija en el feed se aplica una barra de desplazamiento. Puede utilizar el siguiente fragmento CSS para eliminar la altura fija en móviles y que no se aplique la barra de desplazamiento.

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

Añadir una sombra a los postes

Puede utilizar el siguiente fragmento para añadir una sombra alrededor de cada entrada:

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

Puede utilizar el siguiente fragmento para añadir una sombra cuando se pasa el ratón por encima de la entrada:

#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 aquí la información sobre cómo editar los valores de los fragmentos.

Crear un diseño de cuadrícula de columnas de mampostería a partir de tus publicaciones de Facebook

Consulte las FAQ para saber cómo hacerlo.

Vincula la cabecera del feed a tu página de Facebook

Cambie la URL en el fragmento en consecuencia.

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

Elimina los mensajes de actualización de la foto de portada

Elimina las entradas que contengan el texto "actualizó su foto de portada". Este texto puede cambiarse a cualquier idioma.

$( "#cff .cff-item:contains('actualizaron su foto de portada')" ).remove();

Eliminar una determinada cadena o hashtag del texto de la entrada

Si utilizas un hashtag para filtrar las publicaciones (por ejemplo, #showonwebsite), es posible que no quieras que ese hashtag aparezca en tu feed. Puedes utilizar el siguiente fragmento para eliminar una cadena o hashtag concreto.

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

Crear un título de entrada a partir de los primeros 50 caracteres de la entrada

El siguiente fragmento de código crea una etiqueta heading 3 para cada entrada basándose en los primeros 50 caracteres de la entrada.

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

Añade un botón "Pin it" de Pinterest a las fotos de tu feed

Para que este fragmento funcione, primero tendrás que desactivar la caja de luz emergente de fotos. Para ello, activa la opción "Desactivar Popup Lightbox" en la página Personalizar del complemento. Añade el siguiente fragmento a la sección de JavaScript personalizado del complemento:

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

Crea un pase de diapositivas básico a partir de tus publicaciones de Facebook

Consulte las FAQ para saber cómo hacerlo.