A continuación, te explicaremos las posibles causas de que las imágenes de tu feed de Instagram no se carguen y muestren un área en blanco, cuadros grises u otro problema con las fotos que no se cargan.
Cómo llegar
Para resolver el problema, pruebe los siguientes pasos:
- Revisa la sección "Posibles causas" a continuación para ver si se aplica alguna. Después de realizar cualquier cambio en tu sitio, asegúrate de borrar cualquier caché de host, sitio web o navegador local antes de volver a comprobar el feed.
- Si las posibles causas enumeradas no ayudan, prueba a cargar el archivo JavaScript de la fuente de Instagram antes que otros archivos mediante el ajuste "Encargar JavaScript en el encabezado" O mediante el ajuste "Corrección de carga de temas AJAX", ambos en Fuente de Instagram > Ajustes > Avanzado > Avanzado Avanzado.
- Desactiva la siguiente configuración: Feed de Instagram > Encuentros > Avanzado > Carga de imágenes con JavaScript.
Posibles causas
1) Hay un problema con su fuente
Puede volver a conectar su fuente en la página de configuración del plugin haciendo clic en el botón Añadir fuente > Conectar o utilizando el botón de reconexión en cualquier fuente no válida.
2) Los archivos del plugin no están siendo incluidos en tu página
Lo más probable es que esto se deba a que a su tema de WordPress le faltan las funciones de WordPress necesarias para añadir archivos CSS y JavaScript a la parte superior e inferior de sus páginas. Todos los temas deberían incluir las funciones wp_head y wp_footer, necesarias para que los plugins puedan añadir sus archivos a la página. Puede añadirlas haciendo lo siguiente:
- Abra el tema pie.php file and adding the following directly before the closing </body> tag:
<?php wp_footer(); ?> - Abra el tema header.php file and adding the following directly before the closing </head> tag:
<?php wp_head(); ?>
3) Hay un error de JavaScript en su sitio web que impide que se ejecute el archivo JavaScript del complemento.
Para comprobarlo, haga clic con el botón derecho del ratón en su página, seleccione "Inspeccionar elemento" y, a continuación, haga clic en la pestaña "Consola", o bien seleccione la opción "Consola JavaScript" en las Herramientas de desarrollo de su navegador.
Si se produce un error de JavaScript en su sitio, aparecerá en rojo junto con el archivo JavaScript que lo causa, como se muestra a continuación:
Para obtener más información sobre la depuración de errores de JavaScript en su sitio, consulte este artículo de WordPress.
4) El feed que intentas mostrar no tiene entradas
Si intentas mostrar un feed en el que no se han publicado entradas, es posible que sólo aparezca un mensaje de error del administrador o que no aparezca nada. Una vez que añadas una publicación a la cuenta conectada, el feed debería mostrarse normalmente tras comprobar si hay nuevas publicaciones.
5) El shortcode que está utilizando es incorrecto
Es posible que haya un error en el shortcode que está utilizando o que falte algún argumento necesario. Por ejemplo, en lugar de utilizar:
[instagram-feed hashtag="#myHashtag"]
Prueba a añadir el shortcode predeterminado haciendo clic en el botón "Incrustar" de la configuración del feed:
[instagram-feed feed="1"]
A continuación, asegúrate de que has configurado los ajustes de la fuente en Instagram Feed > Todas las fuentes > Opciones de fuente (icono del lápiz) para esta fuente.
6) Está utilizando una versión obsoleta de jQuery
El plugin Instagram Feed Pro requiere la versión actual de jQuery (3.6.4 a partir de septiembre de 2024) incluida en WordPress para funcionar. Algunos temas pueden desactivar el archivo jQuery predeterminado de WordPress y cargar el suyo propio, lo que puede causar este error. Póngase en contacto con el desarrollador del tema para ver si pueden actualizar el archivo para usted.
7) Tiene una extensión del navegador o un complemento que está causando un problema
Algunas extensiones y complementos del navegador causan problemas con el feed. Prueba a desactivarlos para ver si el feed empieza a mostrarse.
8) Estás filtrando demasiados mensajes
Si está utilizando la configuración mostrar/eliminar mensajes que contengan estas palabras o frases, también conocida como "No mostrar entradas que contengan" / "Mostrar sólo entradas que contengan"u otras herramientas de moderación, es posible que estés filtrando demasiadas publicaciones para que el feed muestre alguna. Instagram no envía mensajes de un usuario específico que también tienen un hashtag específico por lo que el plugin solicitará todos los mensajes de la cuenta de usuario o hashtag de alimentación y luego se filtrará sobre la base de "No mostrar publicaciones que contengan" / "Mostrar sólo las publicaciones que contengan". Ver este post para algunas posibles soluciones para solucionar esto.
9) Sólo no funciona el diseño de alimentación Carrusel
Su tema puede estar cargando jQuery dos veces. WordPress, por defecto, carga jQuery en la versión requerida. Si está utilizando una versión personalizada de jQuery, asegúrese de decargar el script por defecto. En algunos casos, puede que necesites ponerte en contacto con el desarrollador de tu tema para eliminar implementaciones incorrectas de jQuery.
10) La carga lenta está activada
Si tu tema de WordPress o un plugin está utilizando la carga perezosa, entonces puedes tener un problema donde las imágenes se muestran en blanco o como un pequeño cuadrado. La mayoría de los conflictos de carga lenta se pueden resolver yendo a Instagram Feed > Ajustes > Avanzado y desactivando los ajustes de carga de imágenes de JavaScript.
Diagnóstico con herramientas de desarrollo (avanzado)
A continuación te explicamos cómo diagnosticar problemas comunes con las herramientas para desarrolladores de Chrome. Para utilizar las herramientas para desarrolladores de Chrome, haz clic con el botón derecho del ratón en una página de tu sitio en la que aparezca la fuente de Instagram y selecciona "Inspeccionar" o utiliza la combinación de teclas ctrl+shift+i en Windows o ⌥⌘i en Mac. Cambia a la pestaña "Consola" para comprobar la consola javascript.
a) No hay errores en la consola
Añade el comando sbi_init(); a la consola y ejecútelo (pulse intro).
Si se produce un Uncaught ReferenceError sbi_init no está definido, lo más probable es que el archivo javascript para el feed falte en la página. Ver #3 abajo refiriéndose a "wp_footer". Si está utilizando un plugin que optimiza/concatena/minifica los archivos JavaScript (como autoptomize), puede que tenga que reiniciarlo.
Si aparece el feed, probablemente esté utilizando un tema ajax. Consulte esta página. También es posible que estés usando un plugin concatenador/optimizador/minificador javascript que necesita ser refrescado.
Si no ocurre nada (no se muestra ninguna entrada adicional) y no hay un icono giratorio, es posible que la configuración de tu feed no esté devolviendo ninguna entrada, posiblemente debido al filtrado con "Mostrar sólo publicaciones que contengan"o todas las publicaciones realizadas en el feed de hashtags son privadas. Véase el punto 5 más abajo. También es posible que falte el archivo CSS de la página. Ver #3 en referencia a wp_head(). También es posible que quieras asegurarte de que tu token de acceso es válido si estás recibiendo el mensaje "No se pueden mostrar las fotos de Instagram".
b) Aparecen uno o más errores javascript en la consola.
Añade el comando sbi_init(); a la consola y ejecútelo (pulse intro).
Si el feed aparece, el error proviene de otros plugins o de tu tema y está impidiendo que el feed se cargue. Prueba a desactivar otros plugins y/o tu tema para averiguar cuál es la causa del error.
Si aparece el error jQuery is not defined, o bien su tema o un plugin está cargando jQuery demasiado tarde o posiblemente ha eliminado el archivo jQuery de la fuente de la página.
Si aparece el error "Access to XMLHttpRequest at ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' ..." es posible que su "Dirección de WordPress" y "Dirección del sitio" no coincidan con la página en la que se encuentra el feed. Esto incluye el protocolo ("http" vs "https"). Estos ajustes se encuentran en el menú General del panel de control.
Si aparece el error "jQuery.ajax is not defined" puede que estés usando una versión "slim" de jQuery. Las versiones "slim" no contienen el método ajax que nuestro plugin utiliza para recuperar entradas.
