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 : 1132 | Dosya Tipi : rar

“Javascript ile Emoji İfadeleri Gösterme” üzerine 10 yorum

  1. 1 video ile anlatabilme imkanın varmı çünkü hiçbirşey anlamadım baştan anlatırsan eğer yazıyla daha açıkça anlayabilirim cevaplarsan sevinirim.

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

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

  4. 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. 🙂

    1. 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.