Post
Ask Question

How to Use Twitter Emoji in Your Web Application

Twitter has now released the Emoji API for World Wide Web mobile app developers. The Twitter Emoji is open source and available to the developer community at large.

In this article, I am using the Twitter Emoji in the Web App. Now let's begin with the following procedure.

Getting Started

Now, we'll create the application and add the Twitter API to the application. Use the following procedure.

Step 1

Create the ASP.Net Web Application in Visual Studio.

Step 2

Add the Web Form to the application named "EmojiForm".

Step 3

Design the web form with the following code:

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <asp:Label ID="LblTwitterEmojiMsg" runat="server" CssClass="lbltwitteremojimsg"></asp:Label>  
  4.         <div class="container">  
  5.             <div class="emojibox">  
  6.                 <asp:TextBox ID="TxtEmoji" runat="server" CssClass="textemoji" placeholder="Type a message here"></asp:TextBox>  
  7.                 <input type="button" id="BtnEmoji" class="btnemoji" value="😀" />  
  8.                 <ul class="emoji-list">  
  9.                     <li>”Your Emoji Code”</li>  
  10.                     <li>”Your Emoji Code”</li>                      
  11.                 </ul>  
  12.             </div>  
  13.             <asp:Button ID="BtnSendEmoji" runat="server" Text="Send" CssClass="sendbutton" OnClick="BtnSendEmoji_Click" />  
  14.         </div>  
  15.     </form>      
  16. </body>  

Note:

I am using some of the Twitter Emoji in my application. I have used "Your Emoji Code" here. Use the Emoji Code from the source code or you can find more Emoji from here.

Adding Twitter API Script

Now all you need to add is the following script to your web form: 

  1. <script src="//twemoji.maxcdn.com/twemoji.min.js"></script>  

Creating CSS and JavaScript for Web Application

Step 1

Add the CSS file named "TwitterEmoji" and add the following code to it:

  1. * {  
  2.     padding: 0px;  
  3.     margin: 0px;  
  4. }  
  5.    
  6. ul li {  
  7.     list-style: none;  
  8. }  
  9.    
  10. .emojibox {  
  11.     width: 355px;  
  12.     height: auto;  
  13.     background: #fff;  
  14.     border: 1px solid #ccc;  
  15.     margin-right: 20px;  
  16.     display: inline-block;  
  17.     float: left;  
  18.     position: relative;  
  19. }  
  20.    
  21. .textemoji {  
  22.     width: 267px;  
  23.     float: left;  
  24.     height: 50px;  
  25.     border: none;  
  26.     background: none;  
  27.     outline: none;  
  28.     padding: 0 0 0 10px;  
  29.     font-size: 18px;  
  30. }  
  31.    
  32. .btnemoji {  
  33.     width: 70px;  
  34.     height: 45px;  
  35.     float: right;  
  36.     border: none;  
  37.     background: none;  
  38.     outline: none;  
  39.     font-size: 30px;  
  40. }  
  41.    
  42. .sendbutton {  
  43.     border: 1px solid #ccc;  
  44.     background: #f2f2f2;  
  45.     width: 100px;  
  46.     height: 30px;  
  47.     text-align: center;  
  48.     line-height: 30px;  
  49.     color: #252525;  
  50. }  
  51.    
  52. .emoji-list {  
  53.     display: none;  
  54.     height: auto;  
  55.     width: 250px;  
  56.     background: #000;  
  57.     border: #020202;  
  58.     position: absolute;  
  59.     overflow: hidden;  
  60.     top: 73px;  
  61.     right: 0px;  
  62. }  
  63.    
  64.     .emoji-list li {  
  65.         float: left;  
  66.         font-size: 30px;  
  67.         margin: 0 10px 0 10px;  
  68.         cursor: pointer;  
  69.     }  
  70.    
  71. .container {  
  72.     display: block;  
  73.     width: 100%;  
  74.     height: 100px;  
  75.     position: fixed;  
  76.     top: 110px;  
  77. }  
  78.    
  79. .lbltwitteremojimsg {  
  80.     font-size: 20px;  
  81. }  

Step 2

Add the JavaScript file named "TEmoji.js" and add the following code to it:

  1. $(document).ready(function () {  
  2.    
  3.     $("#BtnEmoji").click(function () {  
  4.         var container = $(".emoji-list");  
  5.         if (!container.hasClass('hidden')) {  
  6.             container.addClass('hidden');  
  7.             container.slideDown(500);  
  8.         }  
  9.         else {  
  10.             container.removeClass('hidden');  
  11.             container.slideUp(500);  
  12.         }  
  13.     });  
  14.    
  15.     $(".emoji-list li").click(function () {  
  16.         var mm = $(this).text();  
  17.         var textVal = $("#TxtEmoji").val();  
  18.         $("#TxtEmoji").val(textVal + mm);  
  19.         $(".emoji-list").removeClass('hidden');  
  20.         $(".emoji-list").slideUp(500);  
  21.     });  
  22.    
  23.     $(".textemoji").click(function () {  
  24.         $(".emoji-list").removeClass('hidden');  
  25.         $(".emoji-list").slideUp(500);  
  26.     });  
  27. });  

In the preceding code, the button click function determines if the emoji container class is not hidden; if it is not then it adds a hidden class otherwise it removes the hidden class. When the emoji list is displayed, the emoji is added to the text in the TextBox and it removes the hidden class. This is defined in the emoji list options click function. When the user clicks on the TextBox the emoji list disappears.

Now your entire code will be like the following code:  
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmojiForm.aspx.cs" Inherits="TwitterEmojiApp.EmojiForm" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Twitter Emotions</title>  
  8.     <link href="TwitterEmoji.css" rel="stylesheet" />  
  9. </head>  
  10. <script src="//twemoji.maxcdn.com/twemoji.min.js"></script>  
  11. <script src="jquery-1.10.2.min.js"></script>  
  12. <script src="TEmoji.js"></script>  
  13. <body>  
  14.     <form id="form1" runat="server">  
  15.         <asp:Label ID="LblTwitterEmojiMsg" runat="server" CssClass="lbltwitteremojimsg"></asp:Label>  
  16.         <div class="container">  
  17.             <div class="emojibox">  
  18.                 <asp:TextBox ID="TxtEmoji" runat="server" CssClass="textemoji" placeholder="Type a message here"></asp:TextBox>  
  19.                 <input type="button" id="BtnEmoji" class="btnemoji" value="😀" />  
  20.                 <ul class="emoji-list">  
  21.                    <li>”Your Emoji Code”</li>                      
  22.                 </ul>  
  23.             </div>  
  24.             <asp:Button ID="BtnSendEmoji" runat="server" Text="Send" CssClass="sendbutton" OnClick="BtnSendEmoji_Click" />  
  25.         </div>  
  26.     </form>      
  27. </body>  
  28. </html>  
Running Application

Step 1

At first debug the application and enter the message and click on the Emoji icon as shown below:

Clicking Twitter Emoji

Step 2

Enter the message and select Emoji.

Select Twitter Emoji

Step 3

Click on the Send Button to send the message.

Start with Twitter Emoji

That's it.

Summary

This article described how to use the latest Twitter revealed Twitter Emoji in a web application. We can get more Twitter Emoji in the Github. Thanks for reading and Stay Updated!


Similar Articles