Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Archive > Adding Custom Emotes
Mottie (SuperAdmin) 12/14/2008 4:01 AM EST : Adding Custom Emotes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Custom Emotes

GuildPortal admin site link to original post



This code will allow you to add custom emotes to use in your forums. I've added 26 here, but you can add as many more as you want. I added this code in a free form text/HTML box on my forums tab (in the "Key" box), but you can add it to your header or footer if you wish. Enjoy! Bunny Dance

This script has been updated to remove the bracketed code that was used before. The script that searched the forum posts for the code was slowing down the page load time drastically. I hope everyone isn't too inconvenienced by this update. I left the old code in a "spoiler" window below if you still want to see it.


The Code

<script type="text/javascript">
$(document).ready(function(){addEmotes()});
function addEmotes(){
 var emotes = new Array();

 var tooltipSize = 75;
 var emoteSize = 20;

 emotes.push(["I agree","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/iagree.gif"]);
 emotes.push(["blink","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/blink.gif"]);
 emotes.push(["BOOM!","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_explosion__rvmp_by_bad_blood.gif"]);
 emotes.push(["It's broken","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/oh_noes_broken_picture_by_dutchie17.gif"]);
 emotes.push(["Bunny Dance","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/Bunnicon__dancebunnydance_.gif"]);
 emotes.push(["burp","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/burp.gif"]);
 emotes.push(["clap","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_clap__revamp_by_Kermodog.gif"]);
 emotes.push(["cry","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_crying__rvmp_by_bad_blood.gif"]);
 emotes.push(["ducky","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Duck_Ride__by_Shicken05.gif"]);
 emotes.push(["Glompage","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_GLOMPAGE__by_Zikes.gif"]);
 emotes.push(["Hadoken","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/hadoken_reamke_by_bad_blood.gif"]);
 emotes.push(["After your Heart","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_afteryourownheart__by_arrioch.gif"]);
 emotes.push(["Hugs","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/back_hug.gif"]);
 emotes.push(["n00b","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/n00b_by_de_Mote.gif"]);
 emotes.push(["No poking!","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_dontpoke__by_Chimpantalones1.gif"]);
 emotes.push(["Panic","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_panic__by_zacthetoad.gif"]);
 emotes.push(["Poke fight","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Pokefight_.gif"]);
 emotes.push(["popcorn","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/popcorn_pops_by_bad_blood.gif"]);
 emotes.push(["ppbbtt","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/__P_by_ThaisD.gif"]);
 emotes.push(["shocked","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/shocked032.gif"]);
 emotes.push(["slap","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/slap.gif"]);
 emotes.push(["STFU","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_stfu__by_Kermodog.gif"]);
 emotes.push(["thwak","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/thwak.gif"]);
 emotes.push(["typer happy","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_typerhappy__by_de_Mote.gif"]);
 emotes.push(["wakey wakey","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/_Jumping_On_Sleepy__by_Shicken05.gif"]);
 emotes.push(["wave","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/wave.gif"]);

/*
****************************
Don't change anything below
****************************
*/
 var el = $("div[id*='_pnlPost']").find("b:contains('Post Body')").parent();
 if (el.length>=1) {
  emt = '<hr><strong>Custom Emotes</strong><br><br><div id=customEmotes>';
  for (j=0;j<emotes.length;j++) {
   var ename = emotes[j][0].replace(/\'/g,"&rsquo;").replace(/\"/g,"&quot;");
   emt += '<span ="ddrivetip(\'<div align=center>' + ename + '<br><img src=';
   emt += emotes[j][1] + '></div>\', \'\', \'' + tooltipSize + '\');" ="hideddrivetip()"><img ';
   emt += 'onClick="postEmote(\'' + ename + '\',\'' + emotes[j][1] + '\')" ';
   emt += ' src="' + emotes[j][1] + '" style="border-width:0px;cursor:pointer;" ';
   emt += 'width="' + emoteSize + '" height="' + emoteSize + '" /></span> ';
  }
 el.append(emt + '</div>');
 }
}
function postEmote (ename,eurl) {
 var tmp = '<img alt="' + ename + '" title="' + ename + '" src="' + eurl + '">';
 emoticon(tmp);
}
</script>

Old Code (click to show)

Customizing

  • I've updated this code to basically paste the emote image directly into your post instead of the bracketed code "[bunny]". The reason is the part of the script that searches for the emote code really really slows down the page loading time. Especially on pages with a lot of text. I've noticed a huge difference already. Sorry but if you've used this, you'll have to go back and manually change your emote codes.

  • First off, I haven't had the time to look at how GuildPortal dealswith the disabling of Emotes for each post... I'll look into it. But ifyou want to post something that has exactly the same text as an emote,I'd change the text somehow. Some examples include adding a bold to thetext [bunny], make it italics [bunny], or capitalize a letter [Bunny].

  • To find more emotes, check out this site called deviantARTwhere most of these emotes came from... I tried to leave the name ofthe artist in the filename to give them credit where I could.

  • When adding more emotes, the emote name must be in brackets and can include spaces. The text is case-sensitive. Add more emotes using this template:

    emotes.push(["emote name","URL to emote"]);

  • When you hover over the custom emote, a tooltip will pop-up with the emote name and a full sized image. To adjust the size of this tooltip, adjust the width with this variable:

    var tooltipSize = 75;

  • The displayed custom emotes are resized for display. Adjust the height and width with this variable:

    var emoteSize = 20;
Edited (12/16/2008): Changed the code slightly to speed up the replacing of emotes.
Edited (3/24/2009): Changed the code to paste the actual image tag into the post instead of the bracketed code to get rid of the page loading time.
This topic was moved from forum Instructions to forum Archive by Mottie.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 12/14/2008 4:40 AM EST : RE: Adding Custom Emotes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Testing Custom Emotes
BOOM!
 BOOM!
 It’s broken It's broken
 Bunny Dance Bunny dance
 clap clap
 popcorn popcorn
 typer happy typer happy

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/8/2009 2:46 AM EST : RE: Adding Custom Emotes
Guppy Queen
Posts: 41034

0
Like

0
Dislike

These emotes add a lot of flavor to a website wave
TopBottom

Mottie (SuperAdmin) 4/21/2009 12:52 AM EST : RE: Adding Custom Emotes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

If you plan on adding a lot of emotes, check out the forum module for custom emotes.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Lakshmii (Applicant) 7/8/2009 3:47 AM EST : RE: Adding Custom Emotes
Lakshmii
Posts: 5066

0
Like

0
Dislike

Hi there Mottie

Feel free to delete this post if you think it doesnt need to stay up I thought id post this here rather than send you another PM, as this is seems to be a general update on the custom emotes situation

I sent a ticket about the new pop up reply windows, as it doesnt allow the use of the custom emotes (well it doesnt seem to be displaying anywhere on the pop up reply window). This is the response i got:

The change was necessary because of the growing amount of customjavascript being used by a lot of sites.  Unfortunately, a lot of thescripts were actually breaking the functionality of the editor to thepoint (in the worst cases) where it would actually not work at all.

However,...(i)n response to (a previous) ticket, I added a bunch of new slots for adding custom emotes in the Control Panel, so that using a custom script to do it wouldn't be necessary.  Check out Control Panel -> Custom Images-> Emoticons.

TopBottom

Mottie (SuperAdmin) 7/8/2009 7:58 AM EST : RE: Adding Custom Emotes
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Awwww this makes me sad... no one told me that my forum modules were breaking the editor 

Moved into archive *sniff*
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 7/8/2009 12:04 PM EST : RE: Adding Custom Emotes
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thanks for the update Lakshmii.

Should we delete that script now?
TopBottom

Lakshmii (Applicant) 7/13/2009 10:19 AM EST : RE: Adding Custom Emotes
Lakshmii
Posts: 5066

0
Like

0
Dislike

Im really annoyed by this tbh.

The custom emotes section in the control panel still dont seem to work. I tried to use them before i discovered this site, and given the response from GP in my last post here, i still havent gotten them to work
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%