Clicky

Haz que las imágenes de tus artículos aparezcan siempre en el Feed y las redes sociales

imagen de artículos en redes sociales

Configuración de los artículos en el panel de administración de Joomla! y Wordpress

Después de una instalación de Joomla! para un nuevo sitio observé que las imágenes que insertaba en los artículos no aparecían en Facebook ni en Google+, cuando en los antiguos sitios web si que lo hacían con normalidad.

Bueno, es cuestión de memoria (la mia)... Cuando has hecho alguna configuración hace mucho tiempo (años) posiblemente te olvides de mantenerla igual en los nuevos sitios que has creado y, como consecuencia, habrá que hacer ajustes para que sus características funcionen en todos los casos.

En este tutorial vamos a ver cómo hacer que de las imágenes que incluímos entre el texto de nuestros post o artículos, bien en WordPress o Joomla!, aparezcan las miniaturas en las redes sociales y el los correos electrónicos que reciben nuestros usuarios a través de la suscripción gestionada por FeedBurner.

Configuración de los artículos en Joomla!

Antes de configurar correctamente el administrador de artículos de Joomla! como explico más abajo, utilice una solución provisional que es añadir la URL absoluta de la imagen en lugar de la relativa. Si usas algún editor de texto WYSIWYG (What You See Is What You Get) - (como JCE o JCK) - y has marcado en su configuración que cambie las URLs absolutas a relativas, al guardar el artículo el sistema quitará automáticamente la parte de la URL correspondiente al dominio, dejando solamente la ruta en que se encuentra la imagen.

Por ejemplo si nuestra imagen está en http://www.misitio.com/images/imagen1.jpg el código fuente resultante quedaría así: /images/imagen1.jpg y algunas redes sociales que incluyen las miniaturas de esa imagen no pueden leer su fuente porque no tienen la información completa del nombre de dominio (http://www.misitio.com).

Para solucionar esto, como digo de modo provisional, deberemos guardar el artículo en forma de texto con el modo editor desactivado. Me explico con unas imágenes:

Modo Editor activado

JCE activado en artículo de Joomla

Modo Editor desactivado [Toggle Editor]

JCE desactivado en artículo de Joomla (toggle editor)

Como vemos en esta última captura de pantalla, que es del último artículo que publiqué ayer, el src o ruta de la imagen es: http://www.xn--apaados-6za.es/images/images34/addineyev2.jpg , osea una URL absoluta.

Entonces, para que nos conserve esta URL absoluta como digo más arriba, deberemos "Guardar y cerrar" el artículo desde esta pantalla.

Ahora para la solución definitiva debemos hacer dos cosas:

1. Dentro del "Gestor de artículos" abriremos las "Opciones" con el botón de engranaje situado en la parte superior derecha. En la pestaña "Integración" marcaremos en "Sindicar el enlace" como Mostrar, "De cada noticia sinticada mostrar" como Texto completo y "Mostrar Leer más" como Mostrar:

integración de artículos en Joomla

2. Deberemos poner en cada artículo una etiqueta "Leer más", bien con el editor de artículos que utilicemos bien manualmente añadiendo este código: <hr id="system-readmore" /> , después (y esto es importante) de la imagen que queramos mostrar tanto en el Feed como en las redes sociales. De esta manera los suscriptores a nuestro Feed recibirán en su correo sólo la pequeña parte del texto del artículo que nosotros hayamos elegido (hasta la etiqueta "Leer más") con la imagen incluída.

A efectos de diseño y una mejor apariencia yo suelo colocar en primer lugar la imagen, luego un segundo titular con una etiqueta <h2> o <h3>, y posteriormente el texto, acotando el primer párrafo con la etiqueta "Leer más". Este sería un ejemplo del código:

<p><img style="margin: 3px auto; display: block;" title="eyeblaster addineyev2.html" alt="eyeblaster addineyev2.html" src="/images/images34/addineyev2.jpg" height="367" width="600" /></p>
<h3>Es un bloqueador de iframes, el archivo html contiene código para que algunos anuncios hechos en Flash y que se publican en un iframe funcionen adecuadamente</h3>
<p>Mientras observa las estadísticas de acceso a contenidos en Google Analytics me he dado cuenta de que algunos de ellos acceden a una página con la URL <strong>/eyeblaster/addineyev2.html</strong>. Ya que estaba bastante seguro de que no tenía una página de este tipo pensé por primera vez que mi sitio podría haber sido hackeado y comprobé esta página. Me llevó a la página de error 404 del sitio. Así que esa URL no existe, pero algunos de mis visitantes son redirigidos a la misma. El tráfico de esa página no era muy alto, pero pude ver que se ha ido incrementando hasta tener unas 26 páginas vistas por día.</p>
<hr id="system-readmore" />
<p>El siguiente paso fue averiguar de donde venían estos visitantes. La mitad de los visitantes procedían de una página anterior y la otra mitad desde el exterior. La distribución de las páginas anteriores era bastante al azar, por lo que definitivamente no está relacionado con las páginas específicas.</p>

Configuración de los post en WordPress

Básicamente el sistema es el mismo que el explicado para Joomla!, lo único que varía es la configuración en el Escritorio de WordPress.

Como en el caso anterior debemos hacer dos cosas:

1. Configuración del post

Nos vamos a "Ajustes" → "Lectura"

ajustes de lectura en post de WordPress

En el apartado "Mostrar, para cada entrada en el feed," elegimos Texto completo:

ajustes de lectura en post de WordPress Feed

2. En el post deberemos como en Joomla acotar la parte del texto que queremos reciban nuestros suscriptores con la etiqueta "Leer más", bien con tu editor de texto favorito o manualmente con este código: <!--more-->

Por motivos de diseño del sitio en Vídeos virales no coloco la imagen en primer lugar, sino una etiqueta <h2> o <h3> unos cuantos párrafos, luego la imagen y por último la etiqueta "Leer más", así:

<h2>Su madre adolescente y su novio se asustaron después de que ella quedó embarazada</h2>
Este es el dramático momento en que un bebé recién nacido fue encontrado por la policía después de que su madre adolescente lo abandonó en un inodoro.

Los agentes de la policía de la comisaría de Shenyang Xiazhuang en China recibieron un aviso sobre el bebé abandonado en un edificio de apartamentos después de que los vecinos lo oyeron llorando y sollozando.

La policía encontró al bebé desnudo y todavía cubierto de sangre en el inodoro con una pequeña cantidad de agua.

<a href="http://pirman.es/wp-content/uploads/2014/12/bebe-rescatado-inodoro.jpg" target="_blank"><img class="aligncenter wp-image-7640 size-full" title="bebé chino recién nacido es rescatado de un inodoro" src="http://pirman.es/wp-content/uploads/2014/12/bebe-rescatado-inodoro.jpg" alt="bebé chino recién nacido es rescatado de un inodoro" width="634" height="351" /></a>
<!--more-->
Testigos presenciales vieron cómo un agente de policía sacó al bebé llorando fuera de la taza. A continuación, recogió el cordón umbilical y la placenta del bebé junto con él.

Jesus_Caceres