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/AVvXsEgK4AMIiYKmB6Rg9kgyjjPFbxLsNHOaHXj2eoACmi80N0jT88183ZHKvvlmDNkoi2ZWZhyphenhyphen1W_-Ad4ninc0ULwnk6f_wjDdZnQwWRKYwaHZaCoGk6U3EdTO39MYnjHWL3-UKQ6BFQQiAV3g/" />');

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

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

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

// :D
cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxLYh4CiW3WGz4bRefbTQs2o6GLCP66uotbJdMzFh918SMH-egHNxsamoW_-8pBfyHP3NgIlXzsxY8RF2Ek_hLmnE6u-7Mq_1d-mZQpqg341J1lbwrdrmp9N-HcjbxUOzknxiH520J5s/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxLYh4CiW3WGz4bRefbTQs2o6GLCP66uotbJdMzFh918SMH-egHNxsamoW_-8pBfyHP3NgIlXzsxY8RF2Ek_hLmnE6u-7Mq_1d-mZQpqg341J1lbwrdrmp9N-HcjbxUOzknxiH520J5s/" />');

// XD
cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLnf_Y9ivW8rJun0YdUiBtZWszzNeJXYxExU6-10ri8l7ky_B-MwQY9idG5g3rrG8GGu4IjgG4yNSwdGjOP8qEiS0w1oNICHSD8MJd3WVSGDjLUHAdu9ippBlG7aI6N-gI1a5EiljvyA/" />');

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

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

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

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

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

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

// :A
cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDld30lgF7Szi_M6QOoMFIUEYf-EvdhYa8C6dSBIUMOla2x-CUtebz5xrDA3-4bW0Qhhnt-Luy5duyIzzpOhqqcIYsL641iQtamIH11Vu8pB4SzvEgIvR8IhE6hE0Vmgefve5N45E__VA/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDld30lgF7Szi_M6QOoMFIUEYf-EvdhYa8C6dSBIUMOla2x-CUtebz5xrDA3-4bW0Qhhnt-Luy5duyIzzpOhqqcIYsL641iQtamIH11Vu8pB4SzvEgIvR8IhE6hE0Vmgefve5N45E__VA/" />');

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

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/AVvXsEgJgJybLaFYfu7eJqRvor4SnqS9M2VXO8EtraaUEHTtoF-KI3BDKXplzYK-lEMXVfk9OA3_8WfQdrIL8g0z3DFeaXrfaL3V8Y1VzBsOKyOiftKDuFQERuLyBLQxKg7FZaUljdeSRZ2aMRU/'/>

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