Sigueme por RSS! RSS

Los emoticones en Blogger (otra alternativa)

Si, usar Blogger en comparación con otros sistemas similares y bajo las mismas condiciones, tiene sus ventajas, puesto que te permite acceder al código de la plantilla y así puedes modificarla a tu gusto, pero hay que armarse de paciencia cuando quieres retocarla un poco.

Sobre como usar emoticones en Blogger encontraras muchos temas al respecto, la idea es básicamente la misma, el código del emoticon se incluye cuando enviamos un comentario (eso queda almacenado en la base de datos) y una vez se lean, justo antes de que se impriman en la plantilla, se intercepta esa cadena de caracteres y se sustituyen esos códigos por su imagen correspondiente ¿que varia? la forma en que lo implementes.

Puedes ver el ejemplo del tema funcionando aquí. Al clickar un emoticon se genera el código correspondiente, solo basta copiarlo y pegarlo en el TEXTAREA (el campo) donde introducimos el comentario.

Para aplicarlo hacemos lo siguiente:

nota
Recuerda respaldar la plantilla antes de hacer cualquier modificación.

Nos ubicamos en la etiqueta de cierre </head> y antes de ella colocamos el siguiente código:
<!-- emoticones -->
<script type='text/javascript'>
//<![CDATA[
/* genera el codigo del emoticon */
function AddEmotEditor(sEmoticon)
{
   var emotcode = document.getElementById('emotcode');
   emotcode.value = sEmoticon;
}
/* reemplaza el codigo del emoticon por la imagen correspondiente */
function PutEmoticon(sCadena) 
{   
   var sEmotArray = new Array();

   sEmotArray[0]  = '[afro]';
   sEmotArray[1]  = '[angel]';
   sEmotArray[2]  = '[angry]';
   sEmotArray[3]  = '[azn]';
   sEmotArray[4]  = '[cheesy]';
   sEmotArray[5]  = '[cool]';
   sEmotArray[6]  = '[cry]';
   sEmotArray[7]  = '[embarrassed]';
   sEmotArray[8]  = '[evil]';
   sEmotArray[9]  = '[grin]';
   sEmotArray[10] = '[huh]';
   sEmotArray[11] = '[kiss]';
   sEmotArray[12] = '[laugh]';
   sEmotArray[13] = '[lipsrsealed]';
   sEmotArray[14] = '[police]';
   sEmotArray[15] = '[rolleyes]';
   sEmotArray[16] = '[sad]';
   sEmotArray[17] = '[shocked]';
   sEmotArray[18] = '[sleepy]';
   sEmotArray[19] = '[smiley]';
   sEmotArray[20] = '[tongue]';
   sEmotArray[21] = '[undecided]';
   sEmotArray[22] = '[wink]';
   /* aqui puedes seguir agregando codigos */

   var sImg,i,sDir,sExt;
   sDir = 'RUTA/';//ejemplo: http://MiDominio/imagenes/
   sExt = 'gif';//extencion de las imagenes


   for (i=0; i<sEmotArray.length; i++)
   {  // eliminamos los corchetes []
      sImg = sEmotArray[i].replace(/\]/g,'');
      sImg = sImg.replace(/\[/g,'');
      sImg = "<img src='" + sDir + sImg + "." + sExt + "' / >";

      // hacemos la sustitucion
      sCadena = sCadena.replace(sEmotArray[i],sImg);
   }
   // se imprimen los iconos
   document.write(sCadena);
}
//]]>
</script>

Seguido del script anterior colocamos el estilo:
<style>
#emotimg { /* este es el div que contiene las imagenes, los emoticonos */
   text-align:center;
   margin: 5px 0 5px 0;
}
#emotimg img { /* estilo para los emoticonos */
   cursor: pointer;
   border:none;
}
#emotcode { /* estilo para el input text donde se genera el code del emoticon*/
   background-color:#fff;
   border: 1px solid #c1930b;
}
</style>

Como habras notado son dos las funciones a utilizar, la primera "AddEmotEditor" se encarga de agregar el código del emoticon dinámicamente a la caja de texto, la segunda "PutEmoticon" cambia el código una vez leído, por la imagen que corresponda.

Ahora hay que colocar las imágenes antes del formulario.

nota
Recuerda que los emoticonos solo se mostraran si tienes activada la opción "Entrada incrustada a continuación" en el panel --> configuración --> comentarios.

Buscamos la siguiente linea dentro de la plantilla:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

y justo antes de ella, colocamos lo siguiente:
<!-- emoticones.. -->
<a name='emoticones'/><!-- ancla -->
<div id='emotimg'>
<img onclick='javascript:AddEmotEditor(&quot;[afro]&quot;);' src='RUTA/afro.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[angel]&quot;);' src='RUTA/angel.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[angry]&quot;);' src='RUTA/angry.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[azn]&quot;);' src='RUTA/azn.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[cheesy]&quot;);' src='RUTA/cheesy.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[cool]&quot;);' src='RUTA/cool.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[cry]&quot;);' src='RUTA/cry.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[embarrassed]&quot;);' 
src='RUTA/embarrassed.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[evil]&quot;);' src='RUTA/evil.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[grin]&quot;);' src='RUTA/grin.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[huh]&quot;);' src='RUTA/huh.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[kiss]&quot;);' src='RUTA/kiss.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[laugh]&quot;);' src='RUTA/laugh.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[lipsrsealed]&quot;);' 
src='RUTA/lipsrsealed.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[police]&quot;);' src='RUTA/police.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[rolleyes]&quot;);' src='RUTA/rolleyes.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[sad]&quot;);' src='RUTA/sad.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[shocked]&quot;);' src='RUTA/shocked.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[sleepy]&quot;);' src='RUTA/sleepy.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[smiley]&quot;);' src='RUTA/smiley.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[tongue]&quot;);' src='RUTA/tongue.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[undecided]&quot;);' 
src='RUTA/undecided.gif'/>
<img onclick='javascript:AddEmotEditor(&quot;[wink]&quot;);' src='RUTA/wink.gif'/>
<input id='emotcode' name='emotcode' onclick='this.select()' 
readonly='readonly' type='text'/>
</div>

Debes cambiar RUTA por la dirección donde se encuentran alojadas las imágenes.

Ahora debemos agregar la función que se encarga de sustituir los códigos de los emoticones.
Buscamos este trozo de código:
<b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span
<b:else/>
   <p><data:comment.body/></p>
</b:if>

y lo sustituimos por este otro:
<b:if cond='data:comment.isDeleted'>  
<script type='text/javascript'>
PutEmoticon(&#39;<span class='deleted-comment'><data:comment.body/></span>&#39;);
</script>
<b:else/>      
<script type='text/javascript'>
    PutEmoticon(&#39;<p><data:comment.body/></p>&#39;);
</script>
</b:if> 

El pack de imágenes del ejemplo la puedes descargar de aquí (descargado originalmente del apartado de Smileys de SMF).

2 comentarios: Suscribete a los comentarios por RSS

Itachi

no entiendo esta parte sDir = 'RUTA/';//ejemplo: http://MiDominio/imagenes/
se supone que es un blogger y no uso host propio. entonces no entiendo esa parte del dominio :S

cass

que uses blogger no te limita, puedes tener las imagenes alojadas en cualquier sitio. El hecho es que las imagenes apuntan a algún sitio y eso debes decirselo al script o nunca las mostrará.

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.