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

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

รู้จักกับ Twemoji

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่ม 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 จากที่ทดสอบดูไม่ส่งผลต่อความเร็วเว็บเลยครับ 💨

เคล็ดลับ

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

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

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

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

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

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

แสดงความคิดเห็น