Emoticones de Facebook en los comentarios de Blogger

Hola. ¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Bueno, hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata de cómo hacer para que cuando nos dejen un comentario, nuestros lectores puedan adornar sus comentarios con emoticones, pero con los que vemos en facebook. Es muy fácil de implementar. Y es válido en los comentarios anidados de Blogger.

( ↪ Ver DEMO)

Bueno, empecemos.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos </body> y justo encima de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Emoticones facebook en blogger
//diversas y variadas
// <![CDATA[
function emoticonComentario() {

if(!document.getElementById) {return;} // no soportado

bodyText = document.getElementById('comments');

cualTexto = bodyText.innerHTML;

// :)
cualTexto = cualTexto.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3tpyEiShNpSGvUmEBUSQF1F_EuCIS0l5GSp5qE1T0THUIf2b9YtIs-lKxuWdaBwhFJFo7OyOVzzUGnNRBKjCYuxA_D6A1KA1uDDmxPibFit2Y9mFTl-g_MJBBJ_142FSYNQ88RIJEB_u/s1600/1.png" />');

// :D
cualTexto = cualTexto.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCqONPaqX5SlfydRuPrn9_HybArE8U-AevchQ3hnp4U-npbnXlFAvAJd8OeXLg8ESZLn6pP_3a0Rif0l1PPnN7JlVal6aUpWLxkvG8IkcByF2lNBtB9OxYsgZ32KexVKbX50-WfnyEZqn/s1600/2.png" />');

// ;)
cualTexto = cualTexto.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY3MDykv0AdgGYONM_6Mh3z8nWNR2Gp0cpOhKUkJgXw7KxaQB4hbEBQiZ2EKz4JE6VmgnOY4KuhLiR3gIrKCpx62LwOQ8pn3K8NnunDKFEAe_I4_o4DbAu1DXN4r-xhip-DZrP0eZ3-UGO/s1600/3.png" />');

// A_A
cualTexto = cualTexto.replace(/A_A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTFywWuhbILCqU7eY8CguQjwDZ_tmBWesaOol2jPJiCr88cGnh4FKsDvjq23XEjHC4cMviZUfS1sQ_TzRWqZ9QCWfPtV_7FPzNp-e1dM_IxOlsZdmFk0Vr6RToNQf5rM_4XRAQuiDWBlW/s1600/4.png" />');

// XD
cualTexto = cualTexto.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBQApxkqIMJAzGJUHZlccAK3j0nsbs7iVWKAc5LDuBnPx-Ya7Pd4uIn-uvU-hm-BYGK9uLcWK5_tKWsuBO19r37kEMkw2sqvFyoJCGyCDIQns_VIasQSGqKehgyeTU702YKksTA4rNjolk/s1600/5.png" />');

// :3
cualTexto = cualTexto.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiIvp60lCayEB0QPK3JJziyGklOERscjCb3QRkrt1sGO3ZlT91OYroflPT04zYPpZmDiFvTgCBj07Tu5LTsqtYkYiDj1UNRqT-vnkFvbgcvef7b3gjfD8QwW64WnBKQplB6uM8FHq8PA_I/s1600/6.png" />');

// X(
cualTexto = cualTexto.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pFolmndHn77lKL_gFUXlA7Jlt9jx2g4fptz_4-yQQ_pbT8BHVXwxblvxJMk83Vv-2HpfGFCYiKjN2DfRmDSVj0Llt4pUhvlECWwHri1FYdswgDRFr1PmptP1Vq5WcOzGDhtncEoclTKX/s1600/7.png" />');

// :(
cualTexto = cualTexto.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKx_V5Vdr7Tux-QZv59-M3EQmRanzKxcuGpLaR2WABCyqH5SplUnQ2MkyD7FwIUCpHtBLziI9EbceOvJw_XvjaCjjCO4AuYkzwq_xusm8C6X38HYIP0FlgDu_FTQtYp4GQguhIcDGUo74o/s1600/8.png" />');

// :'(
cualTexto = cualTexto.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTozBz_lnP2mpUxnofKNfKGATkthv0fjcbsJS6xUTUcUPcenR3XBpcgMSWeinVqgjUD-o52U3B-AbovC-5g01wy-x_SGRg0KwF43T3YWjHPfR0tZPUvYqZxlHOw8E7yT-9tObtpltjL0R/s1600/9.png" />');

// -_-
cualTexto = cualTexto.replace(/\-_-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsjeF8AAPID_gUPsDDTb1_aTsyGD8Ah6fTu5Bv-g37w6YsHKVJBWOUa6dYVj1GjEZ5-Pp5cbAv7NWyOPGkSwUBrik1vK8NZ3XaZvaBH6SZ0Q8Zx-MAvqos_VCIrTQSZxj_0dz2TKABeFZ/s1600/10.png" />');

// :-
cualTexto = cualTexto.replace(/:\-/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPfG36omtjAWnXJOMC3ezpC1MNIVNam4Iw7b_Bgl3fcLoQn8JXYti2LwuG6qBXP5O36GF2FRlqE3UrXsT8__s5LzvwiAVjFnflsMkeiUUMvJFBlG_guOPKMYeDISEkizTdhGT7yly_PsM/s1600/11.png" />');

// 3:
cualTexto = cualTexto.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrJ0-aGg-eT737BXocMKtYn9nFJ3PDVhCOakFykhtVt_qSyTcYMXmtRqtc8uzQzMwqiY6dsMl0FEl2RfhrzX1QHWsfl_5jU6PCv4XLzsniurcrs5JrZKO73iNcYqW50CXsURRWGfIZdJQ/s1600/12.png" />');

// O:
cualTexto = cualTexto.replace(/O:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVT5lhSI3xaGh8hQjKUxiXhG47WPUjVzSmosK0UTsE7XrwVkjI1LiiMcGVmt0m4CI9SiEK8poy4b7xpSc1J2YwjMjj6-De6-IFv5llNz0R9De4FBFwmlp87UhQZobxRaTSCBBTYTOaW2_v/s1600/13.png" />');

// :*
cualTexto = cualTexto.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW9rg1OJrb7hpsRwfYB7A27hC0xy292Pgfsl9U7XDpbn43ZFMeU7P3bSeKnXk43F3RYqITLry3iblthJADkbcSWMWOXownX7MiHhDvcyUteTg6tifRaDtECZooxC0UD0xClxdHSTuBRlF/s1600/14.png" />');

// -3
cualTexto = cualTexto.replace(/\-3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbOTVBCRhuMkTHp8dNEz6ZwK-BsyiBIzpMCssPcs49lIk_9B0sDDMLZplKx2flYnrJJG-OQzmsnEAwb_P11tf1Sgca9ZF8pL1q9fme2jSHIsMUj4Dig16UorNzGVRvzfE-2eSfujFfxpp/s1600/15.png" />');

// :v
cualTexto = cualTexto.replace(/\:v/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhKvvrhZjJXWFqTH01PfZF2IeVnDkicjMQWjbjehRHVWEhC6ihHM4D4MZlJ1-L9AVAHcuDabh4tV8lx7JUkEUSIS5UUp7f3NPSh-Cg3jSe4JmjZq1D4zSQ01HUJp491NdUnkfyHoayPRa/s1600/16.png" />');

// :o
cualTexto = cualTexto.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb16894biAfsUIbLG9llJYFZzPr9CXaIats5pMkNhOeHyiXlGYmonMc-uCZzZinNEpYsVlgs3PvRkNjY7zSSrvpWrP8fLw9MBNRA2UjvSEKLdKvNqHgAik4jnoSq7iPv_t3AdaltGElwEk/s1600/17.png" />');

// 8-)
cualTexto = cualTexto.replace(/8-\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrtz1EL4Kq28kS48PEbMlirWcRUuHSpLzB1l9F-Bcakpp8tl4EK-qgXbI8afk9i88EmmDIZPdb0saVfEYPGmXliDPEEZpImE60SyhE9tYuyllzkv3is5FRYY-s9szIYzSCAQl3fL061c7/s1600/18.png" />');

// 8-|
cualTexto = cualTexto.replace(/8-\|/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYBPOSGcOLfx6koGcF9LFAy4aShx2PrxjGTUhBz2QXMGPInS2oChPtcS2uFSsdbdfWAqaXAW4cFAIzFGcib8v9dSSW7IE6wkuDoSKUi0lLV5JXEBlxT98dktiHB1oWzZsfmU-HpasPxwf/s1600/19.png" />');

// :P
cualTexto = cualTexto.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7S0BqaMuw-pjEhlFmRrdub_PDB9vJCIITtojqyGOAunaUgLGZJaeqapzLkRN815GXC7Un5IOEXfpGU34afFQI516lLvOXeZUwNJdqXADQWTuk5J6fd2fXMnO73Vo6DIw5gceNslOz4-W/s1600/20.png" />');

// O.o
cualTexto = cualTexto.replace(/\O.o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7n3XZlupmRGP9vH2Km5zExP8mMzvJfud1Hfa_8twZrbgcTRcCoP1Ecgwq6bytXsQWJwD1T1k2o9-2NUP6LaUNChN4nSKV6UzOCR-mg0illzkyc1tGNs8BDKYRdTEhfYjiWUsqAO3nc9m/s1600/21.png" />');

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

3.§ Ahora vamos a colocar la imagen que le indicará a nuestros lectores cómo pueden colocar un emoticón en su comentario. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos <p><data:blogCommentMessage/></p>. En la plantilla veremos que hay cuatro líneas de código iguales. Buscaremos la segunda y debajo, pegaremos este código:

<p style=' border:0px;margin:0px 10px 0px 100px; '><img src='URL-IMAGEN'/></p>

Donde dice URL-IMAGEN, lo reemplazaremos por una de estas dos imágenes. La primera es para lo que tienen en su blog un fondo blanco o claro; la segunda es para los que tienen en su blog un fondo negro u obscuro:

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXyLb1ghPp74hyphenhyphenfldpDdZluFs0bdqqn9FmCNnULCgxscAtWJMrDkIAjFNNyobSOwL5QD9sbAqIyGQJvYUuoItASzlZ39DAC__C2PdDbuDCB1q-uBfh_t4pmbAf9O3zsifAorfX5ytSCjp/s1600/diyva_jessica_motic_fondclaro.png

» Imagen para blog con fondo claro:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jMoIHQqeSA1rMzz1kI9TIMk3gF2jSMJRZTiz3yG2c3idUiSSdr3UhYVkv9UcddMme9pj2BnVq115blQEdedQJwRR_yVo0eTBMP6By7xyHD75VMbP0citUvoudbpHPvYN3hPHHO6SK2mR/s1600/diyva_jessica_motic_fondnegro.png

Para centrarlas o ubicarlas a la posición que queremos, bastará con cambiar los valores margin: 0px 10px 0px 100px.

4.§ Nuevamente, damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos nuevamente esta línea de código:
<p><data:blogCommentMessage/></p>.
Esta vez buscaremos la cuarta y debajo pegaremos lo siguiente:

<p style=' border:0px;margin:0px 10px 0px 200px; '><img src='URL-IMAGEN'/></p>

Reemplazamos URL-IMAGEN por la misma imagen que utilizamos en el paso anterior.

5.§ Ahora, para que los emoticones no aparezcan debajo de la caja de comentarios después de dejar el primer comentario, haremos lo siguiente. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos la siguiente línea:

document.getElementById(domId).insertBefore(replybox, null);

Y la reemplazaremos por esta línea de código:

document.getElementById(domId).insertBefore(replybox.parentNode, null);

6.§ Damos clic a Guardar y eso es todo. Espero que les haya gustado el tutorial. Pueden dejar sus comentarios o alguna duda que tengan. Que pasen un buen fin de semana.