Docs    Facebook

Cómo utilizar la extensión Álbum para mostrar fotos de un álbum concreto de Facebook

Instalación

Las extensiones se instalan como cualquier otro plugin de WordPress. Puedes seguir el mismo proceso utilizado al cargar e instalar el plugin Custom Facebook Feed Pro.

Si tienes la licencia Smash o All Access Bundle, que incluye todas nuestras extensiones de feed de Facebook, después de instalar y activar el plugin Custom Facebook Feed Extensions, también tendrás que ir a WordPress Dashboard > Facebook Feed > Extensions y activar las extensiones individuales que quieras utilizar:

Encontrar el ID del álbum

Puedes encontrar el ID de un álbum de Facebook a partir de su URL. Es el conjunto de números entre los dos primeros puntos de la URL, como se resalta a continuación:

https://www.facebook.com/media/set/?set=a.440612488444.242105.15087023444

Plugin Versión 4.0 y superior

A partir de la versión 4.0 del plugin, también puedes introducir directamente la URL completa del álbum y el plugin encontrará automáticamente el ID correcto.

Crear una fuente de álbum único

Ve a Facebook Feed > All Feeds > New. Cuando se te pida que selecciones el tipo de feed, selecciona Álbum único. Se te pedirá que añadas la URL o ID del álbum.

Para un feed ya configurado ve a Facebook Feed > All Feeds > selecciona Edit for the feed > Settings > Feed Type > haz clic en Change y luego en Single Album. Cambia el tipo de feed y podrás añadir la URL o ID del álbum a este feed específico.

Mostrar subtítulos al pasar el ratón por encima

Al hacer clic en una foto, el pie de foto se mostrará en la caja de luz emergente, pero también puede optar por mostrar el pie de foto cuando se pasa el ratón por encima de la foto sin abrir la caja de luz. Sólo tienes que añadir el siguiente JavaScript a tu sitio. Esto puede hacerse manualmente utilizando un plugin JavaScript personalizado. Para más información, consulte nuestra documentación aquí.

$('.cff-album-cover').each(function(){
  $self = $(this);
  $self.find('.cff-photo-hover').html('<p style="color: #fff; width: 90%; padding: 5%;">' + $self.find('.cff-lightbox-link').attr('data-title') + '</p>');
});

Abajo Plugin Versión 4.0

Código corto

La extensión Album permite especificar el ID de un álbum de Facebook directamente en el shortcode:

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
This message is only visible to admins.
Problem displaying Facebook posts.
Error: No posts available for this Facebook ID

También puede definir el número de columnas de la cuadrícula de fotos mediante la opción "albumcols" del shortcode, y el número de fotos que se mostrarán mediante la opción "num":

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
This message is only visible to admins.
Problem displaying Facebook posts.
Error: No posts available for this Facebook ID

Opciones de código corto

Nombre Atributo Opciones Descripción Ejemplo
Identificación del álbum álbum Cualquier ID de álbum ID del álbum de Facebook que quieres mostrar album=440612488444
Número de columnas albumcols 1-4 El número de columnas de la cuadrícula de fotos albumcols=2
Número de fotos num Cualquier número El número de fotos a mostrar num=50

Mostrar primero las fotos más recientes

Para cambiar el orden de las fotos tendrías que reordenarlas manualmente dentro del álbum en Facebook, haciendo clic en los 3 puntos de la esquina y seleccionando "Editar álbum". A continuación, puedes arrastrar y soltar las fotos en el álbum y hacer clic en "Guardar". Si luego borras la caché en la página de configuración del plugin, éste se actualizará para reflejar el orden en Facebook.

Mostrar subtítulos al pasar el ratón por encima

Al hacer clic en una foto, el pie de foto se mostrará en la caja de luz emergente, pero también puedes elegir mostrar el pie de foto al pasar el ratón por encima de la foto sin abrir la caja de luz. Sólo tienes que añadir lo siguiente a la sección JavaScript personalizado del plugin, que se encuentra en la pestaña Misc de la página Personalizar del plugin:

$('.cff-album-cover').each(function(){
  $self = $(this);
  $self.find('.cff-photo-hover').html('<p style="color: #fff; width: 90%; padding: 5%;">' + $self.find('.cff-lightbox-link').attr('data-title') + '</p>');
});

soporte

¿No ha encontrado la respuesta en los documentos?

Contacto

¿Le ha resultado útil este artículo?