Blogger y los comentarios (3)

Este script ya no funciona debido a los cambios realizados por Blogger.

Partiendo de un intercambio de ideas con Gem@ respecto de los posibles hacks a utilizar en la sección de comentarios del blog, aquí van dos posibilidades más.

La primera, está funcionando a manera de prueba en Gem@ Blog. Se trata de una modificación de un truco original para las viejas plantillas de Blogger y que permite colocar la imagen del perfil del comentarista siempre y cuando este tenga una cuenta y ese perfil esté habilitado.

ACTUALIZACION URGENTE:

Hace segundos, acabo de ver que Gem@ ha publicado la explicación de la primera de las explicaciones aquí mostradas así que, también pueden visitar su sitio y leer el artículo respectivo. Por lo que he visto, no hay diferencias; aunque utiliza otra versión del script, el resultado será similar.

Para implementarlo, vamos a la Plantilla / Edición HTML y marcamos la casilla Expandir elementos. Alli, debemos encontrar este código y agregar las dos líneas que se indican en negrita:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class="commentphoto" style="float: right;"/>

<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

<div style="clear: both;"/>

</b:loop>
</dl>

Dependiendo de nuestras preferencias, podemos cambiar la alineación de las imágenes, mediante la propiedad correspondiente:

<div class='commentphoto' style='float: right;'/>

alineará la imagen del perfil a la derecha de los comentarios y:

<div class='commentphoto' style='float: left;'/>

a la izquierda.

Ahora, deberemos agregar el script, utilizando el que proveen o descargándolo y subiéndolo a un servidor propio:

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Aunque el script no necesita ser modificado, hay tres lineas que nos permiten personalizarlo:

La primera línea establece la imagen por defecto que se usará, es decir, la que veremos en el caso que el comentarista no tenga un perfil en Blogger.

Las otras dos, establecen el ancho y el alto máximo de las imágenes a ser mostradas.

BloggerProfiles.noimage = 'archivo';
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;

Es probable que, dependiendo del blog, deberemos ajustar algunas de las propiedades CSS, ya sea utilizando la clase especial de la imagen:

.commentphoto { }

o las clases generales:

.comment-author { }
#comments-block .comment-author { }

¿Dije dos posibilidades? Sí, la otra intenta responder al último comentario de Gem@, "lo ideal y rebuscado es que la foto no sea la del perfil sino otra cualquiera".

Bueno, aquí va una forma bastante sencilla pero que, obviamente, requerirá que nosotros definamos esas imágenes y a quienes corresponderá cada una de ellas. Todo esto, lo hacemos mediante JavaScript así que primero que nada, justo antes de </head>, agregamos lo siguiente:

<script type='text/javascript'>

// lista de comentaristas
var nComentarista = new Array();
nComentarista[0] = "anonimo";
nComentarista[1] = "nombre1";
nComentarista[2] = "nombre2";

// lista de imágenes
var nAvatar = new Array();
nAvatar[0] = new Image(16,16); nAvatar[0].src = "URL_imagen0";
nAvatar[1] = new Image(16,16); nAvatar[1].src = "URL_imagen1";
nAvatar[2] = new Image(16,16); nAvatar[2].src = "URL_imagen2";

function mostrarAVATAR(cual,quien) {
for( i=0; i&lt;nComentarista.length; i++ ) {
if(nComentarista[i] == quien) {
document.getElementById(cual).style.backgroundImage='url('+nAvatar[i].src+')';
return;
}
}
document.getElementById(cual).style.backgroundImage='url('+nAvatar[0].src+')';

}
</script>

Donde la lista de comentaristas contendrá los el nombre del autor que queremos identificar tal como aparece en Blogger (por ejemplo JMiur o Gem@). Cada uno, tendrá un número consecutivo (nComentarista[numero]) y reservaremos el número cero (nComentarista[0]) para la imagen por defecto, es decir, aquella que se mostrará cuando el comentarista no posea una imagen definida por nosotros.

La lista de imágenes está asociada con la anterior, contendrá dos partes, la primera establece el ancho y el alto de la imagen (en este ejemplo 16x16) pero puede ser cualqueir otro valor e incluso, valores diferentes entre si:

nAvatar[numero] = new Image(ancho,alto);

La segunda parte es la que contiene la dirección URL de cada una de las imágenes.

nAvatar[numero].src = "URL_imagen)";

Ahora, agregaremos alguna propiedad CSS en la clase comment-author o la crearemos si es que no existe:

<style type='text/css'>
#comments-block .comment-author {
.......
background: transparent url() no-repeat scroll 0% 50%;
padding: 10px 0 0 24px;
}
</style>

Aquí también habrá que personalizar esas propiedades para que se ajusten a nuestro blog.

Por último, buscaremos este código en la plantilla:

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

y, simplemente, agregaremos una llamada a la función del script para que esta coloque la imagen correspondiente:

<script>
mostrarAVATAR('comment-'+'<data:comment.id/>' ,'<data:comment.author/>')
</script>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>