Poner emoticons en Blogger estilo Facebook

AVISO

Este truco s?lo funciona en el sistema antiguo de comentarios. Si usas los comentarios anidados visita esta entrada de Vagabundia.

Las palabras no siempre son suficientes para expresar alguna emoci?n, sobre todo en el mundo cibern�tico donde todo tiene el sentido connotativo que cada uno le da. Es ah? cuando los emoticonos salen a nuestro rescate para poder reflejar alg?n estado de ?nimo o gesto que a veces es m?s f?cil expresar con una imagen.

Por esa raz?n muchos optan por usar emoticons en los comentarios del blog, y es eso mismo lo que haremos con esta entrada. Veremos c?mo agregar emoticons en el blog estilo Facebook, es decir, con los mismos emoticons que usa Facebook en su chat y muro. Puedes verlos funcionando en este blog de pruebas.

Estos son los emoticones que ver?s:

Estos emoticons (emoticones, emoticonos, smiles, o como le quieras llamar) aparecer?n s?lo en los comentarios, y para ello usaremos un script de Vagabundia que ingeniosamente hace que los emoticons s?lo se ejecuten en el cuerpo de los comentarios para no interferir con otras ?reas.

Primero entra en Dise?o | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)
cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9Gn_TMc4pHpqod6iIaw47sFDz8rX8LLbxVfElZSq3rLE9d9oD9ywY2FpEtjAL2TbDcOovJ_C9huYOUZ3xB7Vzkw-uR8lAdJVcRsIBLSPMF0Uld4zp2J6JDROh9CZMueMZCx3mtZgA0k/" />');

// :(
cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlAJZtrl2k3q4Rdlzun5J_AAjJHQ7tGmEAjTPtDDPLHR3jeXF0myUJbAO4LbReq45-iN1O8OyjwzyoBXmILZmY7jrr_89s63oKBXq4HLrgL7xix-1Jd4vk74y8RFpSdzmkDqKgsLcErA/" />');

// ;)
cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmC5t7qr9JyTQMEXBnijabehgkoQw4mnkoFuNSohllpzcbMVDjT4mu4hLI89Ky2HIa5QjX_Td1IWhBG4aUqc7PuZv0EoOe2-NC6r_aBYdHjxJ6BeOOSfixVwsOx05FBhUqReIRNBAKuE/" />');

// :P
cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXwYHa9nSK6vKyPG3dycMVINsMROouzwdENXPBs0OxahcQDe1KWzS5oKerSqg6cNN6itWd_7A6zX8WIX0fsCbrtV230SrI1ldmZPbb1ivnnPz_h5hoaNms1Zj_SoYWTcG_YlcbpCwncU/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXwYHa9nSK6vKyPG3dycMVINsMROouzwdENXPBs0OxahcQDe1KWzS5oKerSqg6cNN6itWd_7A6zX8WIX0fsCbrtV230SrI1ldmZPbb1ivnnPz_h5hoaNms1Zj_SoYWTcG_YlcbpCwncU/" />');

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp6yCocgWj82c8Tswdp_wUiqoOG_II3LnShxv_WG2hdXK33vdtnwBFrWkC9l7NBrDXogbxrepCLzfVLnUozUqw72g0bn6qPVa-GBnEyyflLNlpV03PVs_-kgJLwgRCJB_mZ_YLV5U8YII/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp6yCocgWj82c8Tswdp_wUiqoOG_II3LnShxv_WG2hdXK33vdtnwBFrWkC9l7NBrDXogbxrepCLzfVLnUozUqw72g0bn6qPVa-GBnEyyflLNlpV03PVs_-kgJLwgRCJB_mZ_YLV5U8YII/" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJLJmiH0qm9irjFOY0yrC-zkbzYCC83auKDevC6_vXx85a6vjMthRIRhofjkq0hEP7pK0ni2GG1Li1vC3OKCNMfUjlp5jcNNm_3zdUzoPhi_jBDchGkE2MWfb9Ne5U_MgHRZdTf5xlHM/" />');

// :S
cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBvQzkILcyNPzYItOVNrzZZAofUDpzYxvtffevAirUSrvvyV2rMmYzt-Ey4TEgC4QxcGx0ePQYA18Q_4x6nLe-sPLUzdfzuOkd2abgyLDEZlPUvfK4UuE4TdPbx9SZ0pgxyDx9VjZ4xY/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBvQzkILcyNPzYItOVNrzZZAofUDpzYxvtffevAirUSrvvyV2rMmYzt-Ey4TEgC4QxcGx0ePQYA18Q_4x6nLe-sPLUzdfzuOkd2abgyLDEZlPUvfK4UuE4TdPbx9SZ0pgxyDx9VjZ4xY/" />');

// X(
cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_4I_n3PPJzbwzNs46RYiNHkn5OnGMRy8Wu49BKraj5ipatx1XSKfmDdgDMqDDxDX94grpuUSanO15gfSzMZa61nBztWwX_Ct2KVGbPLyCTyvotNIP1muKjUwyUJInuPvPC8RneykYyoo/" />');

// :'(
cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPI_QY9uYoO2E1BAXNn1CWtch0aazZTBwVmi7YhpnzNHzPRm0zS7NLfN2F-wpeZ_JII6PE-IW9HH3TFJkVvscOP-k5NM6gAdrvgf4ziZumtmgS5RPyHArtKVCqzORBsIWvBPNZqYE5Yw/" />');

// 8)
cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPuB0Org5RQNp-QWyPG1DJ_YT_PFbQmjUVl72bvZsSrdAkzQ-c57U0pKNPKzkT282PQBQNdMPAMP6BFzYvTMm3vQcaQ0ZNWSDzHCo8cIZHxExgTpeyoVC7WII3Cs8ZClr9K0p_LnPA-M/" />');

// :O
cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCemLfrnFCmwhCua9yDMjryAynLK4pB_plyno5nunXLnS9-ADhv6KWo_Q7nvESDEuNcUuwrC-saxVYW37fLMCbctFXmk-Xy44FmUKwd5hS1hyphenhyphenq9mkBad4Vxn2Feb1c5_EhuugGvdJGSCA/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCemLfrnFCmwhCua9yDMjryAynLK4pB_plyno5nunXLnS9-ADhv6KWo_Q7nvESDEuNcUuwrC-saxVYW37fLMCbctFXmk-Xy44FmUKwd5hS1hyphenhyphenq9mkBad4Vxn2Feb1c5_EhuugGvdJGSCA/" />');

// :*
cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjk9BHsSoyTxEvOc1mOMDAVZx0VAQPvqSdS4DaeHvhstv8DLu9Q9qA4m5R1598PTfaUl0kU697HjDml3Wg39tz1alEBK64btxFtwXJjEeLehjeOwgjQznGxHvc6P-nI3vfsM7J4UrHpqI/" />');

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFKty0NMo_WP01wsqIXFHQq9pDGgfDVIBhpoWgvXEgYO1r-Y9hGLIQRKrdUMiroPyCVaA5Q19OyBPY2eXlZ0WPmJ_gspGfiBXu0yWOzvemg7c6DHgPiEfalGlyPPYG-_vwUUMI_YKxtk/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFKty0NMo_WP01wsqIXFHQq9pDGgfDVIBhpoWgvXEgYO1r-Y9hGLIQRKrdUMiroPyCVaA5Q19OyBPY2eXlZ0WPmJ_gspGfiBXu0yWOzvemg7c6DHgPiEfalGlyPPYG-_vwUUMI_YKxtk/" />');

// 3:
cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzcpo-x6-PAqdmS64myZvLY6tWsscYO9iaV0I94Lvh9s8abRZtjFOxve2KYDLyfWz-zOT7zusz7UYoy7ViXUaMTqdn3sRMiVOWk8CdzDN-3QBUzq4x2u_LoreyOw1ZICIj3skHem2kj8/" />');

bodyText.innerHTML = cambiarLetra;
}
//]]>
</script>
</b:if>

Ahora busca esta parte:

<p>
<data:comment.body/>
</p>

Y c?mbiala por este c?digo:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>

Luego busca esta l?nea:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Muy posiblemente la encontrar?s dos veces, justo debajo de la segunda que encuentres agrega esto, que es la imagen que se mostrar? arriba del formulario de comentarios:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHBslldEEPk2Yy5Q6pMln-aIi2sdUWwNOh8KlRHaM1Va5EHNAvAIGT3s9lWUwR5YOS9uhvaPsl-KcyJcuXuGKqSDoWHY1VpyVnaEeuzH7aYQ5E9ShLmEEmFNi7P4Hrb0kUatVt7-ec4g/'/>

Y listo, tendr?s estos emoticonos en tu blog. Estas im?genes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese peque?o borde alrededor de ellas.
O si lo prefieres puedes cambiar los iconos por los tuyos, s?lo busca las URLs de las im?genes del primer c?digo que corresponden a cada juego de caracteres, los he se?alado en color verde para que sean m?s f?cil de encontrar.

Que los disfruten