Emoticones Facebook en Blogger
Hola amigos, en esta entrada les voy a enseñar a agregar los emoticones (script y css propio) de Facebook en los comentarios de su blog. Lo vamos a hacer mediante un script y css. Explicaré todo para que sepan cómo es que funcionan los emoticones, desde el css hasta el script. Muy bien, ¡empecemos a implementarlo! En primer lugar, se tienen que ir a Blogger – Su Blog – Plantilla – Diseño – Editar HTML. Les enseñaré dos maneras para poner el script y el css.
Primero, buscan:

]]></b:skin>

Y justo arriba de esa línea agregan los siguientes estilos:

.emoticon {background-image:url(https://sites.google.com/site/filesimges/img/emoticones.png);background-size:auto;background-repeat:no-repeat;display:inline-block;height:16px;width:15px; position:relative;
}
.feliz {background-position: 0 -1px;}
.triste {background-position: -237px -1px;}
.guino {background-position: -16px -1px;}
.lengua {background-position: -32px -1px;}
.feliz2 {background-position: -49px -1px;}
.raro {background-position: -65px -1px;}
.asombro {background-position: -82px -1px;}
.confundido {background-position: -99px -1px;}
.llorando {background-position: -116px -1px;}
.enojado {background-position: -134px -1px;}
.beso {background-position: -151px -1px;}
.lentes {background-position: -167px -1px;}
.angel {background-position: -184px -1px;}
.diablo {background-position: -202px -1px;}

Como ven, no utilicé ID’s, ya que quiero usar solo una imagen para los emoticones, y utilizarla como background. Una ventaja es que solo uso una imagen; y otra, es que se podrán probar los emoticones. Para que salga cada emoticón, utilizo esta imagen: https://sites.google.com/site/filesimges/img/emoticones.png y solo coloco un atributo “bakground-position”, que hace que en cada clase cambie de posición la imagen de fondo. Bueno, ya está el css. Ahora tienen que agregar el script, y para esto, buscan:

</body>

Justo arriba de eso, agregan el siguiente código javascript:

<script>
//<![CDATA[
/* Emotíconos para los comentarios anidados en blogger.
*/
function emoticonComentario() {
if(!document.getElementById) {return;} // no soportado
bodyText = document.getElementById(‘comments’);
emoticon = bodyText.innerHTML;
// :) :-) :-]
emoticon = emoticon.replace(/:)/g,'<span class=”emoticon feliz”></span>’);
emoticon = emoticon.replace(/:-)/g,'<span class=”emoticon feliz”></span>’);
emoticon = emoticon.replace(/:-]/g,'<span class=”emoticon feliz”></span>’);
// :p      😛
emoticon = emoticon.replace(/:p/g,'<span class=”emoticon lengua”></span>’);
emoticon = emoticon.replace(/:P/g,'<span class=”emoticon lengua”></span>’);
// :(
emoticon = emoticon.replace(/:(/g,'<span class=”emoticon triste”></span>’);
// 😉
emoticon = emoticon.replace(/;)/g,'<span class=”emoticon guino”></span>’);
// XD       xD      xd      Xd  
emoticon = emoticon.replace(/XD/g,'<span class=”emoticon raro”></span>’);
emoticon = emoticon.replace(/xD/g,'<span class=”emoticon raro”></span>’);
emoticon = emoticon.replace(/xd/g,'<span class=”emoticon raro”></span>’);
emoticon = emoticon.replace(/Xd/g,'<span class=”emoticon raro”></span>’);
// :s       :S
emoticon = emoticon.replace(/:s/g,'<span class=”emoticon confundido”></span>’);
emoticon = emoticon.replace(/:S/g,'<span class=”emoticon confundido”></span>’);
// x(       X(
emoticon = emoticon.replace(/x(/g,'<span class=”emoticon enojado”></span>’);
emoticon = emoticon.replace(/X(/g,'<span class=”emoticon enojado”></span>’);
// :'(
emoticon = emoticon.replace(/:'(/g,'<span class=”emoticon llorando”></span>’);
// 😀       :d
emoticon = emoticon.replace(/:D/g,'<span class=”emoticon feliz2″></span>’);
emoticon = emoticon.replace(/:d/g,'<span class=”emoticon feliz2″></span>’);
// 8)
emoticon = emoticon.replace(/8)/g,'<span class=”emoticon lentes”></span>’);
// :O       😮
emoticon = emoticon.replace(/:O/g,'<span class=”emoticon asombro”></span>’);
emoticon = emoticon.replace(/:o/g,'<span class=”emoticon asombro”></span>’);
// :*
emoticon = emoticon.replace(/:*/g,'<span class=”emoticon beso”></span>’);
// :A       :a
emoticon = emoticon.replace(/:A/g,'<span class=”emoticon angel”></span>’);
emoticon = emoticon.replace(/:a/g,'<span class=”emoticon angel”></span>’);
// 3D       3d
emoticon = emoticon.replace(/3D/g,'<span class=”emoticon diablo”></span>’);
emoticon = emoticon.replace(/3d/g,'<span class=”emoticon diablo”></span>’);
// :E       :e
emoticon = emoticon.replace(/:E/g,'<span class=”emoticon feliz3″></span>’);
emoticon = emoticon.replace(/:e/g,'<span class=”emoticon feliz3″></span>’);

bodyText.innerHTML = emoticon;
}
//]]>
</script>
<script type=’text/javascript’>
emoticonComentario();
</script> 

Listo, ya tienen el script. Se los dejo de esta manera para que puedan editarlo. Lo que hace este script es lo siguiente: por ejemplo, en la carita feliz, reemplaza :) por la carita feliz. Y bien, ya tienen los emoticones en los comentarios de Blogger.
Ahora pasaremos a la segunda manera de agregarlos. Buscan:

</body>

Y justo arriba agregan:

<!– INICIO EMOTICONES –>
<link href=’https://dl.dropboxusercontent.com/s/n0353hqmxx6jcsk/emoticones.css’ rel=’stylesheet’ type=’text/css’/>
<script src=’https://dl.dropboxusercontent.com/s/piia6yt1icm8tfi/emoticones.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
        emoticonComentario();
  </script>
<!– FIN EMOTICONES –>  

Y listo, de esta forma también tendrán los emoticones de Facebook en los comentarios de Blogger. La única diferencia es que si quieren modificar el script, deberán descargarlo y volver a subirlo a algún host desde el cual se puedan ver los archivos sin descargarlos, por ejemplo, Dropbox.
Bueno, esto es todo en este tutorial, espero que les sirva y que lo usen. Para ver el DEMO, revisen el comentario de prueba en esta misma entrada.