เพิ่ม Emoji ในเว็บไซต์

บทความนี้มาแนะนำวิธีทำให้เว็บไซต์ของเรารองรับ emoji แบบนี้ 🙃🤑🤠😱🤭🧐🙄

รู้จักกับ Twemoji 👾

วิธีที่ผมจะใช้เพิ่ม emoji ให้เว็บของเราคือ Twemoji หรือชื่อเต็มๆ คือ Twitter Emoji เห็นชื่อแบบนี้แน่นอนว่าเป็นโครงการของทวิตเตอร์ครับ โครงการนี้เป็นไลบรารีสำหรับใช้งาน emoji ข้ามทุกแพลตฟอร์ม โดยทวิตเตอร์นั้นก็ใจดี เปิด Twemoji เป็นโอเพนซอร์สให้ทุกคนนำไปใช้ได้ฟรี 🆓

หน้าตาของ Twemoji ถ้าใครเล่นทวิตเตอร์บนเว็บหรือทำเว็บด้วย WordPress คงเคยเห็นมาบ้าง จะออกแนว flat พร้อมสีสันสดใส 🌈 ตามตัวอย่างด้านล่างนี้เลย

เพิ่ม Twemoji ในเว็บไซต์

วิธีเพิ่ม Twemoji บนเว็บไซต์นั้นง่ายมาก 🍌 เพียงเพิ่มโค้ดด้านล่างนี้ลงในเว็บไซต์

อย่างแรกที่ต้องบอกคือ ผมไม่แนะนำให้ใช้ค่าเริ่มต้นของ Twemoji ที่โหลดรูปผ่าน twemoji.maxcdn.com เพราะชอบมีปัญหารีไดเรคไป twitter.github.io/twemoji ซึ่งไม่ใช่ CDN ทำให้เว็บไซต์โหลดช้า

อัปเดต 19 พ.ค. 2561 - ตั้งค่าให้ใช้ cdnjs, โหลดรูป SVG และเพิ่มเคล็ดลับด้านล่าง 👇👇👇

เพิ่มสคริปต์

สคริปต์นี้เป็นการตั้งค่าให้โหลดรูปภาพจาก cdnjs และโหลดรูป SVG แทน PNG โค้ดจะยาวนิดนึง แต่ใช้แล้วดีกว่าค่าเริ่มต้นแน่นอนครับ

<script src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/2.7.0/2/twemoji.min.js"></script>
<script>
twemoji.parse(document.body, {
"base": "https://cdnjs.cloudflare.com/ajax/libs/twemoji/2.7.0/2/",
"folder": "svg",
"ext": ".svg"
});
</script>

นำโค้ดด้านบนนี้ไปใส่ในเว็บไซต์ได้เลยครับ แนะนำให้ใส่ไว้ด้านล่างสุดของเว็บไซต์จะได้ไม่บล็อกการเรนเดอร์เว็บของเบราว์เซอร์

การอัปเดตเวอร์ชัน

ในโค้ดด้านบนผมเรียกใช้ Twemoji เวอร์ชัน 2.7.0 ซึ่งเป็นเวอร์ชันล่าสุดตอนที่ผมเขียนบล็อกนี้ (20 พ.ค. 2561)

แต่ถ้ามีเวอร์ชันใหม่กว่าออกมา ก็เปลี่ยนตัวเลขเวอร์ชันจาก 2.7.0 เป็นเวอร์ชันใหม่ได้เลย และอย่าลืมเปลี่ยนให้ครบทั้งสองจุดนะครับ (ตรวจสอบเวอร์ชันล่าสุดได้ที่หน้านี้)

เพิ่ม css

ขั้นตอนสุดท้ายคือเพิ่ม css อีกนิดหน่อยเพื่อปรับให้รูป emoji ขนาดเท่ากับข้อความ ✅

img.emoji {
  display: inline;
  border: 0;
  box-shadow: none;
  height: 1em;
  width: 1em;
  margin: 0 .07em;
  vertical-align: -.1em;
  background: none;
  padding: 0;
}

เพียงเท่านี้ก็เรียบร้อย หลังจากนี้เมื่อโหลดหน้าเว็บ Twemoji ก็จะทำการค้นหาและแปลง emoji ในหน้าเว็บให้เป็นรูปภาพ emoji แทน 😎

สำหรับคนที่ห่วงเรื่องความเร็วเว็บไซต์ รูป emoji ทั้งหมดนี้ถูกส่งผ่าน CDN 🌐 แต่ละรูปมีขนาดประมาณ 1-2 KB จากที่ทดสอบดูไม่ส่งผลต่อความเร็วเว็บเลยครับ 💨

เคล็ดลับ 🤫

ขนาดของรูป emoji จะขึ้นอยู่กับขนาดของข้อความ

64px 😍🥠
32px ❤🥠
16px 😭🥠

เมื่อคัดลอกข้อความ emoji ก็จะติดไปด้วยเหมือนปกติ เพราะมีการเพิ่ม alt ในแท็กรูปไว้ให้เรียบร้อย ลองดูได้เลย

🍣🍱🍡🍙🍘 ลองคัดลอก ♨🏯🗼🗾🗻 ข้อความนี้สิ 🎍🎏🎎 emoji 👹👺 จะติดไปด้วย ⛩🎋👘 เหมือนข้อความปกติ 🎴🍥💮📛

และสุดท้าย เข้าไปที่หน้านี้ เพื่อดูรายชื่อ emoji ทั้งหมดที่ Twemoji รองรับ และคลิกบน emoji แต่ละอันจะมีป๊อปอัปขึ้นมาให้คัดลอก emoji ไปใช้

ดูข้อมูลเพิ่มเติม Twemoji บน GitHub

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *