Cómo crear un feed de fotos de Instagram personalizado en WordPress

Un feed de Instagram puede mantener tu sitio web actualizado y, al mismo tiempo, conseguir más likes, shares y seguidores de Instagram. Te ayuda a conectar con tu público en varias plataformas y aumenta la participación.

Los medios sociales han sido fundamentales para atraer tráfico a nuestro sitio web y ampliar nuestra audiencia. Compartiendo contenidos atractivos e interactuando con nuestros seguidores, hemos conseguido aumentar la notoriedad de nuestra marca y atraer a nuevos visitantes.

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

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

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

En lugar de añadir imágenes manualmente en el editor de bloques de WordPress, puedes simplemente crear un feed que se actualice automáticamente cada vez que publiques nuevas entradas de fotos en Instagram. Incluso puedes mostrar las 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 de Instagram personalizado para mostrar contenido generado por los usuarios.

De este modo, puede utilizar un feed de Instagram personalizado para proporcionar una valiosa prueba social y ganar más dinero en Internet.

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

Cómo crear un feed de fotos de Instagram personalizado en WordPress

La forma más fácil de añadir 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 el contenido de tu cuenta de Instagram en un instante.

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

Cubriremos varios pasos en nuestro tutorial, y puedes utilizar los enlaces rápidos de abajo para saltar a las diferentes secciones:

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

Cómo conectar una cuenta de Instagram a WordPress

En primer lugar, tendrás que 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.

Una vez activado, dirígete a la página “Ajustes” de Instagram Feed desde el escritorio de WordPress.

Después, introduce tu clave de licencia de Smash Balloon en el campo ‘Clave de licencia’.

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

Una vez hecho esto, siga adelante y haga clic en el botón “Activar”.

Ya estás listo para crear un feed de Instagram personalizado. Para empezar, selecciona Instagram Feed ” Todos los feeds y, a continuación, haz clic en el botón “Añadir nuevo”.

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

Sólo tiene que seleccionar el tipo de feed que desea añadir a WordPress y hacer clic en “Siguiente”.

Si sólo quieres mostrar tus fotos de Instagram, entonces puedes utilizar una cuenta personal de Instagram. Sin embargo, necesitarás una cuenta Business de Instagram si quieres crear un feed de hashtags o mostrar las entradas en las que tu cuenta está etiquetada.

Si selecciona “Publicar hashtag”, tendrá que escribir los hashtags que desea utilizar. Para mostrar varios hashtags en el mismo feed, basta con separar cada hashtag con una coma.

Una vez hecho esto, basta con hacer clic en “Siguiente”.

¿Quieres mostrar entradas en las que tu cuenta está etiquetada? Tendrás que seleccionar “Entradas etiquetadas” y hacer clic en “Siguiente”.

Independientemente del tipo de feed que estés creando, tendrás que conectar WordPress a tu cuenta de Instagram.

Para empezar, haga clic en el botón “Añadir fuente”.

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

Si seleccionas el botón siguiente a “Personal”, entonces Smash Balloon no incluirá el avatar de Instagram y la biografía en tu cabecera por defecto. Sin embargo, siempre puedes añadir el avatar de Instagram y la biografía manualmente en los ajustes del plugin.

Al elegir entre una cuenta de empresa y una cuenta personal, sólo tienes que hacer clic en “Acceder / acceso con Facebook”.

Ahora puedes seleccionar la cuenta de Instagram que quieres que aparezca en tu sitio web de WordPress y hacer clic en “Siguiente”.

Después, marca la casilla siguiente a la página de Facebook enlazada a la cuenta de Instagram que quieras utilizar.

Una vez hecho esto, haga clic en el botón “Siguiente”.

Ahora verás un mensaje / 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 a las fotos que aparecen en tu blog o sitio web de WordPress.

Teniendo esto en cuenta, te recomendamos que dejes todos los interruptores activados / activos. Cuando esté satisfecho con cómo se ha establecido el feed, siga adelante y haga clic en “Listo”.

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

Sólo tiene que marcar / comprobar la casilla situada junto a esa cuenta y, a continuación, hacer clic en “Añadir”.

Instagram Feed Pro ahora te llevará de vuelta a la pantalla de Instagram Feeds ” All Feeds.

Para crear un feed de Instagram personalizado, solo tienes que marcar la casilla siguiente a la cuenta de Instagram que quieras utilizar. A continuación, haz clic en “Siguiente”.

El plugin creará ahora un feed de fotos de Instagram que podrás añadir a cualquier página, entrada o zona preparada para widgets.

Cómo personalizar tu feed de fotos de Instagram

Por defecto, Smash Balloon abrirá tu feed en su editor, listo para que lo personalices.

A la derecha, verás una vista previa de tu feed de fotos de Instagram. En la parte izquierda están todos los ajustes que puedes utilizar para personalizar el feed de medios sociales.

La mayoría de estos ajustes se explican por sí mismos, pero cubriremos rápidamente algunas áreas clave.

Para cambiar la disposición, basta con hacer clic en “Disposición del feed” en el menú de la izquierda. Ahora puede elegir entre una estructura / disposición / cuadrícula, mosaico o carrusel.

También hay una disposición Resaltada que resalta por defecto una de cada tres fotos.

Al hacer clic en las distintas opciones, la vista previa se actualizará automáticamente para mostrar la nueva estructura / disposición / diseño / plantilla. Esto facilita probar diferentes diseños y encontrar el que prefiera.

Por defecto, Smash Balloon muestra el mismo número de fotos en ordenadores de sobremesa y dispositivos móviles. Puedes obtener una vista previa de cómo se verá el feed de Instagram en ordenadores de sobremesa, tabletas y smartphones utilizando la fila de botones de la esquina superior derecha.

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

Para ello, sólo tienes que introducir un número diferente en el campo “Móvil” situado bajo “Número de entradas”.

Por defecto, Smash Ballon dividirá tus fotos en 4 columnas en ordenadores de sobremesa, 2 columnas en tabletas y una sola columna en móviles.

¿Desea utilizar un número diferente de columnas? Desplácese a la sección “Columnas” del menú de la izquierda.

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

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

Después de hacer los cambios, enlaza el enlace ‘Personalizar’. Esto le llevará de vuelta al editor principal de Smash Balloon, listo para explorar la siguiente pantalla de ajustes, que es “Esquema de color”.

Por defecto, Smash Balloon utiliza un esquema de colores heredado de tu tema de WordPress, pero también tiene temas “Claro” y “Oscuro” que puedes querer utilizar para tu feed de Instagram.

Incluso puede crear su propia combinación de colores seleccionando “Personalizar” y utilizando los ajustes para cambiar el color del enlace, el color de fondo, el color del texto, etc.

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

Para cambiar el aspecto de esta sección, vuelva a la pantalla principal de ajustes y seleccione “Cabecera”.

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

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

Para cambiar la foto de perfil, haga clic en “Añadir imagen” en “Mostrar avatar personalizado”. A continuación, puedes elegir una imagen de la biblioteca de medios de WordPress o subir una foto nueva.

También puedes añadir una biografía diferente. Por ejemplo, puedes añadir una llamada a la acción que anime a la gente a visitar tu página de Instagram.

Para crear una biografía de Instagram única, sólo tienes que escribir en la casilla “Añadir biografía personalizada”.

Cuando esté satisfecho con el aspecto de la cabecera, haga clic en el enlace “Personalizar” para volver a la pantalla principal de ajustes.

Ahora, tienes que hacer clic en “Entradas”.

Para empezar, puedes cambiar entre la estructura / disposición / diseño / plantilla de las entradas individuales dentro del feed de Instagram.

Para ello, seleccione “Estilo de entrada”.

Ahora puede hacer clic para seleccionar la estructura / disposición / diseño / plantilla que desea utilizar.

Si selecciona “En recuadro”, puede cambiar el color de fondo, añadir una sombra de recuadro y aumentar el radio del borde para crear esquinas curvas.

Cuando estés satisfecho con los cambios, sólo tienes que hacer clic en el enlace “Entradas” para volver a la pantalla anterior de Smash Balloon.

Esta vez, selecciona “Imágenes y vídeos”.

Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra con la mejor resolución. Recomendamos utilizar estos ajustes por defecto, ya que están diseñados para aumentar la velocidad y el rendimiento de tu WordPress. Sin embargo, puedes hacer las imágenes de Instagram más grandes o más pequeñas si lo necesitas.

Para cambiar el tamaño de la imagen, simplemente abra el desplegable ‘Resolución’ y elija uno de los tamaños de imagen por defecto de WordPress de la lista.

Una vez más, haga clic en el enlace “Entradas” para volver a la pantalla anterior.

Esta vez, selecciona “Leyenda”. En la siguiente pantalla, puedes mostrar la leyenda de Instagram junto a cada imagen al hacer clic en el carrusel / control deslizante “Activar”.

Se abrirán nuevas opciones de personalización desde las que podrá cambiar el tamaño y el color del texto y establecer una longitud máxima.

Una vez hecho esto, basta con enlazar la opción “Entradas” para volver a la pantalla anterior.

El siguiente ajuste es “Me gusta y resumen de comentarios”.

Aquí puedes añadir u ocultar el número total de “me gusta” y comentarios de cada imagen. Si tus entradas de Instagram consiguen una buena participación, estas cifras pueden animar a la gente a visitar tu página de Instagram o a empezar a seguirte en los medios sociales.

Como siempre, tienes que hacer clic en “Entradas” para volver a la pantalla anterior.

La última opción es “Hover State”, que es la superposición que Smash Balloon añade a una entrada al pasar el cursor sobre ella.

Aquí, puedes elegir la información que Smash Balloon muestra cuando alguien pasa el cursor sobre una entrada usando los ajustes de ‘Información a mostrar’.

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

Cuando esté satisfecho con los cambios realizados, enlace “Personalizar”.

Esto te lleva de vuelta a la página principal de ajustes de Smash Balloon, donde puedes hacer clic en la pestaña “Cargar más botones”.

Aquí puede hacer que el botón “Cargar más” destaque cambiando su color de fondo, el color del texto y el estado al pasar el cursor.

También puedes añadir tu propio mensaje al botón escribiendo en el campo “Texto”.

Aunque recomendamos dejar este botón activado / activo, puede quitarlo. Por ejemplo, puedes animar a la gente a visitar tu Instagram limitando el número de fotos que pueden ver en tu sitio.

Para eliminar el botón, basta con desactivar el carrusel / control deslizante “Activar” para que se vuelva gris.

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

Dado que es un botón tan importante, quizá quieras añadirle un estilo personalizado para que destaque. Para ello, seleccione “Personalizar” para volver a la pantalla principal de ajustes. A continuación, selecciona “Botón de seguimiento” en el menú de la izquierda.

Aquí puede 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 sustituirlo por tu propio mensaje escribiendo en el campo “Texto”.

Smash Balloon viene con una caja de luz integrada que permite a los visitantes abrir tus fotos y vídeos de Instagram sin salir de tu sitio web.

Para configurar esta característica, vuelva a la pantalla principal de ajustes de Smash Balloon y haga clic en “Caja de luz”.

Aquí puedes cambiar el número de comentarios que Smash Balloon mostrará en la caja de luz.

Si no desea utilizar la característica de caja de luz, puede desactivarla utilizando el carrusel / control deslizante “Activar”.

Cuando estés satisfecho con el aspecto del feed de Instagram, no olvides hacer clic en “Guardar” para guardar los cambios.

Ya puedes añadir el feed de Instagram a tu sitio web WordPress.

Mostrar un feed de tus fotos de Instagram en WordPress

Puedes añadir el feed personalizado de Instagram a tu sitio web mediante un bloque, un widget o un shortcode.

Si ha creado más de un feed utilizando Smash Balloon, necesitará conocer el código del feed para utilizar un widget o un bloque.

Para obtener este código, debes ir a Instagram Feed ” All Feeds y, a continuación, copiar el texto que aparece en “Shortcode”.

En la siguiente imagen, tendremos que utilizar instagram-feed feed=4.

Si quieres incrustar el feed de Instagram en una página o entrada, puedes utilizar el bloque Feed de Instagram.

Solo tienes que abrir la página o entrada en la que quieras incrustar tu feed de Instagram personalizado. A continuación, haz clic en el icono ‘+’ para añadir un nuevo bloque y empieza a escribir ‘Instagram Feed’.

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la página o entrada.

El bloque mostrará uno de tus feeds de Instagram por defecto. Si quieres mostrar un feed de Smash Balloon diferente, busca ‘Ajustes de shortcode’ en el menú de la derecha.

Sólo tiene que añadir el shortcode y hacer clic en “Aplicar cambios”.

Si estás satisfecho con el aspecto del feed de Instagram personalizado, puedes seguir adelante y publicar o actualizar la página.

Otra opción es añadir el widget de feed de Instagram a tu sitio web. Esta es una gran manera de mostrar un feed de Instagram en cada página de tu sitio. Por ejemplo, puedes añadir el widget de Instagram a la barra lateral o al pie de página del tema de WordPress.

Para añadir el widget de Instagram Feed a tu sitio, dirígete a Apariencia ” Widgets. A continuación, haga clic en el icono azul “+” en la parte superior de la pantalla.

En el panel que aparece, escribe “Instagram Feed” para encontrar el widget adecuado.

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

A continuación, sólo tienes que arrastrar el widget a la zona donde quieras mostrar el feed de Instagram, como la barra lateral o una sección similar.

El widget mostrará automáticamente uno de los feeds que hayas creado con Smash Balloon. Si no es el feed de Instagram personalizado que acabas de crear, escribe el código del feed en el cuadro “Ajustes de shortcode”.

A continuación, haga clic en “Aplicar cambios”.

Ahora puede activar el widget haciendo clic en el botón “Actualizar”. Para obtener más información, consulte nuestra guía práctica sobre cómo añadir y utilizar widgets en WordPress.

Otra opción es incrustar el feed de Instagram en cualquier página, entrada o zona preparada para widgets mediante un shortcode.

Simplemente ve a Instagram Feed ” All Feeds y copia el código en la columna ‘Shortcode’. Ahora puedes añadir este código a cualquier bloque Shortcode. Si necesitas ayuda para colocar el shortcode, consulta nuestra guía sobre cómo añadir un shortcode.

¿Estás usando un tema activado / activo para bloques? Entonces puedes utilizar el editor de sitio completo para añadir el bloque Instagram Feed en cualquier lugar de tu sitio web WordPress.

En el Escritorio, vaya a Apariencia ” Editor.

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

Si quieres añadir el feed de Instagram a una zona diferente, haz clic en “Plantilla” o en “Partes de plantilla”.

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

Simplemente haga clic en la plantilla donde desea mostrar el feed de Instagram.

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

Para editar esta plantilla, sigue adelante y haz clic en el pequeño icono del lápiz.

Después de elegir una plantilla, sólo tienes que pasar el cursor sobre la zona en la que quieres añadir el feed de fotos de Instagram.

A continuación, haz clic en el botón azul “+”.

Una vez hecho esto, tienes que escribir “Instagram Feed”.

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la plantilla.

Como siempre, Smash Balloon mostrará un feed por defecto. Puede cambiar este feed añadiendo un shortcode siguiendo el mismo proceso descrito anteriormente.

Bonificación: Permita que los clientes compren sus productos a través de Instagram

Si tienes una tienda online, también puedes utilizar tu feed de Instagram personalizado para vender fácilmente tus productos.

Smash Balloon Instagram Feed Pro le permite etiquetar sus imágenes de Instagram con enlaces de productos para que los usuarios puedan hacer clic en ellos y comprarlos directamente en lugar de navegar a través de sus páginas de productos. Esto puede aumentar las ofertas y aumentar los beneficios en su tienda.

Para más detalles, puedes consultar nuestra guía completa sobre cómo añadir imágenes shoppable de Instagram en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear un feed de Instagram personalizado en WordPress. Es posible que también desee aprender cómo añadir un sorteo de Facebook en WordPress para aumentar la participación y nuestra lista de estadísticas de medios sociales para principiantes.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.