Cómo integrar un feed de Instagram en una página web de Squarespace

Instagram es una de las redes sociales más grandes del mundo, solo superada por Facebook, YouTube y WhatsApp. Con más de mil millones de usuarios activos al mes, no es de extrañar que los propietarios de sitios web quieran utilizarla.  

• Los artistas, los fotógrafos y otras personas creativas pueden ganarse un público.

• Las empresas pueden compartir fotos de sus productos y crear una comunidad de seguidores.

• Los influencers pueden aumentar su influencia y ganar dinero a través de patrocinios.

• Las personas pueden utilizarlo simplemente por diversión.

Instagram también es conocido, en cierta medida, por haber sido un «jardín amurallado» a lo largo de su historia. Durante años, tras su creación, solo se podía acceder a él desde dispositivos móviles. Sin embargo, esas barreras se fueron derribando poco a poco, y ahora se puede acceder a él tanto desde la web como desde el móvil, y es posible incrustar publicaciones de Instagram en las entradas de tu blog y en tu página web de otras formas.

Estás aquí, leyendo esta entrada, lo que significa que eres propietario de una web y utilizas Squarespace. ¡Excelente elección! Quieres integrar Instagram en tu web. Por suerte, hay varias formas de hacerlo y es bastante fácil.

Determina el tipo de incrustación

Hay dos formas distintas de integrar Instagram en tu sitio web de Squarespace. Ambas utilizan métodos diferentes, por lo que debes decidir qué opción quieres utilizar. ¿Cuáles son?

Opción 1: Incrustar una sola publicación de Instagram en un único lugar de tu página web. Por ejemplo, estás leyendo esta entrada del blog; supongamos que quiero incrustar una sola publicación de Instagram justo aquí, debajo de este párrafo. Esa publicación se mostrará en esa posición mientras siga existiendo.

Opción 2: Incrustar un feed completo de Instagram. Este feed, en lugar de mostrar una sola publicación, muestra varias publicaciones. Y lo que es más importante, se actualiza a medida que actualizas tu feed de Instagram, mostrando siempre las últimas publicaciones que hayas creado.

Todas estas opciones son factibles; solo hay que utilizar un método diferente para llevarlas a cabo. Veamos cómo.

Cómo incrustar una sola publicación de Instagram

Squarespace incluye un bloque de Instagram como parte de la estructura de la página web, peronoes esolo quevas a utilizar aquí. Esa función sirve para añadir un feed, así que lo explicaré con más detalle más adelante.  

En su lugar, tienes que incrustar el código de Instagram y añadirlo mediante un bloque de código en Squarespace.  

Paso 1: Redacta la entrada de tu página web o blog hasta el punto en el que necesites añadir una publicación de Instagram. Por ejemplo, te conviene escribir la entrada del blog dejando un espacio para la publicación de Instagram que quieras añadir.  

Paso 2: Añade un bloque de código. Unbloque de códigoes un bloque de contenido específico en el que puedes pegar código, que luego se ejecutará. Según Squarespace, se utiliza «para añadir código personalizado a una página, una entrada de blog, la barra lateral, el pie de página u otras áreas de contenido».

There's one potential caveat here. Again, per Squarespace, “On all plans, Code Blocks support plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags. Adding JavaScript or iframes to Code Blocks is a premium feature available in business and commerce plans."

El código de inserción de Instagram utiliza HTML, pero llama a un archivo .js. Estodeberíafuncionar correctamente en todos los planes de Squarespace, pero si tienes algún problema, es posible que tengas que cambiar a un plan superior.  

Para añadir un bloque de código, coloca el cursor en el área de contenido donde quieras que se muestre la publicación de Instagram. A continuación, en el menú, haz clic en «Código». Aparecerá un cuadro en el que se te pedirá que pegues el código. Asegúrate de que el botón «Mostrar código fuente» esté desactivado; si está activado, se mostrará el código en lugar del resultado final que este genera.

Paso 3: Obtén tu código de Instagram. Tienes que buscar la publicación en Instagram, lo que significa que ya tiene que estar publicada. Por ejemplo, toma una publicacióncomo esta, sacadadirectamente del feed de Instagram de Squarespace.

Si quieres incrustar esa publicación, haz clic en la opción de menú «…» situada en la esquina superior derecha de la publicación. Así se mostrarán las opciones del menú. A continuación, haz clic en «incrustar», lo que hará que aparezca un cuadro con el código. Puedes elegir si deseas incrustar una versión con o sin pie de foto. El código tendráun aspecto similar a este.

Paso 4: Pega el código de incrustación en el bloque de código de la entrada de tu blog. Asegúrate de que el método de visualización esté configurado como «HTML», para que el código se ejecute correctamente y se incruste la entrada.

Es posible que Squarespace muestre o no una vista previa del código. Si no lo hace, puedes hacer clic en «Vista previa en modo seguro» para que se muestre. También es posible que siga sin mostrarse en la vista previa, pero que se vea correctamente cuando publiques la entrada. Puedes publicarla, echarle un vistazo y eliminar el código si no funciona correctamente.

Hay que tener en cuenta que, si intentas incrustar una publicación de una cuenta privada de Instagram, es posible que la publicación se muestre, pero cualquier enlace que lleve a ella redirigirá a una página sin contenido en Instagram (a menos que la persona que navega sea un seguidor autorizado de la cuenta privada). Mi recomendación es que te asegures de que tu cuenta de Instagram sea pública antes de incrustar publicaciones. Si utilizas Instagram para fines comerciales, de todos modos tendrás que tener una cuenta pública.  

Si necesitas mostrar una publicación de Instagram de una cuenta privada, quizá te convenga más hacer una captura de pantalla e insertarla como imagen. De esa forma, no tendrás que perder el tiempo con bloques de código. Dado que la interacción no es relevante para una cuenta privada, el método de la imagen funciona perfectamente.

¡Eso es todo! Puedes repetir este proceso con cada publicación que quieras incrustar. Recuerda también que puedes utilizar un bloque de código en cualquier página de contenido de tu sitio web. ¿Quieres incrustar una publicación concreta en una barra lateral o en el pie de página? Adelante. Solo recuerda que es estático; no se actualizará cuando publiques contenido nuevo en tu feed de Instagram. Si quieres un feed actualizado con las publicaciones más recientes, para eso sirve la segunda opción.

Cómo insertar un feed de Instagram

Una técnica bastante habitual entre las marcas que hacen un uso intensivo de Instagram es mostrar un feed de Instagram en su página web. Puede tratarse de una barra situada en la parte inferior de la página que muestre las publicaciones más recientes, o bien puede estar integrada en la página de inicio. La idea es que muestre las X publicaciones más recientes de Instagram y permita al usuario de la página web hacer clic en ellas e interactuar con ellas cuando le apetezca. 

Es una forma excelente de animar a los usuarios de la web a visitar Instagram y de mostrar fotos de productos en acción, colecciones especiales y cosas por el estilo. Si lo combinas con las compras en Instagram (de las que hablaré más adelante), ¡incluso puedes utilizarlo para impulsar las ventas!

Para eso sirve el bloque de Instagram en Squarespace. Usarlo es bastante sencillo, pero hay que realizar una configuración inicial.

Paso 1: Conecta Instagram a tu cuenta de Squarespace.

Para ello, debes:

• Asegúrate de haber cerrado sesión en Instagram. Esto se debe a que la conexión iniciará sesión automáticamente en la cuenta que estés utilizando, lo que puede causar problemas si tienes varias cuentas.

• En Squarespace, haz clic en «Configuración» y, a continuación, en «Cuentas conectadas». Selecciona «Conectar una nueva cuenta» y elige «Instagram». Inicia sesión en la cuenta de Instagram correspondiente. Nota: si utilizas una misma cuenta de Instagram para gestionar varias cuentas (como una cuenta empresarial y una cuenta personal), es posible que tengas que crear un conjunto específico de credenciales para la cuenta de Instagram que quieras utilizar en exclusiva. De lo contrario, Instagram podría mezclar las fotos de ambos feeds.

¡Y ya está! Una vez que hayas vinculado tus cuentas, autorizarás a Squarespace a acceder a Instagram a través de su API para integrar diversas funciones. Por ejemplo, podrás añadir un icono para compartir en Instagram, importar contenido de Instagram a un bloque de Instagram e integrar la función de compras de Instagram.

Paso 2: Añade el bloque de Instagram.

Tendrás que decidir dónde quieres colocar el bloque con tu feed de Instagram. Puede estar en tu página de inicio, en una entrada del blog, en el pie de página, en la barra lateral o en cualquier otro lugar de tu sitio web donde se pueda insertar contenido. Solo ten en cuenta que es un widget bastante grande, por lo que podría desequilibrar tu diseño si no lo ajustas. A continuación te explicamos cómo añadirlo.

1. Coloca el cursor en el lugar donde quieras insertar el bloque.

2. En el menú, haz clic en Instagram.

3. Selecciona la cuenta vinculada adecuada en el menú desplegable de cuentas.

4. Elige el número de elementos que quieres mostrar. Puede ser cualquier número entre 1 y 20 publicaciones de Instagram.

5. Elige un diseño.

6. Aplica los cambios para guardar el bloque y guarda tu entrada.

Esto tiene algunas limitaciones. En primer lugar, Instagram mostrará cualquier contenido nuevo que se publique en el feed de Instagram. Por desgracia, no es posible filtrar por término de búsqueda ni por hashtag. Existen servicios de terceros que quizá puedan hacerlo, pero utilizan el método del bloque de código mencionado anteriormente.

En segundo lugar, tu bloque de Instagram solo mostrará la primera imagen de una galería o el primer fotograma de una publicación de vídeo dentro del bloque. Los vídeos no se pueden reproducir y no es posible navegar por las publicaciones de galería; el usuario tendrá que hacer clic para ir a Instagram y poder verlas.

En tercer lugar, IGTV, Stories y Reels no son compatibles. No aparecerán en tu sitio web de Squarespace; Instagram no transferirá ese contenido.

Elegir un diseño

Hay cuatro diseños principales para el bloque de Instagram. Todos ellos se pueden personalizar estableciendo diferentes niveles de relleno, la relación de aspecto y la forma en que se muestran las publicaciones. Son los siguientes:

Diseño de presentación de diapositivas. Se muestra una entrada cada vez, pero se pasa de una a otra de forma automática según un temporizador, con una duración de entre uno y diez segundos por diapositiva. También puedes utilizar los controles manuales.

Diseño de carrusel. Es similar a una presentación de diapositivas, salvo que muestra la primera entrada y el borde de la segunda, para indicar de forma más inmediata que hay varias entradas que mostrar. De nuevo, pueden pasar de una a otra automáticamente o mediante controles manuales.

Diseño en cuadrícula. Muestra una cuadrícula con las publicaciones incrustadas. Puedes elegir el ancho y la altura que quieras que tenga la cuadrícula. También puedes configurarlo para que, cuando un usuario haga clic en una publicación, esta se abra en una ventana emergente antes de redirigirlo a Instagram.

Disposición apilada. Las entradas se muestran una encima de otra en vertical, sin disposición horizontal.

Por lo general, un carrusel o una cuadrícula son la mejor opción para la mayoría de las empresas. No obstante, puedes elegir la que mejor se adapte a tus necesidades.

Si el bloque de Instagram no funciona correctamente, hay varias opciones para solucionar el problema que puedes probar.Squarespace las explica aquí, o también puedes escribirme y trataré de echarte una mano.

Compras en Instagram

Una de las cosas más interesantes que puedes hacer en Instagram es publicar una foto en la que aparezcan tus productos y etiquetarlos con la información de tu página de productos. Así se muestra el precio exacto e incluso permite a los usuarios comprar el producto directamente desde Instagram. Se llama «Instagram Shopping».

Y lo que es aún mejor, una vez que hayas integrado Squarespace e Instagram, ya tendrás esta función activada. El primer paso es configurar Instagram Shopping en tu tienda.

• Esta es la sección del centro de ayuda dedicada a Instagram Shopping. En ella se explica detalladamente cómo configurar todo desde la plataforma de Instagram. No voy a reproducirla aquí en su totalidad, ya que Instagram realiza cambios con tanta frecuencia que es mejor consultar directamente su centro de ayuda.

• Esta es la sección del centro de ayuda dedicada al etiquetado de productos en Squarespace. Debes tener una tienda con páginas de producto individuales para poder etiquetarlas, y necesitas un plan Commerce para acceder a esta función. Además, cada producto debe tener su propio ID, título, descripción y precio, que deben estar identificados con las etiquetas de datos correctas en tu código. Squarespace se encarga de gran parte del trabajo por ti, pero debes asegurarte de que toda la información esté disponible para que el catálogo de productos de Facebook/Instagram se sincronice.

Una vez que lo tengas todo configurado, podrás hacer cosas chulas como publicar una foto de alguien llevando cuatro de tus productos y etiquetar cada uno de ellos para que cualquiera a quien le guste el look pueda comprarlo, ya sea en su totalidad o por partes. ¡Es genial! Además, esto va más allá de lo que supone incrustar un feed de Instagram en tu página de Squarespace, así que no voy a profundizar más en ello por ahora.

Por suerte, el proceso general para vincular Instagram y Squarespace es bastante sencillo y a prueba de errores. No hay muchas cosas que puedan salir mal, por lo que solucionar los problemas suele ser bastante fácil. No obstante, te recomiendo encarecidamente que lo configures si tu empresa utiliza Instagram de forma habitual. Es un excelente elemento visual que añadir a tu página web y requiere poco mantenimiento, ya que Instagram publica el contenido nuevo directamente sin que tengas que intervenir.