Cómo crear una fuente personalizada de fotos de Instagram en WordPress

Un feed de Instagram puede mantener tu sitio web actualizado y, al mismo tiempo, ayudarte a conseguir más 'me gusta', compartidos y seguidores en Instagram. Te ayuda a conectar con tu audiencia en múltiples plataformas y aumenta la interacción.

Las redes sociales han sido fundamentales para dirigir tráfico a nuestro sitio web y expandir nuestra audiencia. Al compartir contenido atractivo e interactuar con nuestros seguidores, hemos podido aumentar el conocimiento de la marca y atraer nuevos visitantes.

En este artículo, te mostraremos cómo crear fácilmente un feed de fotos personalizado de Instagram para tu sitio web de WordPress.

¿Por qué incluir un feed de Instagram en tu sitio de WordPress?

Incrustar un feed de Instagram en tu sitio de WordPress te permite mostrar contenido fresco a tus visitantes sin mucho trabajo adicional. También anima a los lectores a seguirte en Instagram.

En lugar de agregar imágenes manualmente en el editor de bloques de WordPress, simplemente puedes crear un feed que se actualice automáticamente cada vez que publiques fotos nuevas en Instagram. Incluso puedes mostrar fotos de otras personas en tu sitio creando un feed de hashtags.

En la siguiente imagen, puedes ver un ejemplo de una marca que utiliza un feed personalizado de Instagram para mostrar contenido generado por el usuario.

De esta manera, puedes usar un feed personalizado de Instagram para proporcionar prueba social valiosa y ganar más dinero en línea.

Dicho esto, veamos cómo puedes crear un feed de fotos personalizado de Instagram en WordPress.

Cómo crear una fuente personalizada de fotos de Instagram en WordPress

La forma más fácil de agregar un feed de fotos de Instagram a tu sitio es usando el plugin Smash Balloon Instagram Feed. Es el mejor plugin de Instagram para WordPress que te permite mostrar contenido de tu cuenta de Instagram al instante.

También es la forma más fácil de solucionar el problema de oEmbed de Facebook e Instagram en WordPress.

Cubriremos varios pasos en nuestro tutorial, y puedes usar los enlaces rápidos a continuación para saltar a las diferentes secciones:

• Cómo conectar una cuenta de Instagram a WordPress
• Cómo personalizar tu feed de fotos de Instagram
• Mostrar un Feed de Tus Fotos de Instagram en WordPress
• Extra: Deja que los clientes compren tus productos a través de Instagram

Tutorial en video

Suscríbete a WPBeginner

Si prefieres instrucciones escritas, sigue leyendo.

Cómo conectar una cuenta de Instagram a WordPress

Primero, necesitarás instalar y activar el plugin Smash Balloon Instagram Feed. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarlo, dirígete a la página Instagram Feed » Settings desde el panel de WordPress.

Después de eso, ingresa tu clave de licencia de Smash Balloon en el campo 'License Key'.

Puedes encontrar esta información en el correo electrónico de confirmación que recibiste al comprar Smash Balloon y también en tu cuenta de Smash Balloon.

Una vez que lo hagas, haz clic en el botón 'Activate'.

Ahora estás listo para crear un feed de Instagram personalizado. Para empezar, selecciona Instagram Feed » All Feeds y luego haz clic en el botón 'Add New'.

Smash Balloon ahora mostrará todos los diferentes tipos de feeds de Instagram que puedes crear.

Simplemente selecciona el tipo de feed que deseas agregar a WordPress y haz clic en 'Next'.

Si solo quieres mostrar tus fotos de Instagram, puedes usar una cuenta personal de Instagram. Sin embargo, necesitarás una cuenta de Instagram para negocios si quieres crear un feed de hashtags o mostrar las publicaciones en las que tu cuenta está etiquetada.

Si seleccionas 'Publicar Hashtag', entonces necesitarás escribir los hashtags que quieres usar. Para mostrar varios hashtags en el mismo feed, simplemente separa cada hashtag con una coma.

Una vez que hayas hecho eso, solo haz clic en 'Siguiente'.

¿Quieres mostrar las publicaciones en las que tu cuenta está etiquetada? Deberás seleccionar 'Publicaciones Etiquetadas' en su lugar y luego hacer clic en 'Siguiente'.

No importa qué tipo de feed estés creando, necesitarás conectar WordPress a tu cuenta de Instagram.

Para empezar, haz clic en el botón ‘Add Source’.

Después de eso, elige si quieres mostrar imágenes de una cuenta personal o de negocios.

Si seleccionas el botón junto a 'Personal', entonces Smash Balloon no incluirá el avatar y la biografía de Instagram en tu encabezado por defecto. Sin embargo, siempre puedes agregar el avatar y la biografía de Instagram manualmente en la configuración del plugin.

Al elegir entre una cuenta de negocios y una personal, solo haz clic en 'Iniciar sesión con Facebook'.

Ahora puedes seleccionar la cuenta de Instagram que quieres destacar en tu sitio web de WordPress y hacer clic en 'Siguiente'.

Después de eso, marca la casilla junto a la página de Facebook que está vinculada a la cuenta de Instagram que quieres usar.

Con eso hecho, necesitas hacer clic en el botón 'Siguiente'.

Ahora verás una ventana emergente con toda la información a la que Instagram Feed Pro tendrá acceso y las acciones que puede realizar.

Para restringir el acceso del plugin a tu cuenta de Instagram, simplemente haz clic en cualquiera de los interruptores para cambiarlo de 'Sí' a 'No'. Ten en cuenta que esto puede afectar las fotos que aparecen en tu blog de WordPress o sitio web.

Teniendo esto en cuenta, recomendamos dejar todos los interruptores activados. Cuando estés satisfecho con la configuración de la fuente, haz clic en 'Listo'.

Ahora verás una ventana emergente con la cuenta de Instagram que acabas de agregar a tu sitio web.

Simplemente marca la casilla junto a esa cuenta y luego haz clic en 'Agregar'.

Instagram Feed Pro ahora te llevará de regreso a la pantalla de Fuentes de Instagram » Todas las fuentes.

Para crear una fuente personalizada de Instagram, simplemente marca la casilla junto a la cuenta de Instagram que deseas usar. Luego, haz clic en 'Siguiente'.

El plugin ahora creará una fuente de fotos de Instagram que puedes agregar a cualquier página, publicación o área lista para widgets.

Cómo personalizar tu feed de fotos de Instagram

Por defecto, Smash Balloon abrirá tu fuente en su editor, lista para que la personalices.

A la derecha, verás una vista previa de tu fuente de fotos de Instagram. En el lado izquierdo están todas las configuraciones que puedes usar para personalizar la fuente de redes sociales.

La mayoría de estas configuraciones se explican por sí mismas, pero cubriremos rápidamente algunas áreas clave.

Para cambiar el diseño, simplemente haz clic en 'Diseño de la fuente' en el menú de la izquierda. Ahora puedes elegir entre un diseño de Cuadrícula, Mampostería o Carrusel.

También hay un diseño Destacado que resalta cada tercera foto por defecto.

A medida que haces clic en las diferentes opciones, la vista previa en vivo se actualizará automáticamente para mostrar el nuevo diseño. Esto facilita probar diferentes diseños y encontrar el que prefieres.

Por defecto, Smash Balloon muestra la misma cantidad de fotos en computadoras de escritorio y dispositivos móviles. Puedes previsualizar cómo se verá el feed de Instagram en computadoras de escritorio, tabletas y smartphones usando la fila de botones en la esquina superior derecha.

Los teléfonos inteligentes y las tabletas suelen tener pantallas más pequeñas y menos potencia de procesamiento, por lo que es posible que desees mostrar menos fotos y videos de Instagram en dispositivos móviles.

Para hacer esto, simplemente escribe un número diferente en el campo 'Móvil' bajo 'Número de publicaciones'.

Por defecto, Smash Ballon dividirá tus fotos en 4 columnas en escritorio, 2 columnas en tabletas y una sola columna en móvil.

¿Quieres usar un número diferente de columnas? Entonces simplemente desplázate a la sección 'Columnas' en el menú de la izquierda.

Ahora puedes escribir un nuevo número en los campos Escritorio, Tableta o Móvil.

Para asegurarte de que tu feed de Instagram se vea bien en dispositivos móviles, es inteligente ver la versión móvil de tu sitio web de WordPress.

Después de hacer tus cambios, haz clic en el enlace ‘Personalizar’. Esto te llevará de regreso al editor principal de Smash Balloon, listo para que explores la siguiente pantalla de configuración, que es ‘Esquema de color’.

Por defecto, Smash Balloon utiliza un esquema de color heredado de tu tema de WordPress, pero también tiene temas ‘Claro’ y ‘Oscuro’ que podrías querer usar para tu feed de Instagram.

Incluso puedes crear tu propio esquema de color seleccionando ‘Personalizado’ y luego usando la configuración para cambiar el color del enlace, el color de fondo, el color del texto y más.

Por defecto, Smash Balloon agrega una cabecera al feed de Instagram, que es la foto de tu perfil y el nombre de tu página. Esto puede proporcionar un contexto adicional útil para que los visitantes entiendan de dónde provienen estas imágenes.

Para cambiar cómo se ve esta sección, regresa a la pantalla de configuración principal y luego selecciona ‘Cabecera’.

En esta pantalla, puedes cambiar el color de fondo, mostrar tu biografía de Instagram, cambiar el tamaño de la cabecera y más.

Por defecto, la cabecera incluye la foto de tu perfil de Instagram. Sin embargo, es posible que desees mostrar una imagen diferente, como el logo personalizado de tu sitio.

Para cambiar la foto de perfil, haz clic en ‘Añadir imagen’ bajo ‘Mostrar avatar personalizado’. Luego puedes elegir una imagen de la biblioteca de medios de WordPress o subir una foto nueva.

También puedes agregar una biografía diferente. Por ejemplo, podrías agregar una llamada a la acción que anime a las personas a visitar tu página de Instagram.

Para crear una biografía de Instagram única, simplemente escribe en el cuadro ‘Agregar biografía personalizada’.

Cuando estés satisfecho con la apariencia del encabezado, haz clic en el enlace ‘Personalizar’ para volver a la pantalla principal de configuración.

Ahora, necesitas hacer clic en ‘Publicaciones’.

Para empezar, puedes alternar entre diseños de caja y normales para las publicaciones individuales dentro del feed de Instagram.

Para hacer esto, selecciona ‘Estilo de publicación’.

Ahora puedes hacer clic para seleccionar el diseño que deseas usar.

Si seleccionas ‘En caja’, entonces puedes cambiar el color de fondo, agregar una sombra de caja y aumentar el radio del borde para crear esquinas redondeadas.

Cuando estés satisfecho con tus cambios, simplemente haz clic en el enlace ‘Publicaciones’ para regresar a la pantalla anterior de Smash Balloon.

Esta vez, selecciona ‘Imágenes y videos’.

Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra a la mejor resolución. Recomendamos usar estas configuraciones predeterminadas, ya que están diseñadas para mejorar la velocidad y el rendimiento de tu WordPress. Sin embargo, puedes hacer que las imágenes de Instagram sean más grandes o más pequeñas si lo necesitas.

Para cambiar el tamaño de la imagen, simplemente abre el menú desplegable ‘Resolución’ y elige uno de los tamaños de imagen predeterminados de WordPress de la lista.

Una vez más, haz clic en el enlace ‘Publicaciones’ para regresar a la pantalla anterior.

En esta ocasión, selecciona ‘Caption’. En la siguiente pantalla, puedes mostrar el pie de foto de Instagram junto a cada imagen haciendo clic en el control deslizante ‘Enable’ (Habilitar).

Esto abrirá nuevas opciones de personalización desde donde puedes cambiar el tamaño y color del texto, y establecer una longitud máxima de texto.

Una vez hecho esto, simplemente haz clic en el enlace ‘Posts’ (Publicaciones) para regresar a la pantalla anterior.

La siguiente configuración es ‘Like and Comment Summary’ (Resumen de Me Gusta y Comentarios).

Aquí, puedes agregar u ocultar el número total de me gusta y comentarios en cada imagen. Si tus publicaciones de Instagram obtienen una buena cantidad de interacción, estos números pueden animar a las personas a visitar tu página de Instagram o a seguirte en redes sociales.

Como siempre, necesitas hacer clic en ‘Posts’ (Publicaciones) para regresar a la pantalla anterior.

La opción final es ‘Hover State’ (Estado al pasar el cursor), que es la superposición que Smash Balloon agrega a una publicación cuando pasas el mouse sobre ella.

Aquí, puedes elegir la información que Smash Balloon muestra cuando alguien pasa el cursor sobre una publicación usando la configuración en ‘Information to display’ (Información a mostrar).

También puedes cambiar el color de la superposición al pasar el cursor.

Cuando estés satisfecho con los cambios que has realizado, haz clic en el enlace ‘Personalizar’.

Esto te lleva de regreso a la página principal de configuración de Smash Balloon, donde puedes hacer clic en la pestaña ‘Botón de Cargar Más’.

Aquí, puedes hacer que el botón ‘Cargar más’ destaque cambiando su color de fondo, color de texto y estado al pasar el cursor.

También puedes intentar agregar tu propio mensaje al botón escribiendo en el campo ‘Texto’.

Si bien recomendamos dejar este botón habilitado, puedes eliminarlo. Por ejemplo, podrías animar a las personas a visitar tu Instagram limitando la cantidad de fotos que pueden ver en tu sitio.

Para eliminar el botón, simplemente desactiva el control deslizante ‘Habilitar’ para que se ponga gris.

Si a los visitantes les gusta lo que ven, pueden decidir suscribirse usando el botón 'Seguir en Instagram' que aparece debajo del feed incrustado.

Dado que es un botón tan importante, es posible que desees agregarle un estilo personalizado para que destaque. Para hacer esto, selecciona ‘Personalizar’ para regresar a la pantalla de configuración principal. Luego, selecciona ‘Botón de Seguir’ en el menú de la izquierda.

Aquí, puedes cambiar el color de fondo del botón, el estado al pasar el cursor y el color del texto.

Por defecto, el botón muestra la etiqueta 'Seguir en Instagram'.

Puedes reemplazar esto con tu propio mensaje escribiendo en el campo ‘Texto’.

Smash Balloon viene con una ventana emergente integrada que permite a los visitantes abrir tus fotos y videos de Instagram sin salir de tu sitio web.

Para configurar esta función, regresa a la pantalla de configuración principal de Smash Balloon y luego haz clic en ‘Ventana Emergente’.

Aquí, puedes cambiar cuántos comentarios mostrará Smash Balloon en la ventana emergente.

Si no deseas usar la función de ventana emergente, puedes deshabilitarla usando el control deslizante ‘Habilitar’.

Cuando estés satisfecho con la apariencia de tu feed de Instagram, no olvides hacer clic en ‘Guardar’ para almacenar tus cambios.

Ahora estás listo para agregar el feed de Instagram a tu sitio web de WordPress.

Mostrar un Feed de Tus Fotos de Instagram en WordPress

Puedes agregar el feed personalizado de Instagram a tu sitio web usando un bloque, un widget o un shortcode.

Si has creado más de un feed usando Smash Balloon, necesitarás conocer el código del feed para usar un widget o bloque.

Para obtener este código, debes ir a Instagram Feed » Todos los Feeds y luego copiar el texto debajo de ‘Shortcode’.

En la siguiente imagen, necesitaremos usar instagram-feed feed=4.

Si deseas incrustar el feed de Instagram en una página o publicación, puedes usar el bloque de Feed de Instagram.

Simplemente abre la página o publicación donde deseas incrustar tu feed personalizado de Instagram. Luego, haz clic en el ícono de ‘+’ para agregar un nuevo bloque y comienza a escribir ‘Instagram Feed’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la página o publicación.

El bloque mostrará uno de tus feeds de Instagram por defecto. Si deseas mostrar un feed diferente de Smash Balloon, busca ‘Configuración de Shortcode’ en el menú del lado derecho.

Aquí, simplemente agrega el shortcode y luego haz clic en ‘Aplicar Cambios’.

Si estás satisfecho con la apariencia del feed personalizado de Instagram, puedes proceder a publicar o actualizar la página.

Otra opción es agregar el widget de Instagram Feed a tu sitio web. Esta es una excelente manera de mostrar un feed de Instagram en cada página de tu sitio. Por ejemplo, podrías agregar el widget de Instagram a la barra lateral o al pie de página del tema de WordPress.

Para agregar el widget de Instagram Feed a tu sitio, dirígete a Apariencia » Widgets. Luego, puedes hacer clic en el ícono azul ‘+’ en la parte superior de la pantalla.

En el panel que aparece, escribe ‘Instagram Feed’ para encontrar el widget correcto.

Como puedes ver en la siguiente imagen, hay dos widgets de Instagram Feed, así que asegúrate de usar el correcto.

A continuación, simplemente arrastra el widget al área donde deseas mostrar el feed de Instagram, como la barra lateral o una sección similar.

El widget mostrará automáticamente uno de los feeds que creaste usando Smash Balloon. Si este no es el feed personalizado de Instagram que acabas de crear, escribe el código del feed en el cuadro ‘Configuración de Shortcode’.

Después de eso, haz clic en ‘Aplicar Cambios’.

Ahora puede publicar el widget haciendo clic en el botón ‘Actualizar’. Para obtener más información, consulte nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.

Otra opción es incrustar el feed de Instagram en cualquier página, publicación o área lista para widgets usando un shortcode.

Simplemente ve a Instagram Feed » Todos los Feeds y copia el código en la columna ‘Shortcode’. Ahora puedes agregar este código a cualquier bloque de Shortcode. Para obtener ayuda para colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode.

¿Estás usando un tema habilitado para bloques? Entonces puedes usar el editor de sitio completo para agregar el bloque de Feed de Instagram en cualquier lugar de tu sitio web de WordPress.

En el panel de control, ve a Apariencia » Editor.

Por defecto, el editor de sitio completo mostrará la plantilla de inicio del tema.

Si deseas agregar el feed de Instagram a un área diferente, haz clic en 'Plantilla' o 'Partes de plantilla'.

El editor ahora mostrará una lista de todas las partes de plantilla que componen tu tema de WordPress.

Simplemente haz clic en la plantilla donde deseas mostrar el feed de Instagram.

WordPress ahora mostrará una vista previa del diseño.

Para editar esta plantilla, haz clic en el pequeño ícono de lápiz.

Después de elegir una plantilla, simplemente pasa el cursor del mouse sobre el área donde deseas agregar el feed de fotos de Instagram.

Luego, haz clic en el botón azul ‘+’.

Una vez que hayas hecho eso, necesitas escribir 'Instagram Feed'.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la plantilla.

Como siempre, Smash Balloon mostrará un feed por defecto. Puedes cambiar este feed agregando un shortcode siguiendo el mismo proceso descrito anteriormente.

Extra: Deja que los clientes compren tus productos a través de Instagram

Si tienes una tienda en línea, entonces también puedes usar tu feed personalizado de Instagram para vender tus productos fácilmente.

Smash Balloon Instagram Feed Pro te permite etiquetar tus imágenes de Instagram con enlaces de productos para que los usuarios puedan hacer clic en ellos y comprarlos directamente en lugar de navegar por tus páginas de productos. Esto puede aumentar las ventas y las ganancias de tu tienda.

Para más detalles, puedes ver nuestra guía completa sobre cómo agregar imágenes comprables de Instagram en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear un feed personalizado de Instagram en WordPress. También podrías querer aprender cómo agregar un sorteo de Facebook en WordPress para aumentar la participación y nuestra lista de estadísticas de redes sociales para principiantes.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.