HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding Custom Emotes (Emoticons) to Your Forums
1 2Next
Mottie (MVP) 12/14/2008 4:34 AM EST : Adding Custom Emotes (Emoticons) to Your Forums link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Adding Custom Emotes



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

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

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.
 
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 imagedirectly into your post instead of the bracketed code "[bunny]". Thereason is the part of the script that searches for the emote codereally really slows down the page loading time. Especially on pageswith a lot of text. I've noticed a huge difference already. Sorry butif you've used this, you'll have to go back and manually change youremote 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"]);

  • Whenyou hover over the custom emote, a tooltip will pop-up with the emotename and a full sized image. To adjust the size of this tooltip, adjustthe 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 thepost instead of the bracketed code to get rid of the page loading time.
>>help-site<<
Top • Bottom

Mottie (MVP) 12/16/2008 6:49 AM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
I updated the code... it seemed to increase the page loading time on really long posts. Hopefully it'll be a little faster now.
>>help-site<<
Top • Bottom

Miles Clennell (Guild Admin) 12/30/2008 2:44 AM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
Miles Clennell
Posts: 3134
Zomgawsh Poster
This looks fun I just implemented it on my site. Is there an easy way to get the emoticons without implementing it using your Photobucket links then right clicking each one and saving them?
Anemia Sig 1
Top • Bottom

Mottie (MVP) 12/30/2008 6:21 AM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
I could compress my emoticons into a zip file if you want, or you could always just keep the links to my photobucket, I don't plan on ever removing them.
>>help-site<<
Top • Bottom

Miles Clennell (Guild Admin) 12/30/2008 9:11 PM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
Miles Clennell
Posts: 3134
Zomgawsh Poster
Thanks Mottie. If you could compress them that would be fab. I'll PM you with my email I know yhe emotes are small but do Photobucket not place restrictions on your bandwith?
Anemia Sig 1
Top • Bottom

Rhiannanna (Guild Admin) 1/14/2009 5:41 PM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
Rhiannanna
Posts: 1501
Zomgawsh Poster
hmmm something's broken them ... havent changed anything but this morning they dont work :/


Top • Bottom

Mottie (MVP) 3/24/2009 4:00 PM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
I've updated the code above again... the script that searched for the bracketed emote code in the posts was dramatically slowing down the page load and was getting sort of annoying to me... so, now it pastes the image directly into your post. And YAY much faster!

It doesn't search for the emote code anymore, so if you update to this code, you'll see the emote codes left bare and lonely in your posts - sorry =(.
>>help-site<<
Top • Bottom

Ampled216 (New Admin) 3/25/2009 11:05 PM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
Ampled216
Posts: 26
Becoming Adept!
I don't understand where to put this code at. Can you please put a step by step to where to put that code at. 
Top • Bottom

Guppy Queen (New Admin) 3/26/2009 2:23 AM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
Guppy Queen
Posts: 41034
Zomgawsh Poster
Ampled216 said:
I don't understand where to put this code at. Can you please put a step by step to where to put that code at. 


I pasted the code into the Footer.

Thanks for the update Mottie.
Top • Bottom

Mottie (MVP) 3/26/2009 8:47 PM EST : RE: Adding Custom Emotes (Emoticons) to Your Forums link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Ampled216!

I explained above that my test site has a "Key" box under the forums. It contains all the forums icons and what each one means. In that same content box, I also add all my code that I use in the forums only - it's my weird kind of way to organize things I guess. If you don't know how to add a "Free Form Text/HTML" type content box, then follow the instructions below:

  • Copy (Ctrl-C) the HTML/code you want to add
  • On your site choose Control Panel > Site Pages > Manage Pages
  • Click on the tab where you want to add the box
  • Look at the top box "Add Content to this Page"
  • Box Title: Name the box
  • Type: Choose "Free Form Text/HTML"
  • Side of Page: Choose "Left Side", "Center" or "Right Side"
  • Click the "Add" button
  • Find your new box in the area below, click "Edit"
  • Before adding HTML, click on the HTML mode button ()
  • Paste (Ctrl-V) in your HTML
  • Make the changes you need.
  • Click the "Save" button

If you need more detailed instructions, then please read this post, it has pictures!

OR, you could add it to your footer like Guppy Queen said
>>help-site<<
Top • Bottom

1 2Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%