Javascript ile Emoji İfadeleri Gösterme

Yepyeni ve herkesin işine yarayacağını umduğum bir makale ile karşınızdayım 🙂 Bildiğiniz gibi emoji ifadeler akıllı telefonlarda sıkça kullanılmakta. Ama ne yazık ki bilgisayarlarda böyle birşey söz konusu değil. Örneğin mobil cihazımızda içerisinde emoji ifade geçen bir yazı gördüğümüzde ifadeler gözükür ama bilgisayarda o ifadeler yerine kare kare tuhaf simgeler çıkar. Aslında o karelerin decimal türünde bir karşılığı vardır. Yani akıllı telefonumuzda aslında emoji ifade yazarken arkaplanda o bir decimal numarası olarak görünmekte. Bizde bugünkü makalemiz de emoji ifadelerin web siteleriniz de doğru gözükmesi için ufak bir kod yazacağız.

Not : Arkadaşlar aşağıdaki kodları web sayfanıza direkt dahil etmeyin. Çünkü decimal olarak gözükmesi gereken kodlar aşağıdaki kısımda kare şeklinde gözükebilir. O yüzden makale sonunda vereceğim dosyayı indirmenizi öneririm.

index.html sayfamızın görünümü aşağıdaki gibi ;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <title>Emoji</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="emoji.js"></script>

</head>
<body>
<div class="emoji">
😄😍😨🔥💩👍🏃🐨🐍⛳🎀🎩👑👒🌂💼👜💄💍💎🇫🇷🇪🇸🇮🇹🇷🇺🔞♊🔲❌©
</div>
<script type="text/javascript">
$('.emoji').emoji(16); // Emoji Resimlerin Büyüklük (Size) Ayarı
</script>

</body> 
</html>

emoji.js adlı dosyamızın içeriği aşağıdaki gibi ;

// AtknUludag.Com
// Emoji Karakter Değiştirilmesi
// Dosya : emoji.js

var emoji = Array("😄", "😊", "😃", "☺", "😉", "😍", "😘", "😚", "😳", "😌", "😁", "😜", "😝", "😒", "😏", "😓", "😔", "😞", "😖", "😥", "😰", "😨", "😣", "😢", "😭", "😂", "😲", "😱", "😠", "😡", "😪", "😷", "👿", "👽", "💛", "💙", "💜", "💗", "💚", "❤", "💔", "💓", "💘", "✨", "🌟", "💢", "❕", "❔", "💤", "💨", "💦", "🎶", "🎵", "🔥", "💩", "👍", "👎", "👌", "👊", "✊", "✌", "👋", "✋", "👐", "👆", "👇", "👉", "👈", "🙌", "🙏", "☝", "👏", "💪", "🚶", "🏃", "👫", "💃", "👯", "🙆", "🙅", "💁", "🙇", "💏", "💑", "💆", "💇", "💅", "👦", "👧", "👩", "👨", "👶", "👵", "👴", "👱", "👲", "👳", "👷", "👮", "👼", "👸", "💂", "💀", "👣", "💋", "👄", "👂", "👀", "👃", "☀", "☔", "☁", "⛄", "🌙", "⚡", "🌀", "🌊", "🐱", "🐶", "🐭", "🐹", "🐰", "🐺", "🐸", "🐯", "🐨", "🐻", "🐷", "🐮", "🐗", "🐵", "🐒", "🐴", "🐎", "🐫", "🐑", "🐘", "🐍", "🐦", "🐤", "🐔", "🐧", "🐛", "🐙", "🐠", "🐟", "🐳", "🐬", "💐", "🌸", "🌷", "🍀", "🌹", "🌻", "🌺", "🍁", "🍃", "🍂", "🌴", "🌵", "🌾", "🐚", "🎍", "💝", "🎎", "🎒", "🎓", "🎏", "🎆", "🎇", "🎐", "🎑", "🎃", "👻", "🎅", "🎄", "🎁", "🔔", "🎉", "🎈", "💿", "📀", "📷", "🎥", "💻", "📺", "📱", "📠", "☎", "💽", "📼", "🔊", "📢", "📣", "📻", "📡", "➿", "🔍", "🔓", "🔒", "🔑", "✂", "🔨", "💡", "📲", "📩", "📫", "📮", "🛀", "🚽", "💺", "💰", "🔱", "🚬", "💣", "🔫", "💊", "💉", "🏈", "🏀", "⚽", "⚾", "🎾", "⛳", "🎱", "🏊", "🏄", "🎿", "♠", "♥", "♣", "♦", "🏆", "👾", "🎯", "🀄", "🎬", "📝", "📖", "🎨", "🎤", "🎧", "🎺", "🎷", "🎸", "〽", "👟", "👡", "👠", "👢", "👕", "👔", "👗", "👘", "👙", "🎀", "🎩", "👑", "👒", "🌂", "💼", "👜", "💄", "💍", "💎", "☕", "🍵", "🍺", "🍻", "🍸", "🍶", "🍴", "🍔", "🍟", "🍝", "🍛", "🍱", "🍣", "🍙", "🍘", "🍚", "🍜", "🍲", "🍞", "🍳", "🍢", "🍡", "🍦", "🍧", "🎂", "🍰", "🍎", "🍊", "🍉", "🍓", "🍆", "🍅", "🏠", "🏫", "🏢", "🏣", "🏥", "🏦", "🏪", "🏩", "🏨", "💒", "⛪", "🏬", "🌇", "🌆", "🏯", "🏰", "⛺", "🏭", "🗼", "🗻", "🌄", "🌅", "🌃", "🗽", "🌈", "🎡", "⛲", "🎢", "🚢", "🚤", "⛵", "✈", "🚀", "🚲", "🚙", "🚗", "🚕", "🚌", "🚓", "🚒", "🚑", "🚚", "🚃", "🚉", "🚄", "🚅", "🎫", "⛽", "🚥", "⚠", "🚧", "🔰", "🏧", "🎰", "🚏", "💈", "♨", "🏁", "🎌", "🇯🇵", "🇰🇷", "🇨🇳", "🇺🇸", "🇫🇷", "🇪🇸", "🇮🇹", "🇷🇺", "🇬🇧", "🇩🇪", "1⃣", "2⃣", "3⃣", "4⃣", "5⃣", "6⃣", "7⃣", "8⃣", "9⃣", "0⃣", "#⃣", "⬆", "⬇", "⬅", "➡", "↗", "↖", "↘", "↙", "◀", "▶", "⏪", "⏩", "🆗", "🆕", "🔝", "🆙", "🆒", "🎦", "🈁", "📶", "🈵", "🈳", "🉐", "🈹", "🈯", "🈺", "🈶", "🈚", "🈷", "🈸", "🈂", "🚻", "🚹", "🚺", "🚼", "🚭", "🅿", "♿", "🚇", "🚾", "㊙", "㊗", "🔞", "🆔", "✳", "✴", "💟", "🆚", "📳", "📴", "💹", "💱", "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", "⛎", "🔯", "🅰", "🅱", "🆎", "🅾", "🔲", "🔴", "🔳", "🕛", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "⭕", "❌", "©", "®", "™");

function to_hex(str) {
    var hex, i;
    hex = '';
    for(i=0; i < str.length; i++) {
        hex += str.charCodeAt(i).toString(16);
    }
    return hex;
}

$.fn.emoji = function (size) {
    return this.each(function () {
        $(this).html(function (i, oldHtml) {
            var newHtml;
            for (var j = 0; j < emoji.length; j++) {
                // For block/background style
                // oldHtml = oldHtml.replace(emoji[j], '<span style="display: inline-block; background-image: url(img/' + to_hex(emoji[j]) + '.png); background-size: ' + size + 'px; height: ' + size + 'px; width: ' + size + 'px;"></span>');
                // For classic img style
                oldHtml = oldHtml.replace(emoji[j], '<img src="emoji-img/' + to_hex(emoji[j]) + '.png" height="' + size + '" width="' + size + '" />');
            }
            newHtml = oldHtml;
            return newHtml;
        });
    });
};

Aşağıdaki pakette tüm emoji ifadelerin resimleri, index.html ve emoji.js dosyaları bulunmaktadır.

JavaScript
Javascript ile Emoji İfadeleri Gösterme
İndirilme : 1113 | Dosya Tipi : rar

8 yorum

  1. ardacan Yanıtla

    ya ben bilmiyorumda şimdi bu verdiklerini ne yapıcaz da emojilerdüzelcek söylersen sevinirim lazım 🙂

  2. sefa Yanıtla

    nereye kopyalıyacağınızı yazıcam demişsin ama ben bulamadım rica etsem bana açıklarmısın

  3. alican Yanıtla

    bunu paylaşırmısın çok iyi olmuşta 🙂 Güzel site iyi tasarım bu arada 🙂

  4. alican Yanıtla

    dosya indir bölümünü eklenti ile mi yaptın bende öyle yapma istiyorum paylaşırmsın nasıl yaparım ? 🙂

  5. Yusuf Yaşar Yanıtla

    Ne zamandır böyle birşey arıyordum. Emoji ifadeler sitemde gözükmüyordu bu eklenti ile artık hepsi gözüküyor. Teşekkürler. 🙂

    • aboş özberk Yanıtla

      indirdim fakat ne yapmam gerekiyor yine görünmüyo çalıştır da olmuyor bir yere mi kopyalamam lazım ? nasıl yaptın banada söylermisin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.