« New TypePad Compose Window | Main | Demo of Iphone App for TypePad at WWDC »

John T. Unger

Emoticons for TypePad Blogs

John T. Unger May 29, 2008

Have you ever wanted to display your mood on individual blog posts in TypePad? Now you can!

I recently launched Emoodicon, a new site that sells mood rings which hold swappable emoticons (sort of like a secret decoder ring for how you're really feeling). I wanted to be able to use the emoticons on the blog itself, but more importantly, I wanted other people to be able to use them as well… so I've developed two ways for people to add the Emoodicon images to their blogs. There are two sets of images at present, one with kitties and one with robots. We'll be adding two more sets in the future based on the monkey and mime in the Emoodicon animation. I'm hosting the images, so there's no need to upload them to your own account.

Here's a sample of what the images look like:

Kitteh Emoodicons (Emoticon Key Here)
kitty emoticon angel.png kitty emoticon angry.png kitty emoticon bugged.png kitty emoticon cool.png kitty emoticon crying.png kitty emoticon devil.png kitty emoticon drunk.png kitty emoticon embarrassed.png kitty emoticon happy.png kitty emoticon headbang.png kitty emoticon heartbreak.png kitty emoticon hug.png kitty emoticon kiss.png kitty emoticon lol.png kitty emoticon love.png kitty emoticon relieved.png kitty emoticon rofl.png kitty emoticon sad.png kitty emoticon shy.png kitty emoticon skeptical.png kitty emoticon smirk.png kitty emoticon surprised.png kitty emoticon thumbs_down.png kitty emoticon thumbs_up.png


Bleep Emoodicons (Emoticon Key Here)
robot emoticon angel.png robot emoticon angry.png robot emoticon bugged.png robot emoticon cool.png robot emoticon crying.png robot emoticon devil.png robot emoticon drunk.png robot emoticon embarrassed.png robot emoticon happy.png robot emoticon headbang.png robot emoticon heartbreak.png robot emoticon hug.png robot emoticon kiss.png robot emoticon lol.png robot emoticon love.png robot emoticon relieved.png robot emoticon rofl.png robot emoticon sad.png robot emoticon shy.png robot emoticon skeptical.png robot emoticon smirk.png robot emoticon surprised.png robot emoticon thumbs_down.png robot emoticon thumbs_up.png


For Basic Templates: The first option will work for basic templates (or pretty much any site on the web) and uses a little bit of JavaScript that you can just cut and paste into a Notes Style TypeList. There's also some CSS that allows you to customize the wording and appearance if you choose. Full instructions for this method can be found here on the Emoodicon Blog. The advantages of this options are:

  1. It's easy and works anywhere
  2. You can insert a mood icon anywhere in your post
  3. You can customize it quite a bit if you desire

The one important warning about the script is that it must be the very last bit of code to load on your page. So if you want to add it to abasic template blog, put the Notes Style TypeList at the very bottom of your right-most column.

For Advanced Templates: The second option uses a wee snip of template code and CSS to function and is quite easy to install. It loads more quickly than the JavaScript version. This is the option I chose to use on the Emoodicon blog and it was inspired in part by Michigosh's recent comment on David's recent post, A Creative TypePad SEO Hack. Once you've added the code, you'll be able to use the Keywords field on your compose page to tell the world how you're feeling.

Click through to the extended entry for instructions on how to add Emoticons (or other images) to your blog using Advanced Templates.

The advanced template code version of this hack has several advantages over the JavaScript version: it loads faster and using the keywords field to log your mood is somewhat easier and neater than typing it into the middle of a post. The only potential disadvantage is that your mood will always display in the same place depending on where you insert the code in your template… with the JavaScript version, you can insert multiple moods anywhere you like in a post.

You will need to edit your entry-individual, entry-list and entry-list-sticky template modules to add the code below. If you don't see these template modules, you can create them and add them following the instructions in this Tutorial.

How to add the code:

  1. In the Design tab, select your entry-list-sticky template module.
  2. Paste the following code into the template in the place where you want the emoticon to appear. To place it at the top of an entry, put it right under the line that reads <div class="entry" id="entry-<$MTEntryID$>">. To place it at the bottom of an entry, it can go just above line reading <MTEntryIfExtended>. The entry-list-sticky module has two parts, one for stick posts and one for regular posts. Be sure to add the code in both sections if you want to display the icons on sticky posts. If not, just edit the second section of the module.

  3. In the code above, you can change the words "I'm Feeling:" to anything you want ("current mood" or whatever). The default size of the Emoodicons is 50 x50 pixels. You can also change that, by adding height and width tags to the image, although they get hard to read when they're smaller.
  4. If you wanted to use a different set of images, you would change the image path in the code above to a sub-folder of your own using the File Manager to upload the images.
  5. When finished, click Save.
  6. Repeat the above steps for your entry-individual and entry-list template modules. Click save for each module.
  7. Now, it's time to add the CSS. Open your Stylesheet and paste the following CSS at the end.

  8. There are a number of settings you can edit in the CSS:
    .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. If you changed the image size in the previous steps, you'll want to edit the settings for vertical-align.
  9. Once you're happy with the CSS, Click Save and Republish your blog.

How to set your mood:

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 into the Keywords field of your compose page. So, if you're happy you would type "k-happy" or "r-happy" depending on whether you want the robot image or the kitty. If you don't add anything to the Keywords field, nothing displays and the post will look the same as it did before you added the custom code. You can go back and add moods to older posts if you want, but it isn't necessary.

If you don't see the Keywords field on your compose page, click the link in the lower right corner that says "Customize the display of this page." In the pop-up window, under the heading Screen Configuration click the radio button for Custom (show the following fields). Select the checkbox for Keywords and click Save. More info on customizing the display of the compose page can be found in the TypePad Knowledge Base here.

Tags: , , , , , , ,


attila says:

Please keep me informed about future developments, ease of use, etc.

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference Emoticons for TypePad Blogs:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media


Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count



Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page



    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License