Free Emoodicons for your blog! An emoticon script and graphics: emoodicon

Well, I'm just tickled that this works and I can share it with you! My friend Neil has come up with a nifty piece of JavaScript that you can use to put Emoodicons into your blog or website to signify your mood. So now, you can use Emoodicons in your ring or online. How cool is that?

This should work on pretty much any blog platform where you can use JavaScript and I've come up with some CSS you can edit to style it so it looks just right on your site. It works best if you put the Emoodicons at the bottom of your post, but you can play with the CSS if you want to make it fit in anywhere.

The instructions and all the code you need are in the extended post, so just click the link below to copy and install the code. I've set it up so that you don't need to host the images themselves… They're linked to in the script and you can feel free to use my bandwidth for the images.

Here's an example of how the Emoodicons look (you can change the wording, size, color and font of the text):

Overview: The way the script works is by searching your page for an Emoodicon word string and replacing it with the appropriate image. To add any of our Emoodicons to a post, you just type the name of the feeling prefixed with r- for the robot set or k- for the kitty set. If I do that here, you won't see the text because the script will replace it with an Emoodicon, so I'll use a fake one so you can see how it looks… d-happy would bring up the Emoodicon for happy if we had a set that worked with "d." So type the word just like that, except with a "k" or an "r" and you'll get an Emoodicon once the script runs. You can add Emoodicons anywhere you like in the post.

How do you know which words to use? Just check the Emoodicon key for Kitteh and Emoodicon key for Bleep. These show you all the Emoodicons available and the words to use them in a post.

There are three elements needed to add Emoodicons to your blog:

JavaScript
CSS
Emoodicon Images

You really only have to think about the first two, since I'm hosting the images for you. If you wanted to use a different set of emoticons, then you would have to edit the script to bring images in from your own server.

Step One: The JavaScript

There are two ways to do this. You can either link to the script on my account (which means you can't customize the text or image size) or you can upload the script to your own blog. If you just want to link to the script, skip ahead to Install the JavaScript. If you want to customize it, read the next two paragraphs.

Get the JavaScript by clicking this link. Copy the script to your clipboard and then paste it into a file on your blog's server. On TypePad, you can do this in advanced templates by creating a custom index template and naming it mood.js (for Basic Templates, save the .js file and upload it using the file manager). On other platforms, you can either add the JavaScript to an existing JavaScript file, or upload it to your directory as you would any other file. Make sure that the name of the file remains "mood.js" and that you know the path to link to it (on my blog, the path is http://www.emoodicon.com/mood.js).

Customizing the JavaScript. There are a few things in the script that you can change. These are clearly marked in the Javascrit file with comments. The default script inserts the words "I'm Feeling:" in front of the Emoodicon. You can change that to anything you want ("current mood" whatever). The default size of the Emoodicon is 50 x50 pixels. You can also change that, although they get hard to read when they're smaller.

Install the JavaScript. It is very important that this script is the last item to load, because it recreates the page on the fly once it goes into action. That means that if you have a sidebar on the right as this blog does, it won't load the sidebar if the script loads first. So, at the very end of your page, include the following link to the script:

If customized: <script type="text/javascript" src="http://YOURLINKHERE/mood.js"></script>
If using my script: <script type="text/javascript" src="http://www.emoodicon.com/mood.js"></script>

Remember that pages load from top to bottom, left to right, so you want this snip of code to be the very last thing at the bottom right of your pages.

Step Two: Add the CSS

The CSS allows you to control how the Emoodicons are displayed. There are three classes to add to your stylesheet:

.k-mood

{
float: right;
padding-bottom: 8px;

}

.r-mood

{
float: right;
padding-bottom: 8px;
}

.feeling

{
display: inline-block;
color: #CC0099;
font: bold 18px/normal Verdana, Arial, sans-serif;
vertical-align: 70%;
padding-right: 8px;
}

k-mood and r-mood can be edited to float the icon and text left or right, and you can edit the padding to make the image play nice with other elements on your page.

.feeling controls the display of the text. You can change the color and font to match your blog. I suggest leaving the other settings as they are.

Feel free to leave questions in the comments or email me if you get lost, but overall this should be a pretty simple installation. Have fun!