0
(0)

Siendo usuarios de la plataforma Blogger, en ciertas ocasiones buscamos soluciones para poder implementar contenido, como es el caso de insertar un feed de WordPress dentro de un post.

Por eso, a continuación te presento un código que te puede ayudar a cumplir con dicho objetivo. Y además, podrás contar con posibles soluciones en caso de que tengas problemas.

 

Presentar un feed de WordPress dentro de un post Blogger

Es posible presentar un feed de WordPress dentro de un post de Blogger utilizando JavaScript. Para hacer esto, debes seguir algunos pasos:

1. Debes obtener el feed de WordPress:

Lo primero que necesitas es la URL del feed de WordPress que deseas mostrar en tu blog de Blogger.

Puedes obtener esta URL agregando /feed al final de la dirección del blog de WordPress, por ejemplo:

https://tusitio.wordpress.com/feed
(reemplaza el nombre de dominio)

También, si deseas hacerlo por categoría, puedes usar:

https://tusitio.wordpress.com/category/xxxxxx/feed
(reemplaza el nombre del dominio y las xxxxxx por la categoría)

Por cierto, quizás también te interese: Cómo obtener la URL de la página actual o sus partes con JavaScript

 

2. Crear una nueva entrada en Blogger:

Inicia sesión en tu cuenta de Blogger y crea una nueva entrada donde deseas mostrar el feed de WordPress.

Diseña la entrada de la manera que desees (según tu estilo), agrega el texto, imágenes y otros elementos que desees incluir.

 

3. Insertar el código JavaScript:

Ahora, necesitas insertar el código JavaScript que mostrará el feed de WordPress en tu entrada de Blogger.

Visualizando el post en modo HTML, ubica el lugar donde insertarás el código para presentar el feed.

Puedes usar el siguiente código:

<script>
// La URL del feed de WordPress
var feedURL = 'https://tusitio.wordpress.com/feed';

// Número de entradas a mostrar
var numEntradas = 10;

// Función para cargar el feed
function cargarFeed() {
var feedContainer = document.getElementById('feed-container');
var script = document.createElement('script');
script.src = 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(feedURL) + '&count=' + numEntradas + '&callback=mostrarEntradas';
script.async = true; // Agregamos async para asegurarnos de que el script se cargue de manera asíncrona.
document.body.appendChild(script);
}

// Función para mostrar las entradas
function mostrarEntradas(data) {
var feedContainer = document.getElementById('feed-container');
if (data.status === 'ok') {
var entradas = data.items;
var html = '';

for (var i = 0; i < entradas.length; i++) {
var entrada = entradas[i];
html += '<div class="entrada">';
html += '<h2><a href="' + entrada.link + '">' + entrada.title + '</a></h2>';
html += '<p>' + entrada.pubDate + '</p>';
html += '<p>' + entrada.description + '</p>'; // Usamos 'description' en lugar de 'content'
html += '<div style="clear:both;"> </div></div>';
}

feedContainer.innerHTML = html;
} else {
feedContainer.innerHTML = 'No se pudieron cargar las entradas del feed.';
}
}

// Cargar el feed cuando la página se carga
window.onload = cargarFeed;
</script>

<div id="feed-container"></div>

 

4. Insertar el código de estilo CSS:

Para configurar el CSS, a continuación podrías insertar estas líneas de estilo (las cuales podrás modificarlas según tu tema).

<style>
.entrada {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}

.entrada img {
width: 99%;
height: auto;
/* float: left; */ /* activalo si deseas reducir el width */
margin-right:7px;
}
.entrada h2 {
font-size: 20px;
color: #333;
}
.entrada p {
font-size: 16px;
color: #666;
}

@media (max-width:720px) {
.entrada img {
width: 99%;
height: auto;
float: none !important;
}
}

</style>

 

5. Hacer las modificaciones según el feed que necesites presentar:

En el código Javascript, asegúrate de personalizar la URL del feed de WordPress (var feedURL) y el número de entradas a mostrar (var numEntradas) según tus necesidades.

// La URL del feed de WordPress
var feedURL = 'https://tusitio.wordpress.com/feed';

// Número de entradas a mostrar
var numEntradas = 10;

OJO: Te darás cuenta de que está predeterminado presentar 10 entradas. (Si pruebas con menos, posiblemente no se presente nada, o mejor dicho depende de como se haya configurado la cantidad de post en el feed de wordpress que elijas)

Además, puedes modificar el código HTML dentro de la función mostrarEntradas para personalizar cómo se muestran las entradas.

 

6. Guardar la entrada:

Después de insertar el código JavaScript y el código de estilo CSS, guarda la entrada en Blogger.

 

7. Probar la entrada:

Abre la entrada en tu blog de Blogger para asegurarte de que el feed de WordPress se muestra correctamente.

 

Listo, si no hay problemas, deberías poder ver la secuencia de post según el feed que hayas definido. Ya solo bastaría que lo acondiciones de acuerdo a tus requerimientos.

 

El Script

✔ El código utiliza script.async = true; para asegurarse de que el script se cargue de manera asíncrona, lo que puede ayudar a evitar problemas de bloqueo de la página.

✔ En la función mostrarEntradas(data), se utiliza entrada.description para usar la descripción del elemento, ya que algunos feeds pueden no tener contenido completo en el campo “content”.

✔ Se agrega un manejo de error simple para el caso en que no se puedan cargar las entradas.

Espero que estos ajustes ayuden a que el feed de WordPress se muestre correctamente en tu entrada de Blogger. 

 

Ante posibles problemas

Si has insertado el script en un post de Blogger utilizando el modo HTML y has cambiado la URL del feed de WordPress, pero aún no se muestran los datos, es posible que haya un problema en el código o en la configuración del feed.

Asegúrate de seguir estos pasos para solucionar el posible problema:

Verifica la URL del feed de WordPress: Asegúrate de que la URL del feed de WordPress sea correcta y funcional, es decir, que esté accesible. Puedes probar la URL del feed en un navegador para asegurarte de que devuelve contenido.

Si has cambiado el nombre de dominio en https://tusitio.wordpress.com, verifica que esté configurado correctamente en el código. Asegúrate de que no haya errores tipográficos en la URL.

Cambia el valor de número de entradas: Como se dijo anteriormente, depende de como se haya configurado la cantidad de post en el feed de WordPress que elijas. Por lo general se configura para presentar una lista con 10 post.

Errores de sintaxis en el código: Revisa el código JavaScript que has insertado en tu entrada de Blogger. Asegúrate de que no haya errores de sintaxis, como comillas faltantes o errores tipográficos. Puede darse el caso de que sin querer lo hayas modificado o se alteró por alguna razón.

Acceso cruzado (CORS): Los navegadores aplican políticas de seguridad de acceso cruzado (CORS) que pueden impedir que el script cargue datos desde un dominio diferente al de tu blog de Blogger.

Asegúrate de que el servidor de WordPress permita solicitudes CORS o utiliza un servidor proxy para cargar el feed.

Error en la API RSS2JSON: El código Javascript que hace el trabajo, utiliza la API RSS2JSON para convertir el feed de WordPress en un formato que se puede mostrar en tu blog de Blogger.

Asegúrate de que la API RSS2JSON esté funcionando correctamente. Puedes probar la URL de la API directamente en un navegador para ver si devuelve datos.

Verifica la consola de desarrollador: Abre la consola de desarrollador de tu navegador para ver si hay errores en la carga del script. Los errores de JavaScript se mostrarán en la consola y te darán pistas sobre lo que podría estar fallando.

 

Si aún tienes problemas

Si sigues enfrentando problemas para mostrar los datos del feed de WordPress en tu entrada de Blogger. Si has verificado todos los aspectos mencionados anteriormente y aún no se muestran los datos, es importante asegurarse de que el feed de WordPress sea accesible y esté configurado correctamente para permitir solicitudes externas.

Puedes realizar las siguientes verificaciones adicionales:

Seguridad en el servidor de WordPress: Asegúrate de que el servidor de WordPress no esté bloqueando solicitudes externas al feed. Algunos servidores tienen restricciones de seguridad que impiden que otros sitios web accedan a sus feeds.

Comprobar el feed directamente: Abre la URL del feed de WordPress en tu navegador para asegurarte de que el feed es accesible y devuelve datos. Asegúrate bien de que la URL del feed sea correcta y que el feed esté publicado y disponible.

Verificar configuración CORS: Si tienes acceso al servidor de WordPress, verifica la configuración CORS para permitir solicitudes desde el dominio de tu blog de Blogger.

Probar con otro feed: Si es posible, intenta con un feed RSS diferente para ver si el problema persiste. Esto te ayudará a determinar si el problema está relacionado con el feed o con la configuración específica de tu blog de WordPress.

Si después de realizar estas verificaciones aún no puedes mostrar los datos del feed, es posible que haya una configuración específica o un problema en tu entorno que requiera una solución más detallada. En ese caso, considera buscar ayuda de un desarrollador web o un experto en blogs para solucionar el problema específico de tu configuración.

 

Respecto a la API

La API RSS2JSON prácticamente no pertenece a una empresa específica, sino que es un servicio en línea proporcionado por un grupo de desarrolladores independientes.

Es una API pública que convierte feeds RSS en formato JSON, lo que facilita su uso en aplicaciones y sitios web.

No tiene una empresa o entidad propietaria conocida, ya que es una herramienta de código abierto y de acceso público.

La API RSS2JSON ha sido ampliamente utilizada en el desarrollo web para convertir feeds RSS en un formato que se puede manejar de manera más sencilla a través de JavaScript.

Sin embargo, debes tener en cuenta que por ser un servicio público, su disponibilidad y funcionamiento pueden variar con el tiempo. Por este motivo, siempre es aconsejable tener un plan de respaldo o considerar la posibilidad de utilizar otras soluciones si necesitas mayor estabilidad y control sobre tus feeds RSS en el futuro. 

Prevenir es algo lógico, solo basta con pensar, por ejemplo, en que la naturaleza puede hacer desaparecer localidades donde se encuentran servidores y con ello dejar fuera de servicio muchas cosas. Inclusive que, por alguna razón, la API sea eliminada intencionalmente.

 

🌐  Siempre estás invitado a preguntarle a los “grandes” google o bing, en caso de que requieras más información.

Espero que esta modesta publicación, te ayude a mostrar el feed de WordPress en tu blog de Blogger, y sobre todo que cumpla con las expectativas de lo que buscabas.

Déjame tus comentarios, estaré complacido de responder.

 

Quizás te interese:

 


Vicente Ramírez Administrator

Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.

follow me
Vicente Ramírez

Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.

Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.

En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta  también ver la vida en el proceso de las plantas y el respeto a los animales.

Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing.  Aunque sobre varias  temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.

Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo.  Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión). 

Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.

Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja una respuesta