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

บทความนี้มาแนะนำวิธีทำให้เว็บไซต์ของเรารองรับ emoji แบบนี้ 😁😍😎🤑😏

รู้จักกับ Twemoji

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

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

ตัวอย่าง Twemoji

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

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

แต่ต้องบอกก่อนว่า ผมไม่แนะนำให้ใช้ค่าเริ่มต้นของ Twemoji ที่โหลดรูปจาก twemoji.maxcdn.com เพราะโหลดได้ค่อนข้างช้า และโหลดรูป PNG ที่มีขนาดเพียง 72x72 พิกเซล

ดังนั้นโค้ดที่ผมใช้จะมีการปรับแต่งให้โหลดรูปจาก jsDelivr แทน และโหลดรูป SVG เพื่อให้แสดงผลได้ดีทุกขนาด

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

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

<script src="https://cdn.jsdelivr.net/npm/twemoji@12.0.1/2/twemoji.min.js"></script>
<script>
  twemoji.parse(document.body, {
    "base": "https://cdn.jsdelivr.net/npm/twemoji@12.0.1/2/",
    "folder": "svg",
    "ext": ".svg"
  });
</script>

เพิ่ม css

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

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

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

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

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

ในโค้ดด้านบนผมเรียกใช้ Twemoji เวอร์ชัน 12.0.1 ซึ่งเป็นเวอร์ชันล่าสุดตอนที่ผมอัปเดตบทความนี้

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

เคล็ดลับ

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

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

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

🌉🎌 ลองคัดลอก ♨🗼🚄🗻 ข้อความนี้สิ 🎶💸🔨🔑 emoji 🐳🐧🐬 จะติดไปด้วย ⛩👘 เหมือนข้อความปกติ 🎍🎎🎏

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

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



ความคิดเห็น