Mang bộ Emoji của Facebook Messenger vào Blogspot thật dễ dàng

Tác giả Vũ Trường

Xuất bản

Emoji (hay emoticon) còn gọi là biểu tượng cảm xúc, hay nói ngắn gọn là mặt cười đó. Nó góp phần làm cho cuộc trò chuyện Facebook hay Zalo bớt nhạt hơn, hoặc đơn giản không muốn rep tin nhắn chỉ việc quăng cái icon mặt cười cute :) vào là xong :v
Live Demo

Đề xuất: Chèn ảnh, video từ Youtube vào phần nhận xét của Blogspot
Bài viết hôm nay mình sẽ mang bộ emoji của Facebook Messenger vào thread comment của Blogspot, để phần bình luận bớt nhạt nhòa hơn, hơn thế nữa cũng thể hiện được tình cảm, cảm xúc của người bình luận. Chỉ bằng một đoạn javascript dùng hàm replace từ text thành ảnh, chúng ta có thể dễ dàng thêm biểu tượng cảm xúc emoji vào phần nhận xét của Blogger.

Cách thực hiện

Thêm toàn bộ javascript bên dưới vào trước thẻ </body> trong template.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<!-- đk chỉ áp dụng cho trang bài viết và trang tĩnh -->
<style>.bacsiwindows_emoticon {width: 20px; margin: -5px 0 0!important; vertical-align: middle;pointer-events:none}</style>
<!-- css định dạng lại kích thước và vị trí mặt cười -->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comments");
theText = bodyText.innerHTML;
theText = theText.replace(/\/\=r/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbwnbxoWaClNAxKngxRNVPyQ4Sd3z58uV3StLE9qwmDOLIjxaggjGITynU2PpQ9cp6GC1uAcbCNi9exe6rf00fUXaQabiLRG1j05bEj6kkoTf27sEKL9n9l3Xs-ykz6NXeuUquUxgs3_S/s1600/icon-cuoi-khinh-------BacSiWindows-Com.png'/>");
theText = theText.replace(/:\)\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItvUjwy3evCkE6rqp8Yhka6rxX5Rh-LKOGb10CiPJiNgpQozaEGGusnG-WeTekWk-h5NVIyAy9jnlZ32Ct-GbLrNzm7ehpp014OX-HgcGooDKpuXX0HdKZ_iFwVnZ0tkV4OPVD5-euHgg/s30/cuoi-chay-mo-hoi-_------BacSiWindows-Com.png'/>");
theText = theText.replace(/;\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdukULl54mKTye_rHmLLoWTn2Q3Kuu2odw7Cqxy2RXFXvv3BJiypQudxWaQVQoc7wJZg0so7n1Xo2NT57M-lew9fF51TJ6AdUVrwn-P64-9LBVzoPXJ-xIqlrhCuVMaD2VjS3s_Xbgiw_7/s30/nhay-mat-emoji-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/=\)\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx7Y_C0Cq3imIPQa9bbuoVpbx7Jg_topIW0Kd_AG0wBCkoYspldJitVR4EBm-L8zoqyJEpAk9G4DDa2tYmmc0LMl11og-k8odsrgOTFgA6UfQc9zmap-xpaVyOlvKkXag822YFaVCcQOEQ/s30/cuoi-ra-nuoc-mat-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\(\(/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsD2rnsy5U6gKrTmKW5AZmhAgdVovu6dRObDOpLmC9kUUHoxAHdiaYMOLLslV5D76Q21ZeCHEXsamyWZQqy_lCPzlUkRGvN7WFBf_tmAje5xcoZa81yzeyzclbqyPN781QDuMiVZsp0Jx8/s30/khoc-cmnr-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/&lt;3/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWauL2WWlU6AjkA2Z2EXAY4_TvyTufe5xyYTwIDPj8VMjStqpOMKOMluXRg8wCk0ol6kiGANV-05QtDlGxxmRhinx7deP_vpgWie8bx_RXJ-Hbqn8OkMFhQpnwvFnVGIofGFhaL8IKr4Wp/s30/heart-emo-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:v/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmJhIbia3HeuUzgC-cdRBBGNiN4-AeTLNtQY9cRgiXaNTS5OkKsXe-f3DV97Lk_K7RPQ5mEeoIuKHK9Fq911kQZfe95ZatbO5yjtclZHtN4c5a7w3QsREFHo8zxO8uMluCH3p_FbdHMia/s30/pac-man-emoji-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BnmKASziqZfJcnhBrWp84KsPvf7_LwZ9Q8F0uLGaVktjMVs3FxyLMPiIjD0hPkbkeVLjKXHJZ1OVzbxskoSOg1sNyH2Jx0uPsmUcDDGGWRpBF3mF3tk0g6QAnpMhVzNbqLqC4yUeATZO/s30/cuoi-mim-emoji-_-----BacSiWindows-Com.png'/>");
theText = theText.replace(/:\(/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlyDF6cFYsgZXiA8M2MLNZRG9-deVKReKVRujZKeqDU9JXSZbLyA3WWo6ofz3a-YXxR9ZOD47Pbq56a5LDpjAMSWDQJr03_1v6X56svRidygEpG4TEzcIFjqG0jVgpTU3pUppIbt0tPVfh/s30/sad-emoji-_--_----BacSiWindows-Com.png'/>");
theText = theText.replace(/==/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinY-S6jDqkIxPaXPL8G0OUPX9FBBd792F9WWWHzYos_egYprmXatgFGijJ0Atwkkv-vQrH1ROKjL908t9c_p0ISuAuwrpJunyuF8n1qPACt-buuC9pmjDKm7DIKXbkVMI_lq3C8FvjyJ82/s30/emoji-mat-l-_----BacSiWindows-Com.png''/>");
theText = theText.replace(/:\*/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoboKv_6kPlrv_JKxRpLk1xpx4OjLAARlNGDmJJnVLRY50waOoMzPH7R9huUdeHogMh1N5tJegiWFlizcpOurIV_5pMYdB5Gx2N64mNuWJKAg_SYbuBUT5BcAsM7qEF_FTdTignjsn9ViB/s30/kiss-_-----BacSiWindows-Com.png'/>");
theText = theText.replace(/:D/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtIThlISdG4WCMK9ruXLexPsNPzwbL3KrB86fgVxSDSwEJm6vDZiOJHc-oVV49MU3AC6b6fYyeHN23QysXyob3dAnlVvpopIDjAcwM-PFKSAdsj3t06-neInYWkH3bP6BQKC3NW3TfVfrU/s30/cuoi-nhe-rang-_------BacSiWindows-Com.png'/>");
theText = theText.replace(/\^\_\^/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhq4LX2uAox5R2AiNsaxVZSZoTrXF48smoWqLicognGjawz61x_j08MvqDLYRIQD8nANzFRaKwQd7ihoGv7pL24vHPTFCKq7RZNH43f1YVUm67x-sjNkhIDx4xDjeEIgVL5VTkNyRCU0f/s30/cuoi-thoa-man-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=s/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDT6wDZTai6P_1oIMxwTChh37OrE9mya_YFel79seJ6l7HaBmAesQPzOMMH0t6v8gHQR04lRHlO1xA5mjym8g2wCJ0-fWmlRe2CtoEMUC2-Fa3pPnW8Ar3okQGqZN4Au-7lsNvHnBUu8cm/s30/cuc-shit-_----------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=ok/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuLdG_PpLRP3v2-lbV0wy2XyOqXUHT87d_UaA2JHb1zUYp4gj88Kl3-2KL1fB4G_l0nG7rb7R4u_C_B1dOgW-bmI38lR622GB2IVTw3DlKWWcdPgnK_JQ036wDNfgYfFUZAhCU3QWLOq0B/s30/OK-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hi/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydvrUtpNlRNnYB8CJrc52NEmHkIHulqLjDLNhq4vHwgWvtDVpXKkYMoDkEOE4NNHXsrsnZxn0uua17pwD3rM1IZ66TjBQ6C6akByq9GMRpktQxL53P86opkHGOWIFHuWwMM5JfRfCT4tN/s30/hi_-_----BacSiWindows-Com.png'/>");
theText = theText.replace(/\(y\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJJ6w1DAtiydZGE_IRyadjjugJn96WjL61sL9m7NoQstRPoL8WUiXvC29AnQHPONh7KvMg6gR1W-1XZBN-Nzh6J20WvyuOi6INFFhBBlHHS9MrN5m6XSf-jf5Gi93eJZ1EpyOkgtp0z-Pb/s30/like-_--------BacSiWindows.png'/>");
theText = theText.replace(/:p/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr94fJFSiwiF_gCFnZn1N3XtIoazziaBTbLDT3PwuxV_pbnDrNIMMS648gDMper0jya9F46Yi2VFM8Fb27bIeQ2yxlm2Ahyphenhyphenyykjpx92116E_sLza6JjvKcBnZw7VD_ItGiFKkUDpwNbEgr/s30/hahe-_--_---------BacSiWindows-Com.png'/>");
theText = theText.replace(/\(yy\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi243QIS9-8jBR43qO9e0B6u2SDi3V6wtNfU_6qVVrCj327PQccRwY3Bizm8EQRecMhwQava_yxzSJxeteedDFwkAlR4Puyvli2eyjBJ1cIA-mbZmMkm2dPFtXMIAs4cpB9XmkJMwON_8-w/s30/dislike_-_---BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=l/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYmiPtMKXTccObq4ln0Jv9rrXdqenpmVaDtnL4EDTS9qkr3erK9b9HxvaMOQaXwaK-ZCEci4R4eLzzGmV_i5xB7852-YXw_A-QR7izf9Etzkq-DWPrVmOJ8XE8PULVzfT7H4cXbLyKOuJ/s30/liec-cmn-mat-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\:\-\)/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSTi6p3K3otsU0WUmvxlC6uyuC67htQ5G8PvZfksjsUi7bpM6idtUMsQQIA0V7T0S67acw2JBuiFIiMB4GZenlmAXRKgsQZ1p16Zf3W6mLtbxAhNj0GAPHZhhdEv1DYUK8Zt-SrUBx3PH3/s30/haiz-_---------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hl/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtP74GG-gIvYoIxPBRW1wMi8zHLOlNWdFHLN0pN9xOFTdHtZ8Q-VVvYRxOntSSA-mlHFw0g2InxyytUuKgd6d0kvbFNTb_ZRCnHEXpjmV2hG-S7OdK-p4xC7m1pdGUw3ee3n2Uml-oDNg/s30/hand-left-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hr/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9TXNKi5dEBshAnav-kF5ZQVaIdhgad0Pgm0svdohlRfmusQVHj788Sdz144Py3xRbOalOBAxMlg8av0Fr-ziwRdGleVuofR4xu4ofP-uHbgxa66gLkEh3UeEkNI4-wWnEvFUgvwQ9lxG/s30/hand-right-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hup/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOW3zp9MZE_HOoYt-f4g-EgRdCDsB1ljRCflISTRuEY0R8sVo9JhyZ6FtzJFCzUhMMI3mPBClEBsnM41CqHOaooFoDZbACepoicWHfzR0FFdrm_jtcTGO7a7CTHane2Btbl_Bk8LK0kXz/s30/hand-up-_--------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=hd/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVoElOubl3QLhlwgstkDDKGe3LhNvinjSX6m1o2DzGPQTGtzVFhLYauNOEDJVQTOAnCSWiAKVuV3-O0olZiV5GWVtfWdtExJ3o9VA_MzeO5ji09Kj48RoPOaCOsco1jZfm50VXw7m8R4f5/s30/hand-down-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=j/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVoElOubl3QLhlwgstkDDKGe3LhNvinjSX6m1o2DzGPQTGtzVFhLYauNOEDJVQTOAnCSWiAKVuV3-O0olZiV5GWVtfWdtExJ3o9VA_MzeO5ji09Kj48RoPOaCOsco1jZfm50VXw7m8R4f5/s30/hand-down-_-------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=clap/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLS2vlFsnJLRcEeSwV9Q527ysJrXKb7Y1ZqwRmpwTr6g5Q1qo_s8LtGJD2zFHtVSG8pX8cg0LEf9i8dXeljIVJBNTqNxNE2vqKkyJz-4gSFy12mZp6fxvsMxjqxQVKaymEWSoEtJPcs7Iv/s30/clap-hand-_----------BacSiWindows-Com.png'/>");
theText = theText.replace(/\/=he/gi, "<img class='bacsiwindows_emoticon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOfrq657J9oAxW6Oqhu4uCRLToesx7afIwI7LECAAgLdFSrpXrQLHPBE704z4TEKIwTAEsAHiM3PVSWmb7FNQlGhNyR3zri6ziRLUovlzbLkwYXnqIHeRyjHRCpco0Tb0OOIil4PXzIuh/s30/love-_-------BacSiWindows-Com.png'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

và lưu lại!