Desde hace tiempo quería implementar los empoticonos en los comentarios de mi blog, pero nunca lo había hecho, ya que lo que se hacía era cargar una gran cantidad de imágenes por separado. Mi idea era poder usar sprites.

De esta manera nó solo lo he conseguido, sino que he reducido muchísimo la función que propuso en su día JMiur, haciéndola compatible para todos sus métodos.

Si se usan comentarios anidados

Para usarlos tenéis que copiar esto justo después de <data:post.commentHtml/>. Luego acordaos de copiar el CSS (más abajo)


<script type="text/javascript">
//<![CDATA[
var emoticonActual = 0;
function emoticonComentario(el) {
var elem = typeof el === "string" ? document.getElementById(el) : el,
texto = elem.innerHTML,
// :) :-) :] :-] // :'-( :(( :'( // :( :[ :-( :-[ // :P :-P // :D :-D xD // :$ :-$ // ;) ;-) ;] ;-] // :-I :| :-| // :-X // :O :-O // |O |-O ¬¬ // :S :-/
regs = [":\\)|:-\\)|:\\]|:-\\]",":'-\\(|:\\(\\(|:'\\(",":\\(|:\\[|:-\\(|:-\\[",":P|:-P",":D|:-D|xD",":\\$|:-\\$",";\\)|;-\\)|;\\]|;-\\]",":-I|:\\||:-\\|",":-X",":O|:-O","\\|o|\\|-o|¬¬",":S|:-\\/"],
clases = "sonrisa lloro triste lengua riendo oops guino neutral secreto sorpresa enfadado confuso".split(" "),
i = 0,
reg
for(; regs[i]; i++){
reg = new RegExp("("+regs[i]+")(\\s|$)", "gi")
texto = texto.replace( reg, function(){emoticonActual++;return "<i class='icon "+ clases[i] +"' id='icon"+(emoticonActual).toString()+"'><\/i> "})
}
elem.innerHTML = texto
}
//BORRAR SI NO SE USAN LOS COMENTARIOS ANIDADOS
//En el caso de mi blog sirven porque tengo un <p> en cada comment-body
function emot_anidados(){
var comentarios = document.getElementById('comments-block') || document.getElementById('comment-holder' ) , i = 0;
comentarios = comentarios.getElementsByTagName('p')
for(; comentarios[i]; i++){
emoticonComentario(comentarios[i])
}
}
emot_anidados()
//]]>
</script>

Si no se usan

En ese caso recomiendo leer la entrada de Vagabundia. sólo tenéis que cambiar la función emoticonComentario que él propone por la mía.

Importante! El CSS

Si hemos hecho esto es para usar una sóla imagen, pero la imagen la tenemos que poner mediante CSS, que tendréis que copiar encima de </b:skin>:


i.icon{
width:15px;height:15px;
background-image:url(http://4.bp.blogspot.com/-tHBJlzvjCt0/T3nFzbRzdWI/AAAAAAAAAPM/lIYAw-pjYyE/s1600/csg-4f79c33464324.png);
background-repeat:no-repeat;
display: inline-block;
}
i.icon.confuso{ background-position: 0 0; }
i.icon.lengua{ background-position:-15px 0; }
i.icon.enfadado{ background-position: -30px 0; }
i.icon.lloro{ background-position: -45px 0; }
i.icon.guino{ background-position: -60px 0; }
i.icon.neutral{ background-position:-75px 0; }
i.icon.oops{ background-position: -90px 0; }
i.icon.riendo{ background-position: -105px 0; }
i.icon.secreto{ background-position: -120px 0; }
i.icon.sorpresa{ background-position: -135px 0; }
i.icon.sonrisa{ background-position: -150px 0; }
i.icon.triste{ background-position: -165px 0; }

36 pensamientos en “Una forma más eficiente de usar emoticonos en los comentarios

  1. Imagen de Clara el dijo:

    Espera un segundo… Yo tengo una pregunta: Para poner la carita, ¿has tenido que poner todo lo anterior? Es que no lo pillo… Soy un poquito lenta, y de efecto retrasado…
    Y otra pregunta: Por lo que yo he entendido, esto es para comentarios. Me imagino que también se podrá usar a la hora de hacer entradas en el blog, ¿verdad?

    • Imagen de Emilio Cobos Álvarez el dijo:

      No, tu pones eso en la plantilla del blog (en plantilla » edición de html ) y desde entonces en todos los comentarios, con poner una carita (:P :S etc) te lo reemplaza con ella.

      Para las entradas habría que cambiarlo un poco, pero se puede hacer, luego sigo con el comentario…

    • Imagen de Emilio Cobos Álvarez el dijo:

      Siguiendo…
      La forma no sería difícil, pero podría llevar algunos problemas, sobre todo al sustituir texto que no querías reemplazar, así que la forma fácil sería poner algo así desde el HTML de la entrada (arriba a la izquierda)
      <i class="icon unaclase"></i>

      cambiando "unaclase por las clases que hay arriba (confuso,lengua, enfadado, sonrisa…)

  2. Imagen de Clara el dijo:

    Vale. Me ha pasado algo muy gracioso: resulta que tengo el teclado del Cola Cao, y cuando le doy a los emoticonos, aparece una ventana llena de programación… Pero no tengo ni idea de cómo usar la tuya o la del Cola Cao… :(

    • Imagen de Emilio Cobos Álvarez el dijo:

      You're just seeing the result. Every emoticon here is a <i/> tag using the CSS sprites magic, so you save space and http requests, making your page faster, because you download just an image, instead of downloading 15 or 20 little images :)

      I'm really grateful to Karla for linking to my blog :D

  3. Imagen de Fito el dijo:

    Eres un genio por conseguir agregar emoticonos al blog usando sprites, felicidades. En mi caso, no he podido ponerlos, no sé por qué será, pero no funciona. He agregado correctamente el script y el CSS, lo he comprobado, recomprobado y vuelto a comprobar :S Pero no hay forma… ¿Por qué podría ser? Gracias.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Acabo de ver tu blog y funciona bien, el problema es que no se ven porque no tiene el CSS aplicado, así que deja el icono vacío.

      Pega el CSS encima de </b:skin>, o si no, pégalo justo encima de donde pegaste el script entre dos etiquetas <style> y </style>

    • Imagen de Fito el dijo:

      Pegué el CSS justo encima de ]] hace unos días, me di por vencido porque no aparecía, cuando comenté exponiendo mi duda lo tenía agregado :S pero al tú decirme que no lo tenía, lo revisé y efectivamente, no estaba. No entiendo por qué ocurre eso, nunca he tenido problema con el CSS. El caso es que gracias a tu ayuda he aprendido que un bloque CSS también se puede agregar entre las etiquetas style y justo de esa forma me ha funcionado. Muchas gracias y ¡vivan los emoticonos! Jajajaja. Saludos ;)

  4. Imagen de alma el dijo:

    Tengo la plantilla bastante tocada y es posible que sea por eso, pero no me salen :(

    Lo he revisado todo y nah…que no quieren.

    En cualquier caso muchas gracias :D, insistiré

    Un saludo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.