Jul 19, 2007
WordPress Plugin: Animated Chinese Emoticons for Comments
Anyone who’s familiar with Chinese websites – especially Chinese chat forums (BBSs) – will know all about those crazy little animated emoticons. Yeah sure, you’ve seen emoticons in your MSN messenger before, but Chinese emoticons are especially messed up.
So messed up in fact, that I decided I just had to install this plugin:
CoolCode.cn Emoticons Plugin from Xenium and Andot.
Download Plugin directly (Zip)
Note: Normally I wouldn’t link directly to a file on someone else’s server, but as it’s hosted on a Chinese webpage, it might be impossible to find otherwise. Hope that’s ok guys.
Here’s a preview of the emoticons listed:
Installation:
- Upload the Emoticons folder to your plugins directory.
- Find this code:
- And just above that, insert this:
if (class_exists('emotions')) {
emotions::bar();
}
?> - Go to plugin management page in Wordpress, and click Activate Plugin
Issues:
For all the emoticons to display properly (all 60+ of them!) you need a fairly wide text column. Or else it might push your sidebar to the bottom, as it did with mine.
One workaround for narrow text areas:
I just chose the best 15 emoticons, and deleted the rest from the images folder included in the emoticon plugin directory. Maybe 60 is a bit much anyway… In any case, they now display sans probleme on just above my comments box (see below).
Good stuff.
UPDATED WORKAROUND: Reader Evitc provided this solution of modifying the CSS in the comments.
I’ve been running this one on my much neglected Chinese blog for months now, but I hadn’t bothered to install it over here.
I think it looks good. And they’re kinda fun too. Click the Comments link to test it out.
Incidentally, my WordPress theme, Hoofei, was created by a Chinese developer as well. Good to see China representin’ (far) East side when it comes to WordPress!
Has anyone else spent any time venturing into the wacky world of Chinese web development?
Nice!
:em55: :em02:
:em32: these will make me want to comment more often! :em47:
Hehe, these emoticons are from a Chinese IM software named “POPO”. I like them. :em47:
Hi,
Where do I find the code at?
Thanks
I have the plugin off the chinese site…it took forever to load. But those are massive. I wanna use em anyway!!
These are some great emoticons! Prepare for the oncoming rush of downloads :em32:
Yeah, they are pretty cool for sure. I wish my text area was wider so I could use them all. :em20:
Apologies :em11:
That must have been one of the dumbest question you can encounter.
I was simply drunk :em38:
Thanks for this great plugin. It can really make one smile :em02:
Oh, there is one not so silly question though.
Where can I designate the number of emoticons I want to show per line?
Thanks
Hi admin,
I think you should hack the default CSS of this plugin. Just change the value of width to “100%” then all of the emoticions will be displayed in several lines instead of only one line.
Again, personally not sure how to change how many can be displayed per line.
I simply removed some images from the images folder, so that only my favorite 15 emoticons displayed.
If anyone does find a neat hack for the CSS, please share!
:em02: :em02: :em02:
I believe evitic’s solution is the easiest way :em47:
Hi admin,
Here is the hack. Download this css then replace the default css with it. By the way, I made another GTalk Edition. It is here, http://hellobmw.com/archives/wp-plugin-mod-emotions-gtalk-edition.html
:em62: hey nice plugin.. i already set it up at my blog. btw you can get rid of that Thum image in your emotion list by deleting Thumb.db in your emotion file at server. :em02: :em02: I love this plugin :em20:
Thanks for the tip Myo! Just got rid of it just now.
I was kinda stumped by that one!
Great plugin! The smileys look too cute on my blog now.
Thanks for posting!
thanks! this is awesome!
hey…thanks for sharing this with us…as a thank you gift, I’ll share with you the little hack process I did to make the width smaller…
I edited emotions.css a little bit…
This is the original one…
?#emotion {
width: 6000px;
margin-bottom: 10px;
text-align: center;
}
I replaced it with this one…
?#emotion {
width: 550px;
margin-bottom: 10px;
text-align: center;
}
Basically, I just changed the width value from 600 to 550 to the width of my blog area…however, you guys can modify the value a bit more, if your blog area width is more smaller…maybe you could try changing the value to 400…
Thanks!
where do i find the code?
sorry, wrong question…
can i use these smilies for my blog post?
hey, it’s nice
i’m gonna try it
I’m so confused. I can’t figure out how to get this plugin to work. I see some commenters have used them as comment replies, but I don’t see any smilies to click on. ?
:em62: