Смайлики для API Вконтакте

    Ранее я уже писал об Информере Вконтакте — браузерном расширении для быстрого прочтения и ответа на сообщение. В процессе создания столкнулся с проблемой — смайлы в сообщениях, а именно: как их отобразить?
    Дело в том, что при получении текста сообщения методами API Вконтакте смайлы в нем вставлены спец. символами:

    response: {
      count: 1,
      items: [{
        id: 370892,
        body: 'Hello World 😊',
        user_id: 45421694,
        from_id: 45421694,
        date: 1437721570,
        read_state: 1,
        out: 0,
        emoji: 1
      }]
    }
    

    Возник вопрос: как же заменить все спец. символы на соответствующие изображения?

    Решение нашлось в самом Вконтакте — Скрипт которым сам ВК парсит смайлы.

    Однако, как видно, в нем очень уж много всего: здесь и события для загрузки смайлов, и открытие окна стикеров, и покупка нового стикера и т.д. Поэтому привожу ссылку на изменённый код Emoji.js

    Использование


    Использовать данный скрипт достаточно просто.

    Emoji.emojiToHTML( 'Hello World 😊' ); // 'Hello World <img class="emoji" alt="😊" src="https://vk.com/images/emoji/D83DDE0A.png">'
    

    Как видите, по умолчанию скрипт вставляет изображения с сервера Вконтакте, что означает, что вам не нужно закружать все картинки в свой проект. Однако, вы можете изменить путь к картинкам:

    Emoji.pathToEmojisImages = '/path/to/img/'; // Обратите внимание на закрывающий слеш
    Emoji.emojiToHTML( 'Hello World 😊' ); // 'Hello World <img class="emoji" alt="😊" src="/path/to/img/D83DDE0A.png">'
    

    Таким образом можно легко использовать смайлы в сообщениях полученных через API Вконтакте.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 2

      +3
      Ваш пост очень забавно выглядит в системах со встроенной поддержкой эмодзи:

      скриншот
        +2
        Или не так забавно…

        win8+

      Only users with full accounts can post comments. Log in, please.