Cài đặt bộ chèn Emoticons cho hệ thống nhận xét phân cấp

Được biết, hiện nay với sự phố biến của hệ thống nhận xét phân cấp qua đó người nhận xét khi trả lời một ý kiến của một người nào đó thì thường nhấn vào nút Trả lời/Reply để viết nhận xét qua cửa sổ popup, lúc này việc chèn biểu tượng cảm xúc vào nhận xét sẽ gặp khó khăn. Giải pháp cho vấn đề này là tạo bộ biểu tượng cảm xúc trực tiếp trong hệ thống nhận xét popup.

Hẳn bạn cũng từng biết về addon Greasemonkey giúp thêm bộ chèn biểu tượng cảm xúc trực tiếp vào công cụ đăng bài viết (Post Editor) của Blogspot. Kịch bản này chỉ hoạt động trên trình duyệt FireFox. Thật may là sau một quá trình nguyên cứu, mình đã áp dụng thành công phương pháp này đối với hệ thống nhận xét popup. Cách thức thực hiện là viết một kịch bản tạo chức năng chèn các thẻ <b></b> (in đậm), <i></i> (in nghiêng), <a></a> (liên kết) và một bộ biểu tượng cảm xúc (ở đây mình tạo bộ 25 Zing Emoticons) sau đó upload kịch bản lên trang tài nguyên userscript.org. Để cài đặt tiện ích này, người dùng cần sử dụng trình duyệt FireFox tải addon Greasemonkey rồi cài đặt. Trước tiên đến trang Greasemonkey, nhấn nút Add to Firefox để tải về cài đặt tiện ích này.

Sau đó khởi động lại (restart) trình duyệt, tiếp tục tải Emoticons Script về, nhấn Install để script tự động cài đặt vào FireFox.

Sau đó mở hệ thống nhận xét popup bạn sẽ thấy bộ biểu tượng cảm xúc sẽ xuất hiện trong phần Comments Form. Mỗi khi cần chèn biểu tượng hoặc các thẻ HTML, bạn chỉ việc click vào nó là xong.

Tuy nhiên để các biểu tượng cảm xúc hiển thị trên phần nhận xét (không phải dạng Popup) thì bạn phải cài đặt chức năng biểu tượng cảm xúc, bằng cách đặt đoạn code sau đây vào trước thẻ </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Emoticons for Blogger Comments || Author: Huynh Nhat Ha || http://huynh-nhat-ha.blogspot.com || © Copyright 2010
function emoticonBloggerHuynhNhatHa() {

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

bodyText = document.getElementById('comments-block');

theText = bodyText.innerHTML;
theText = theText.replace(/:1/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfTxukAVIJEpQO9_ImBYZ3CU-nmwwSKQaxZwha9ySVl5TTVbp1JiG8vTT5Q6BwxACrL2w3yoXC-awe9IE5RxgDZj65MfnpniTPn0iTeWZ2exrz8PuqlG7jgFiIy3Y4Rcprbixe6JIsUWZ/s1600/49.gif" />');
theText = theText.replace(/:2/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7Ynq_g_GD11Sg29fxY8sOJPflnZDZd09MnEKf7wj6E0_Es4QwiSuKQrXhsuX9y5kgwNlgslDdkgNZ5ICIFjs5Us5_fFUHb7Qe5v4b7g4SZI8GJZvz7GLnz_38YbLtyRMAnBiIi2tCkmO/s1600/102.gif" />');
theText = theText.replace(/:3/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGvYaP-I1nPNmEwzpDrU48y0e6ACUAqbyJgtr36v9BVpKEP6YmB7uNYgGVhLX4KBFIRTLjA7hkf5ras9_n8kwSDWV8NE0ks1vTTMNhLJQCYo_UTasOJZ8oFfCokwU7kM04wVDKAIa1but/s1600/113.gif" />');
theText = theText.replace(/:4/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtprjwH2MvlsQ-tLkgSPMEG3b1MUGD4E9jgfqq8Bf6yLl0nwT3X085wW9VLnJf944ozA1mbWbC8XLWkpse8VcvxcGnHJyktq-T3UAcVzpXHd317ji9mgEmGWr5P4B3NRmRemqfaX9GdQ7-/s1600/93.gif" />');
theText = theText.replace(/:5/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Ki4Kh6vZKOZJA3TdPwrIww4XLOJanM4mQEst-L0CV-nBu-7u5XKO3Y7UXh-f0dBVTZV55fzMGvkLznLL9xhfD82PSwToh39D6Ne665f8QjNCDdrIvffcObQP5tAjy1rnvVaeCJTgf320/s1600/61.gif" />');
theText = theText.replace(/:6/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj29aj2IKengb3EeLLHDp4U73i5c1f-RwVEqNe1VkgMDhQvQzNRrZ4PpIzGwGz_yTxXiB5MLN8L6ZNfjWPedG1SzxQNu0gHT-NH_-CEeVl9vnAl5bzVfZS57bExJB7MKSC5oW886xFxw-Qv/s1600/134.gif" />');
theText = theText.replace(/:7/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qj8u7cIvxpsC8UTiu5KW50osIrQStQvJT43a3fP97CaVlQdcbta5BpB1qfoHQUEUPdsGB9ojBycbN3gX_IfTxPBNMk_uNhdm2eFIqH9ZlOZDebHomBnFUqALltPcHg5vbgjkXQ1cSu7H/s1600/39.gif" />');
theText = theText.replace(/:8/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvotxa5IEHPsj756lLCFCk8mGpCzE5f-MVXpuE-aXH-kGBqb9Ajr4-qNTPhl4IOpb8deTBe8K_xDDwgTNTayEUh_V-uWItNNYolUX4Cxgtsk7W_FXK0U6zg3ZCyaH5bnYAkb10svagPAZ/s1600/106.gif" />');
theText = theText.replace(/:9/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGfzKgwPxacbNN3dlJCVwQFG2Y0DL774OhuRhDwwIGyOpdGgnVwAb8Esl-kZg7HT9Ryd-258fUhyphenhyphenhPRMbmEy1JRTBq1Pt6LvEAI2RM4Lbrt2YP2zOyx-BK5KLw0Kuwa6s6c7ejZXl24R4/s1600/43.gif" />');
theText = theText.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiciYEKboxOMt7SaDrpJ8vfJLgxlZxJW_PaQVK96WvHmJGGvIfsGF4k29lDX73Ec3yShIgNtgDdZBQh-UBOr4TGjbC2FD-JnSrAe89I-nxs-Lz5-9NccB0o-x9JMV5eSnNqUtdNe8Ut4fFM/s1600/111.gif" />');
theText = theText.replace(/:B/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgGbx-JuVlxamTYpPJMns2BMOFkh8wGfnBkPKkjfreL9auNAbCutdt8HzqO22mx9-0LZPGwBPJyk-Aao8qv4TDFwNl0C2zZGBzsEBPICAYuUbe11D3uSJd_-7Kepb_KpVUDQgaRffSOJs/s1600/48.gif" />');
theText = theText.replace(/:C/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTs1a0IE7v0InAO5k67pBmzD-Ghq6sdU0lhbnRHdgyFx3vsyWU-7VWha3C2nmhtbO4XqAGzDX86ttiHfDzl0zeJuCTz5ONY5hokLqPk42eZUgvFOiPo3mXhk0eMUqvfmAUilLfmyZu2g8o/s1600/54.gif" />');
theText = theText.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvl82GiH2mrMGgL4v657proFWC2ffgMVab-67NFmg0aOfLE4MfduRVeJ31cIo4XfQC1x-BlqhezM3IPnr-Y72kg8VgF7qil3d5YTegZu66otrblEALexc7-3tCyIPWNo5QmayNiNl5j_N/s1600/63.gif" />');
theText = theText.replace(/:E/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCtf64and4NeMvNcQmeHmpKuMYnvtclZwHKVi0OlPBEl_xh8FKZi03PuKPt8ezMybngjrcVRdewyoFrodJ-k2PqoHZ2HtSwsE7MwxMqXs3Gb4JuoxwO8fQZgxm2cM023jM770I2OxtmhWE/s1600/100.gif" />');
theText = theText.replace(/:F/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1Bx3RaGDIwD-geDgQFA_jFtcnXH_St2fT9OyzHFg5fGltwwKaJts9o6IkN4QaGqDOwOyR_dYU0Z_2UZhaw3G5BCq4ALUqdE6X5b_kJ_eBHneFmQ44p64hS-Lqsd9-CJ0cXtpw7e1614y/s1600/45.gif" />');
theText = theText.replace(/:G/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E0oPl5Ly6jiB5aS-XRpmDl9qi1Eo8_wiE0Pql-pzIYODVeoQZezHgAf6SOpdDjseJdbgdERqQeCERpcz4rtCI5RCscr8o_4p8Zpg3O7lghlpDfeoOFBR6dP3TnUj62ZLka9twWwF0GjK/s1600/77.gif" />');
theText = theText.replace(/:H/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9C93QvChGnvNAYPly-9nbTSKOEJopR1XkK3fRJZY8pXbXSXVTYusJlm13GWf7H4zxmg9EShJeXpjBONqwI3WkIw_kT-4wu1KGpndlm_jkxF_agcv2a_RZtR_0MUyarwj6g1e2jtaZ_CZq/s1600/86.gif" />');
theText = theText.replace(/:I/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTFsP9xc2aypOmGF6_1AxNu5_0VD93nwfBjAacMeKB5I_qvRogA0TvCSdM4xd8pNFhd-KiL9EvyOg_5SMKdxXtEhdSI4I65J-LCt_M2kXtJB5tKcjzm27WGUmQ0jIRqAqch-8-77-5DwL/s1600/94.gif" />');
theText = theText.replace(/:J/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsq227ZBb_YXMLK2bMMiTI6pg-jH6fmHawjIDegFg8Dhe9-CY9qX1MhTUzEzpnvtemai2iLwrO0ZOL7MkFN3N13V7zCt1UT5oVu_m77NLDCagUVUFTu3c05lVs0VEZ5fHNwixgqX_noZs/s1600/83.gif" />');
theText = theText.replace(/:K/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhB0D2Fl97Kyu-2L8RsngRpfseLX8CGSMhtv5hoLb98ahQUyxuHAKTVlaOg4akiKa9Q3gY1IywivKt9PS7U3gUYsB-BRTNJCcV5FqlaG8V9ej1ZladeiCU3du_kLO4qXxmx8HhT7Du2kLK/s1600/59.gif" />');
theText = theText.replace(/:L/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjld6DqmDeOi4nzU0CPzIVXbLZefg9-bXGuNQgNqe0C37bSX_DW9wwTg9dpoU723fYCln0UV2fZ3AzW4PEaegWR9VuT2oFvj55j7_hu1hot2P1Vfhli8i4i-CpOpl5OgFr9cuFOcHBMsL9W/s1600/soldierbaby.gif" />');
theText = theText.replace(/:M/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0h2YWtecd5JUuKQVzm9F9SGeCiN1qfo5AyDxyQcU3LDVSUn2s_ABbNBmc0UJI_HQBIXdNorNP74n2hQXSr3PEDWqM0o1zPmKIYcg9aD83KijDq1RhH7h5IZYaMGPFjJGs2m6ISqDyckls/s1600/alo.gif" />');
theText = theText.replace(/:N/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgfVPsNUMExNjtTljhamGbA2XDpfXMgWbGNKyJu78BH-lM33IsiVTrBpCOa_-W2m1rE1qrXkZUxlhyphenhyphengnvUv9mVMM3AOZafTSbYUg0FIGyW8C3ZP4yiBoCwNcBeXsVGG3svxoGMMXtSfxm/s1600/shutup.gif" />');
theText = theText.replace(/:O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio8Uqw5yom5ZzOFcr-DgProf4mN7P1_W6L_XoDAqFsnhREN9jEsvkqe0a9MzMZp6JVihRkhEbKcWeSv9EmRI290oVUZISptq4htrxclwXYygjOLodAXnp6KFUEbtWpnYhncMRFQaGSwfcK/s1600/yeulam.gif" />');
theText = theText.replace(/:P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8oU4iF17w5F0D3edifp6voDgjO2hPhml8aeu6wX8wwgWTFglAWoLzcuVSYMsd0I14meKNTJlWa17YnLGWRTzThlIA7hxvfHIjTfS93qHOZ60m9FsC6tK6DcoR7Oyp7xrJsR6UB8Odrfp2/s1600/datbomb.gif" />');

bodyText.innerHTML = theText;}
//]]>
</script>
<script type='text/javascript'>
emoticonBloggerHuynhNhatHa();
</script>
</b:if>

1. 
   

   Chú ý

   • 
     1 Để chức năng biểu tượng cảm xúc hoạt động trong phần nhận xét thì bạn phải thay đổi ID comments-block cho phù hợp. ID này nằm trong một thẻ chỉ định thành phần chứa các dữ liệu của nhận xét, thẻ này thường nằm ngay trước dòng <b:loop values='data:post.comments' var='comment'>. Tùy theo cách đặt tên của người thiết kế Template mà id này có thể có tên khác nhau ví dụ: comments-block, comments-block3, comments_block, cm_block, commentsblock …
   • 
     2 Sau khi cài đặt thủ thuật này, bạn cần cập nhật lại thủ thuật Chèn biểu tượng cảm xúc vào nhận xét dạng input để tạo sự thống nhất.