En este Tutorial de Cómo poner Instagram en WordPress vamos a aprender a mostrar imágenes de Instagram en nuestra página web o blog.
Instagram es una de las redes sociales más utilizada a día de hoy y algunas de las ventajas de utilizarla en estrategias de Marketing Digital son:
- Tiene más de 400 millones de usuarios.
- Utiliza contenido visual.
- La interacción con el usuario es muy alta.
- Casi exclusivamente para móvil.
- Sirven para construir o reforzar marcas personales o empresariales.
- Puedes mostrar tus servicios y productos de una forma humana o con personalidad.
- Se utiliza para empatizar con tus los seguidores y clientes.
- Y la que razón que más me gusta a mí, puedes perder el día mirando memes, ¡Jajaja!
Primero, vamos a ver cómo poner Instagram en WordPress sin utilizar plugins y después veremos los plugin para poner Instagram en una página web más utilizados.
Nota: para mostrar Instagram en WordPress en algunos casos es necesario tener el perfil de Instagram público.
Cómo poner Instagram en WordPress sin plugins
Si queremos que se muestre un post de imagen o video de Instagram dentro de una entrada de WordPress sin utilizar plugins, lo podemos hacer de varias formas:
Copiar la URL del post de Instagram y pegarla en el editor de texto de WordPress.
WordPress reconoce automáticamente las URL de Instagram, e inserta automáticamente la imagen o video de Instagram si pegamos la URL del elemento en el editor de texto de WordPress.
La URL que tienes que copiar, es la que aparece cuando abres una imagen de Instagram.
Una vez pegada la URL de WordPress, se insertará la imagen de Instagram automáticamente.
Utilizando el código de inserción de Instagram.
Otro método para insertar las imágenes o videos de Instagram en WordPress es utilizando el código de inserción de Instagram.
Este código de inserción lo podemos encontrar pulsando el botón de opciones (En la imagen punto 1º, botón de tres puntos) dentro de una imagen en Instragram.
Se nos abrirá un cuadro de diálogo, donde podemos copiar el código y elegir si se incluye el título de la imagen en la inserción.
Una vez copiado el código, debes copiarlo en el editor de texto en la parte de HTML para que funcione.
Si te interesa, puedes ver información más detallada para personalizar este código y muy útil para los desarrolladores en https://www.instagram.com/developer/embedding/
Páginas web externas para generar el código que muestre el perfil de Instagram
Instawidget es una página web donde podemos utilizar un generador de código para mostrar nuestro perfil de Instagram en nuestra web.
Con este sencillo generador de códigos podemos personalizar la sección de Instagram, tamaño, columnas, bordes, fondos y hastags, entre otras, y generar el código.
Después, solo hay que copiar y pegar el código en la parte de HTML del editor de texto o ponerlo en un Widget de HTML si queremos mostrar Instagram en la barra lateral de WordPress.
Usar este método tiene como desventaja que al hacer clic en una imagen no te redirige a instagram, si no que te redirige a Instawidget donde se mostrarán tu imagenes de Instagram.
Plugins de Instagram para WordPress
Otra manera de añadir Instagram en WordPress es usando plugins. De esta manera podemos controlar más la personalización del módulo de Instagram en WordPress
Existen multitud de plugin de Instagram para WordPress repletos de opciones, vamos a ver dos.
Instagram Feed
Instagram Feed es uno de los plugin más utilizados para poner Instagram en nuestra página web.
Su versión gratuita permite incrustar un Feed de Instagram mediante un Shortcode que muestra nuestro perfil usuario y podemos personalizar el feed con una lista de atributos para los Shortcode o utilizar CSS.
La versión Premium desbloquea otras opciones para personalizar el feed de Instagram y algunas opciones para mostrar las imágenes dependiendo del hastag o la localización entre otras opciones.
Para configurarlo, hay que enlazar nuestro perfil de Instagram con el plugin mediante el botón azul “Log in and get my Access Token and user ID” y pegar el User ID que se genera y después pegamos el Shortcode en cualquier parte de nuestra web.
WP Instagram Widget
El plugin más sencillo para poner Instagram en WordPress, al instalarlo se creará un nuevo Widget de Instagram en WordPress.
Este Widget Apenas tiene opciones, y el plugin es tan simple que no tiene ni CSS personalizado, al ser tan simple se necesita saber CSS para darle estilo y en sus opciones, se echa en falta la opción de poder configurar columnas en el Widget sin CSS.
Conclusión
Si necesitas poner Instagram en WordPress, hay muchas maneras para hacerlo y muchas son gratuitas.
A mí, me gustan las opciones del generador de códigos web y es el que suelo utilizar para intentar no sobrecargar la web con plugins.
La importancia de esta red social es muy grande de cara a las marcas personales y grandes marcas, y no hay que descuidar un canal tan utilizado como este.
Si tienes contenido visualmente atractivo, no lo dudes, debes de estar en Instagram.
Si todavía no sabes cómo utilizar Instagram puedes leer esta “Guía completa de Instagram“
Otros tutoriales de Redes Sociales para WordPress
- Tutorial de Monarch plugin de botones sociales premium
- Tutorial de Add To Any Share Buttons plugin de botones sociales gratuito
- Tutorial de Revive Old Post plugin para enviar los post automáticamente a las redes sociales
- Tutorial de Click to Tweet plugin para crear citas de retuit
Gran artículo Gerardo!
La verdad que me ha resultado muy útil y fácil.
Muchas gracias.
Pensaba que sólo se podía poner Instagram con plugins. Gracias por el tip, lo pongo ya mismo.
Muchas gracias, Gerardo! Muy bien explicado!
Muy bueno Gerardo! Yo me quedo con la de copiar la URL y que WP haga el resto jajaj pero es bueno conocer que existen más opciones!!
Ey!!! Por fin sé como insertar fotos de insta en mi wordpress!! Gracias por hacernos todo un poco más fácil!!
Maravilloso post para poner Instagram en WordPress, lo estaba buscando y me ha solucionado el problema. Enhorabuena!
Genial! Algo así me imaginaba, pero no estaba seguro. Al final, sin plugin, se puede insertar igual que un tweet no? Es decir, la URL la reconoce WordPress automáticamente o bien lo embebes pegando el código en la pestaña del HTML.
He usado Instawidget para incrustrar en html gracias a tu artículo. Muchas gracias!!!
Genial artículo Gerardo!!! muy completo y útil. Yo personalmente prefiero insertar la URL, aunque wordpress no te da la opción de modificar el tamaño del post. ¿Cómo podemos modificar el tamaño de la imagen que incrusta la URL?. Gracias. Saludos, Rubén
Hola Rubén!!
Usando el codigo de insercion de instagram puedes fijarte en el código y modificar el ancho y alto. Y con css tambien se podria hacer.
Buen artículo Gerardo!
Una pregunta, para temas de carga de la web, he leído que si tienes el widget fijo se aumenta considerablemente el tiempo de carga y a efectos de SEO puede ser negativo.
A veces uno no sabe ya si meter widgets si dejar la web pelada… Espero tu consejo!
Un saludo
Hola Diego! Tener una web rápida es bueno por muchas razones, es verdad, pero los Widget no son pesados ya que son simples cajas de contenido, lo que es pesado son los elementos que insertamos con el widget.
Desde luego si metes una galería de 100 imágenes la velocidad se verá afectada pero si los usas con normalidad pocos ralentizan.
Es decir, que los puedes utilizar perfectamente, yo soy de los que piensan que la optimización no debe condicionar el diseño de la web a grandes rasgos, y en el caso de que existan una ralentización de la web, primero implementar técnicas de optimización y después si es necesario eliminar elementos.
Hola Gerardo, gracias por el artículo, no sabía que WP también detectaba las url’s. Sabes si esto sigue siendo así? Ya que por mucho que pegue la url de la publicación de instagram se queda tal cual, solo la url, y no carga la imagen como si que hace cuando pegas una url de youtube.
Al igual se ha quedado un poco loco mi wordpress, probaré más tarde a ver si hay más suerte.
Gracias!
Hola Sandra, lo acabo de probar y sigue funcionando, pegas la url en un post y se convierte en formato de instagram, si no te funciona es un misterio!
Hola Gerardo. Gracias por tu ayuda. Yo instalé Instagram Feed, y lo coloqué en mi página de wordpress con UX Builder, se genera el espacio para instagram pero me aparece una leyenda que dice: » Instagram has returned invalid data». Podrás ayudarme? Gracias!
«Instagram has returned invalid data» este error solo lo he visto una vez cuando instagram cambio algo de su API y tuve que esperar a que el plugin se actualizará. Puedes esperar o probar otro plugin para ver si se soluciona el problema.
Buenas Gerardo! Estaba buscando precisamente lo contrario: cómo generar un post en WordPress con el contenido de Instagram, pero tu artículo es genial. Me gusta tu forma de transmitir.
Un saludo!
Yo que tengo una duda. Creo un artículo en wordpress donde meto el código de inserción que dan en instagram. Si veo el blog desde ordenador el articulo sale con el video seleccionado de instagram, pero si lo veo desde el móvil aparece en blanco y dice: ver esta publicación en instagram. ¿alguna solución? Gracias
Hola Gracias por el articulo muy bueno , aunque no he encontrado la solucion a lo que me aqueja en este momento ..No soy desarroollador ni programador.
Tengo una tienda de reparaciones de relojes y algo de bijouxteria y la Pagina Web en Word Press
el site tiene los widgets de instagram y otras redes sociales pero a veces se postea en instagram y se actualiza el site pero otras veces no…
que puede estar pasando??? tienes algunos tips que puedan ayudarme ??? Gracias
Puede que todo esté bien configurado, y que la cache de tu navegador o de la web que cachea el feed de la red social y entonces no ves los cambios al instante, seguramente los nuevos usuarios que lleguen a la web y no tengan la caché si verán el feed actualizado.
Un saludo
Oye, lo de pegar solo la URL y en automático lo reconoce, aun sigue funcionando?? porque a mi no me sale 🙁
Help me…
Gracias