Muro social 
Feed Analytics 
Si alguna vez has pegado el código de incrustación de Instagram en una página, has visto que funcionaba bien durante unos meses y luego te has encontrado con un espacio en blanco donde antes estaba el feed, ya sabes de qué problema trata esta entrada.
La mayoría de las personas que gestionan un feed social en WordPress se topan con algún problema de este tipo. El feed se queda en blanco y no hay nada en el panel de control que permita solucionarlo. Además, no tiene en cuenta las fuentes de tu tema, por lo que siempre parece un poco fuera de lugar.
O bien sigue funcionando sin problemas durante meses, mientras que las entradas que contiene se van quedando cada vez más antiguas, porque actualizarlo siempre fue una tarea manual y esa tarea quedó relegada a un segundo plano.
Nada de eso se nota el primer día. Ambos enfoques parecen correctos el primer día.
Así pues, esta comparación se centra en el sexto mes. Lo que cada uno carga en cada visita a la página, lo que cada uno muestra cuando la fuente deja de responder y dónde se encuentra la solución cuando el feed falla: en tu panel de control o en el de otra persona.
En este artículo:
- Complemento de red social frente a widget de incrustación: la respuesta breve
- Un momento, ¿un widget incrustado es lo mismo que un feed de redes sociales?
- ¿Qué es lo que realmente falla cuando la alimentación ya funciona?
- He probado los feeds y los widgets de redes sociales: esto es lo que he descubierto
- ¿Te parece que el feed encaja bien en tu página web?
- Cómo un feed de un plugin sigue mostrándose cuando la plataforma no lo hace
- Entonces, ¿cuál deberías usar?
- La verdadera diferencia
Complemento de red social frente a widget de incrustación: la respuesta breve
Ambos tardan unos diez minutos en montarse. Por eso no tiene sentido comparar el tiempo de montaje.
Un plugin de feed social almacena los datos del feed dentro de tu instalación de WordPress y los muestra mediante el propio código de tu sitio web. Un widget incrustado muestra el contenido desde una fuente que no controlas.
Casi todo lo que sale mal después se remonta a esa única ruptura.
| Complemento de red social | Incrustar widget | |
|---|---|---|
| Dónde se almacenan los datos de la fuente | Dentro de tu instalación de WordPress | En los servidores de la plataforma |
| Lo que se muestra en la página | El código HTML y CSS de tu propia página web | Un bloque o un iframe cargado desde otra parte |
| Cuando no se puede acceder a la fuente | Sigue procesando a partir de datos locales | Espacio en blanco donde estaba la publicación |
| ¿Quién puede arreglarlo cuando se estropee? | Tú, en tu panel de control | Quien sea el dueño de lo que se ha roto |
Yo prestaría atención a esa última fila. Cuando un contenido incrustado deja de funcionar, lo normal es que el problema no se deba a tu sitio web, así que no hay ningún ajuste que puedas cambiar y no queda más remedio que esperar.
Un momento, ¿un widget incrustado es lo mismo que un feed de redes sociales?
Respuesta breve: no, son cosas diferentes, aunque ambas se utilicen para integrar contenido de redes sociales.
El código de incrustación de Instagram es el fragmento de código que se copia de una publicación concreta. Un iframe de YouTube o Twitter/X funciona de la misma manera: se obtiene el código de la plataforma, se pega en la página y la plataforma se encarga de mostrar el contenido.
Esa última parte lo explica todo. Lo que aparece en tu página no es más que un marcador de posición que indica al navegador dónde debe ir a buscarlo.
Así pues, cada vez que se carga una página, el navegador de tu visitante solicita la página a tu servidor, lee ese marcador de posición y, a continuación, realiza una segunda solicitud a un sitio completamente distinto.
Tu publicación solo aparecerá una vez que se haya completado ese proceso de ida y vuelta, ni un instante antes.
Un feed social funciona al revés. Un plugin se conecta a tu cuenta, importa tus publicaciones a tu instalación de WordPress y las almacena allí. Cuando alguien carga la página, el feed ya está ahí. No hay que ir a buscar nada ni esperar a nadie.
La otra diferencia radica en lo que se publica en la página en primer lugar. Una publicación incrustada es una sola entrada, que queda fija en el momento en que la pegas. Un feed es un conjunto de entradas en constante evolución que se actualiza automáticamente a medida que publicas.
Por eso se suelen comparar ambas opciones, pero rara vez se intercambian. Una sirve para mostrar una publicación concreta. La otra, para mostrar lo último que hayas publicado.
¿Qué es lo que realmente falla cuando la alimentación ya funciona?
Casi todos los propietarios de sitios web con los que hablo sobre los feeds describen la misma situación. La configuración fue bien. Meses más tarde, algo salió mal. Y cuando intentaron solucionarlo, se dieron cuenta de que en su panel de control no había nada que pudieran arreglar.
Hay tres versiones de esa historia que se repiten una y otra vez. Lo interesante no es el fracaso en sí mismo, sino quién fue capaz de hacer algo al respecto.
El espacio en blanco donde antes estaba el feed
Este es el que tiene la cola silenciosa más larga. El feed deja de actualizarse y lo único que queda es un espacio vacío donde antes estaban las publicaciones.
Nadie recibe una notificación cuando eso ocurre. WordPress no sabe que el feed ha desaparecido, porque, desde el punto de vista de tu instalación, no ha cambiado nada en tu sitio web.
Así que la gente se entera por casualidad. Un visitante lo menciona. O bien, meses más tarde, al editar esa página por un motivo que no tiene nada que ver, se dan cuenta de la omisión.
El feed que no tiene en cuenta tu tema
Esto no es un fracaso. Es una irritación que va creciendo poco a poco y acaba convirtiéndose en un proyecto.
El propietario se da cuenta de que el feed parece estar pegado ahí sin más. La fuente no es la adecuada, el color del enlace no es el correcto, las esquinas son demasiado redondeadas o no lo suficiente. Su página web tiene un estilo propio y está claro que el feed no encaja en él.
Así que intentan cambiarle el estilo, y ahí es donde se queda todo. El estilo no aparece en el personalizador de su tema ni en la configuración de los bloques, porque el código no es suyo. Ya venía con ese estilo desde dondequiera que se haya cargado.
El feed que se quedó obsoleto sin fallar
Este es el más complicado, y merece la pena separarlo del bloque en blanco.
Se ve un bloque en blanco. Es evidente que falta algo, así que tarde o temprano alguien lo notificará. Un feed desactualizado no muestra nada en absoluto. El feed se carga. Las imágenes se cargan. El diseño parece correcto.
Las publicaciones tienen solo tres meses.
Esto ocurre porque un feed incrustado no es un feed. Se trata, simplemente, de las entradas que incrustaste el día que creaste la página, y sigue siendo ese mismo conjunto de entradas.
Si publicas un vídeo nuevo, este se publica en tu canal, no en tu página web. La única forma de que aparezca en tu página es volver atrás, copiar otro código de incrustación y pegarlo allí.
Lo cual está bien durante el primer mes. En el octavo mes, se convierte en una tarea que se ha ido olvidando poco a poco y de la que nadie se da cuenta porque no ha pasado nada.
Me ha dado muy mala impresión. La web tiene una campaña en marcha, la página de inicio muestra un feed y la última entrada que aparece en él es de hace una temporada. Todos los visitantes lo han visto. Nadie lo ha señalado, porque no había nada que señalar.
Ese es el patrón común a los tres. El espacio en blanco, el estilo descoordinado, las entradas obsoletas. En cada caso, lo que había que hacer no era algo que tu panel de control pudiera hacer por ti.
Así que, o bien esperas a que pase, o bien te acostumbras a ello, o bien cambias la forma en que se muestra el feed en la página desde el principio.
He probado las fuentes sociales y los widgets: esto es lo que he descubierto
Hasta ahora, todo ha girado en torno a dónde se almacenan los datos de la fuente de datos. Esta es la sección en la que eso se traduce en cifras.
He creado dos páginas en un sitio de pruebas de WordPress. El mismo tema, la misma plantilla de página y la misma ubicación en el diseño. Una de las páginas mostraba elementos incrustados sin formato.
El otro utilizaba un feed del plugin Smash Balloon. El mismo contenido, el mismo número de entradas. A continuación, evalué ambos con PageSpeed Insights, Chrome DevTools y Pingdom.
Empieza por la página entera, porque esa es la parte que nadie se espera.
| Página de incrustación sin formato | Incrustación de un complemento | |
|---|---|---|
| Tamaño de la página | 8,4 MB | 1,1 MB |
| Solicitudes | 176 | 42 |
Una página de 8,4 MB no es una página lenta. Es una página que está descargando algo enorme, y el feed es lo único que hay en ella lo suficientemente grande como para justificarlo. Así que desglosé la carga útil por dominio para ver quién la estaba enviando realmente.
Página incrustada, tamaño del contenido por dominio:
| Dominio | Tamaño | Compartir esta página |
|---|---|---|
| www.youtube.com | 7,5 MB | 91.31% |
| fonts.gstatic.com | 292,3 KB | 3.56% |
| www.google.com | 211,5 KB | 2.58% |
| c0.wp.com | 71,4 KB | 0.87% |
Vuelve a leer la primera fila. YouTube aportó el 91,31 % de esa página. Mi instalación de WordPress aportó el tema, el texto y las imágenes que había subido, y prácticamente nada más en cuanto a peso. La página procedía en su mayor parte de los servidores de otra persona.
Página de fuentes del plugin, se ha contactado con los mismos dominios:
www.youtube.com—widgetapi.jscon un tamaño de 9 KiB yiframe_apitienen un tamaño de 4 KiB, y ninguno de los dos carga el reproductor hasta que alguien hace clici.ytimg.com— miniaturas, de entre 49 y 57 KiB cada una
Esa es toda la huella externa. La página del complemento sigue comunicándose con YouTube, pero no le transfiere la página. El reproductor aparece cuando un visitante solicita un vídeo, no antes.
DevTools ofrece la misma perspectiva desde el punto de vista de los terceros y añade la parte que realmente duele.
| Costes de terceros | Página de incrustación sin formato | Página de fuentes del complemento |
|---|---|---|
| Contenido de YouTube | 8.772 KiB | 457 KiB |
| Hora del hilo principal | 6.036 ms | — |
| Tiempo total de bloqueo | 4.510 ms | 0 ms |
La carga útil se ha reducido en torno al 95 %. Pero la cifra que destacaría es que el «Tiempo total de bloqueo» ha pasado de 4.510 ms a 0 ms, ya que esa cifra no tiene nada que ver con el tamaño de la descarga.
Eso significa que el hilo principal del navegador está ocupado ejecutando código JavaScript de terceros, tiempo durante el cual la página no puede responder a un toque ni a un desplazamiento. Cuatro segundos y medio en una página que «parecía estar bien».
Incluido en la puntuación que la gente realmente corre:
| Antes (incrustación en iFrame) | Después de (fuente del complemento) | |
|---|---|---|
| PageSpeed para móviles | 49 | 72 |
| PageSpeed para ordenador | 52 | 99 |
| Índice de velocidad móvil | 15.1s | 4.9s |
El Índice de Velocidad Móvil es el que hay que tener en cuenta. De 15,1 s a 4,9 s: esa es la diferencia entre una página que se va cargando mientras el usuario espera y una página que ya está prácticamente cargada cuando llega.
Es el mismo mecanismo que en los demás casos: el feed de la página incrustada se alojaba en servidores que no controlo, por lo que cada visitante pagaba el coste total de su descarga, y no había ningún ajuste en mi panel de control que permitiera reducir ese coste.
La página del plugin mostraba el feed a partir de los datos que ya se encontraban en la instalación de WordPress, por lo que lo único que quedaba por recuperar eran los archivos multimedia que el visitante solicitaba realmente.
Consejo de experto: Si quieres saber más, tenemos una guía sobre si los feeds de redes sociales ralentizan tu página web, en la que tratamos el tema con más detalle.
¿Te parece que el feed encaja bien en tu página web?
Esta es la pregunta que más me hacen sobre los elementos incrustados, y que suele plantearse con cierta frustración: ¿por qué esto no se parece en nada al resto de mi página web?
Las mismas dos páginas de prueba, con el mismo tema activo en ambas. He añadido un feed creado con Smash Balloon y lo he comparado con la incrustación manual que había hecho antes.
El feed del plugin ha adoptado el estilo del tema. Sus títulos utilizan la fuente que establece el tema, y sus enlaces utilizan el color que establece el tema, ya que ese código se muestra mediante la hoja de estilos de tu propia web, al igual que cualquier otro contenido de la página.
El feed incrustado no lo hizo. Se cargó con una tipografía y unos colores definidos en otro sitio, y los aplica independientemente de lo que indique tu tema.
Ese es todo el mecanismo. Un feed se adapta al estilo de tu sitio web. El otro se adapta antes de llegar a tu sitio web.
Cómo un feed de un plugin sigue mostrándose cuando la plataforma no lo hace
Todo lo que hay por encima de esta línea es el problema. Esta sección es el mecanismo que da respuesta al mismo. A continuación se explica cómo cada elemento se corresponde con un fallo del que ya has leído.
Guarda una copia local de tu feed
Con un plugin de feed social de alta calidad como Smash Balloon, dispones de un sistema de almacenamiento en caché de seguridad que guarda los datos de tu feed dentro de tu instalación de WordPress.
Cuando Instagram deja de funcionar o la API deja de responder, el complemento tiene contenido que mostrar. Tu feed sigue mostrándose en lugar de dejar un espacio en blanco.
Esa es la diferencia en la que se basa toda la entrada. La página del complemento tiene tus entradas almacenadas en la base de datos, por lo que tiene algo que mostrar cuando la plataforma no responde.
Pero la página incrustada tiene un marcador de posición y una dirección, y si no se recibe ninguna respuesta desde esa dirección, no se muestra nada.
No carga iframes de terceros
Smash Balloon muestra los contenidos sin cargar iframes de terceros que ralentizan las páginas.
Por eso, la página del complemento se conectó a menos dominios externos y ocupaba 1,1 MB, frente a los 8,4 MB de la página incrustada. No hay cadena de solicitudes porque no hay nada que recuperar.
Utiliza la carga diferida y el almacenamiento en caché inteligente
Las imágenes se cargan a medida que el visitante se desplaza hasta ellas, y los datos del feed almacenados en caché hacen que tu servidor no tenga que realizar una llamada a la API cada vez que se visualiza una página.
Este es el resultado del «Tiempo total de bloqueo»: 4.510 ms en la página incrustada y 0 ms en la página del complemento.
La solución está en tu propio panel de control
No hace falta saber programar. La configuración de los feeds se encuentra en el panel de administración de WordPress, junto al resto de elementos que gestionas.
Este es el aspecto que yo consideraría más importante. Incluso en el improbable caso de que algo salga mal, basta con abrir una pantalla a la que ya tienes acceso o ponerte en contacto con el equipo de asistencia. Con las integraciones manuales, te ves obligado a depender de una infraestructura que no controlas.
Alrededor de 1,75 millones de personas utilizan los feeds de Smash Balloon en sus sitios web de WordPress, lo cual es importante saber sobre todo porque significa que los problemas mencionados anteriormente se han producido y se han gestionado a gran escala.
Entonces, ¿cuál deberías usar?
La cuestión que lo decide no es cuál de los dos es más fácil de configurar. Es esta: cuando el feed falla, ¿la solución está en tu panel de control o en el de otra persona?
Así es como lo respondería, según lo que estés desarrollando realmente.
- Vas a incrustar una entrada o un vídeo en un artículo. Utiliza el código de incrustación de la plataforma. Se trata de un único contenido que no está pensado para actualizarse, por lo que la opción básica, aunque limitada, es la más adecuada.
- Tienes un feed en constante actualización en una página que quieres que sea rápida y que esté indexada. Utiliza un plugin. Las cifras de rendimiento que se muestran al principio de esta entrada son la razón: 8,4 MB frente a 1,1 MB, 176 solicitudes frente a 42. Un feed en tiempo real se carga en cada visita, por lo que, sea cual sea el coste, te supone un gasto repetido.
- No accedes a tu sitio web cada semana, o bien lo mantiene un cliente o un colaborador autónomo. Utiliza un plugin. El problema en este caso es la falta de aviso. No aparece ningún mensaje de error; el feed simplemente deja de mostrarse y la página sigue cargándose con normalidad.
- Estás gestionando feeds de más de una plataforma. Utiliza un plugin, y elige uno que las cubra todas. Tener códigos de incrustación distintos para cada sitio web implica que pueden surgir problemas de cinco formas diferentes. El «Social Wall» de Smash Balloon te permite crear feeds para todas estas plataformas e incluso combinarlos en un muro social.
La verdadera diferencia
A primera vista, ambas parecen bastante similares, pero la diferencia se nota el día en que algo sale mal. Cuando hice que la fuente de ambas fuentes de noticias quedara inaccesible, la página del plugin siguió mostrando entradas a partir de los datos almacenados en la instalación de WordPress.
La página incrustada no tenía ningún recurso local al que recurrir. Esa es la verdadera diferencia. Un enfoque consiste en mantener los datos del feed en tu propio servidor y la solución en tu propio panel de control. El otro consiste en mantener ambos en un lugar al que no tienes acceso.
Si gestionas un feed continuo, Smash Balloon Instagram Feed Pro es una excelente opción para empezar, y te permite crear feeds para la plataforma visual número uno del mercado.
¿Gestionas cuentas de más de una plataforma? El paquete «All Access» te permite gestionar Instagram, Facebook, YouTube y X desde una sola pantalla de configuración.
