Somewhere between enlightening opinions and intolerable bullshit. This is the dumping grounds for the results of Blogger Smilies!
Posts can become dull and boring when no emotion comes through words. After all, blogs are meant to be a 'personal' medium, which goes from people to people. What better way to portray emotions than use emoticons and smilies? Blogger itself doesn't give us a way of doing such trivial things, which is why this is another little script which I ported over from the old Blogger to the new one. It uses simple Regular Expressions to replace the text version of the emoticons to their pictured cousins!
There is nothing much for you to do here actually. You just need to include this one line in your <head> section:
<script src='http://aditya.vm.googlepages.com/addSmiley.js' type='text/javascript'></script>And you're done! :) The script assumes the content of your post is housed in an element called 'post-body'. If it's different, then just add one more line under that line:
postBodyClass = '';
The script will be called once the page finishes loading, so that it doesn't hamper with the page load times! The emoticons are housed at my Google Pages account, which should be able to handle the load pretty well. They're tiny cute icons after all! So enjoy your emoticonified posts!
Major Update: Seeing as how people wanted adding in more classes (or classes that I wasn't offering by default), I have reworked the script (quite a bit) to fit in probably all kinds of situations. But, in doing so, it is a little more complicated to implement if you want to customise it 'beyond' my default settings.
Everything is handled within arrays now. I have pre-programmed the function to add smilies in classes of 'post-body', 'entry-content' (as asked by Stephen) and 'comment-body'. These three should suffice 'most' cases in Blogger. However, if you don't fall under any of these, you can make a manual function call at the end of the posts widget in your template. Yes, you 'will' have to get your hands dirty for this. So, supposed your template code for your posts look like this:
<b:section id='Blogposts'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>Your function call for 'addSmiley()' will come after this. Now, within the '()', list out all the entry containers you want to add your emoticons to. So, if you want to add smilies to say 'post-author' and 'post-notes' as well, your code now becomes:
<b:section id='Blogposts'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<script language="javascript">
addSmiley('post-author', 'post-notes');
</script>
And this comes 'after' the </b:section> line above. Followed? Good! I'll restate that this is 'only' if your emoticonizing content does not already fall under the classes of 'post-body','comment-body' and 'entry-content'.
Another update: Deepak, has come up with a userscript that makes adding emoticons and other basic rich editing features easier to add in your comments made in Blogger. Go catch it at Blogger Hacked
Update: Ramani has listed out the CSS required if you see borders around your emoticons or they appear to squashed up. Also, I had forgotten to list out which emoticons are supported. The general ones are as follows:
:) or :-):( or :-(
:P or :-P
:D or :-D
:$ or :-$
;) or ;-)
Hope this helps! :)
80 comments
Thank you, sir!
During the last days, I was desperately looking for an opportunity to embed smilies - looks like you have telepathic powers. ;-)
Aargh smilies! :) I will have to try this out in one of my blogs. I mentioned your post here
I'm glad you found this useful! :)
I'll be putting up a couple o' more of the little add-ins that I've developed for my blog soon! :)
great! thanks. i picked it up immediately for my blog. Two things:
1. You could give the CSS that goes with this. at first, the smileys showed up with border, margin, padding etc. i then browsed through your source code and defined this.
.post-body img#new {
margin:0px;
padding:0px;
border:none;
}
2. You could give the list of smileys supported and their text equivalents. i didn't know that you support oops, lol too :-)
Ah! I'm sorry about that! :P Yes, the CSS is a little important, thanks to how Blogger auto handles images.
I have only the icons for those, but they are tied to different smiley codes. I believe 'lol' is tied to ':D' and 'oops' is tied to ':*)', I'm not sure at the moment! :P
It supports all the general smilies. I don't go to the extent of adding in the special ones (like the angel or the party one) that were added in by MSN and other IM Clients. I think a good reference will be the ones GTalk offers :)
Very nice, but of course I had already swiped your code. :-D
now theres only smilies on comments missing....
I have about 20 different innerHTML.replace for my smiley hack. The reason is that I see people using different ways for different smileys when they comment.[ : ) and : - ) for smile, for instance. ]
Otherwise, it is more or less same as yours.
But I really don't prefer so many loops there. :D
Mine adds a third loop because of my tweak in comment block (otherwise it won't work with author comments). Maybe I should add another div to wrap the comment-block. But I'm lazy. :D
Hey. I got an idea right now. A Greasemonkey enhancement to your smileys hack :)
I'll release it by tomorrow.
Oh. Does this /\s:-*\)/g take care of both types of smiles?
Wow! I'm gone for a day and see what happens! :P Ok, I'll try and answer all the comments:
@Phydeaux3: Not a problem! Glad they found a home in your blog as well! :)
@Ricardo: The function 'does' add smilies to your comments, as long as your comment contents are wrapped in a 'comment-body' class. I forgot to add that little detail up there! Sorry about that :P
@Ramani: 'Advanced' Regexps are your friend! :P Haha!
I agree, it can be a problem. But my regexps take care of the little nose in between the eyes and the mouth for all, the eyebrows I didn't bother because I am all for standardisation of smilies! :P
@Deepak: That's cool! I'd love to see it :) And yes, it does!
*Phew*! I hope I answered all! Thakns for the amazing response to these ... I never expected it to get 'so' much attention!
Cheers! :)
Hi, Aditya!
I temporarily removed the script yesterday because I encountered a problem: it looks like it would suppress other javascripts in the post-body (e.g. Snap, Lightbox, PeekAboo-Posts) - is it because of the onload-function?
It shouldn't be! Could you paste the exact error message you're getting when you're clicking lightbox-ed images, or the peek-a-boo post links here ... I'll look into it.
There is nothing wrong with my code as far as I can see it.
Well, I don't get error messages, but lightbox-ed images suddenly open in a new window instead in a lightbox. Snap doesn't show up anymore within posts, but it still works in the sidebar. PeekAboo-posts don't expand when I click on the corresponding button - that goes for Opera.
As far as Firefox is concerned, it's almost the same, although PeekAboo-posts seem to work here.
Last but not least I tried it in IE, where it worked just fine.
How ironic! 'My' script working flawlessly in IE :P
So you get 'no' error at all? Even while the page is loading? Could you put the script back and let me know? I'll have a look myself...
Indeed, that's weird. :D
Okay, the script is back in action^^
Now that you mention it:
My last post features a PeekAboo-section that works while the page is loading and stops working when your script starts adding smilies.
Ok, I've had a look, and I'm not getting any errors either. I really don't know what to make of it.
I guess you'll have to tackle it the brute way. Follow these steps:
Download the JS file from the link I've given. Copy the function 'addSmiley()' to your <head> area (put it within <script> tags with the CDATA wrappers)
Then, the point where the posts widget ends, put in the function call (<script> addSmiley(); </script>)
That should fix it. I'm sorry for the inconvenience, but I really cannot see any errors being thrown by either of your scripts, which means there is no real conflict.
Hi! thanks for your reply, but the smilies still dont show up on my blog comments, heres an example:
http://ricardouk.blogspot.com/2007/01/nasa-pode-ter-encontrado-vida-em-marte.html
Just a suggestion - support both the blogger-almost-standard post-body class and the microformats-hatom-web-standard entry-content class both natively :)
This is very cool. Thanks for doing it and hosting them.
My user script is done. Have a look at my blog ;)
@Ricardo: I have updated my instructions with the new implementation of the code in case your class isn't supported by default. Please have a look and let me know if you have furthur problems :)
(I have checked it myself though, and it works for your comments too now :) )
@Stephen: The reworked script supports this now. I had forgotten about it actually. But we all love microformats, don't we? :P
@Shelly: Not a problemo!
@Deepak: Great work smartypants! :P I have seen and commented!
Hi again!
I still cant see the smilies on the previous link i gave you, i can smilies in your blog both in comments and posts.
i can only see smilies in posts in my blog, could it have something to do with me using Ramani´s Author comment highlighting hack? What its strange is that you can see them and i cant :)
I have sent you a mail with the required steps! :)
Thanks a lot! Works fine as well when displaying smilies in the sidebar widgets, either recent comments or posts, thank you.
is the possibility of showing them without the greasemonkey script in the comments pop up window in the make?
That would actually not be possible, because the comments popup page is not ours, hence we can't do anything to it internally. A greasemonkey script 'is' required to bring any extra functionality to a page the code of which cannot be tampered with!
Glad you got it working :)
With Stephen's peekaboo comments, its possible to see smilies in main page!
I havent put it in my blog yet but it worked on the blog where i test the hacks
Great job guys! Thank you
http://singpolyma-tech.blogspot.com/2007/01/asynchronous-peek-boo-comments.html#c116845091326707153
Hi! ive been playing with stephens peek-a-boo comments and i got it to work properly now, can you tel me which class i should use in the manual code, i tried 'comment-link' but it doesnt work.
Sorry for being such a pain but these are the 2 things that i wanted the most in my blog. Thanks
Can you provide a smiley code for classic template?
Ah! Well, that's quite simple. But you'll have to do some hunting and editing of your own for this. Look for this line in Stephen's code:
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "",thisblog_showCommentPhotos);toggleitem("comments" + data:post.id + "");return false;"'>
And replace it with this:
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "",thisblog_showCommentPhotos);toggleitem("comments" + data:post.id + "");addSmiley();return false;"'>
That should do the trick! :)
@Raquel: If by 'classic' you mean for the old Blogger, this is backwards compatible :)
Simply plug it in!
Hi Aditya, yeah it works on blog post but its not working on the comment area.
If you mean this blog, then I can see emoticons in the comments as well.
People use strange character combinations sometimes, which aren't caught by my function. But otherwise, it works just great! :)
Talking about strange character combos, you can add case-insensitivity to your regexp. It will help, because people generally write : p or : P for tongue. :)
Hi Aditya, sorry for bothering you. YES it works good in old blogger. I wasn't patient enough to download the smiley, I should wait for a second or two to be downloaded.
Thanks again, can I invite you for a dinner?
Hehe! Well, you could ... but it'd be a task showing up on time from the other end of the planet! :P
Glad you got it working!
Aditya, thanks for the tip.
I didn't have the time yet to give it a try, but I hope it'll work.
Cheers!
hi!
recently my blog started to take more time than what it usually takes to load about 1 min sometimes, so i started to look for the source of the problem, before let me say that i redone all my blog ahcks from scratch twice, widgets and all.
the smilies script when put in the blog header makes the youtube videos on my blog to load twice along with everything that has a scripti the blog page. I was testing the scripts one by one and the smilies script was the one causing that.
This script cannot cause a delay in pageload. What 'could' be causing the delay is the time taken for the script to load from my Google Pages.
If you have a faster host somewhere which can host the script for you, please feel free to transfer it there. Or else, you can always paste the code directly in your template. That would create no lag since it doesn't have to load anything.
As far as the videos thing goes, my script worked with the 'innerHTML' property, which takes into account any markup which might be there. I have changed it to only look at the text, not markup. But this shouldn't actually cause any of the problems that you've stated.
I will look into it nonetheless.
Hi, just wanted to say that in no way my comment is to be taken in a destructive way! it wasnt my intention.
Whenever i insert the script in the header my page gets loaded, and then hangs for 2 seconds and loads the videos and somemore stuff again.
i reconstrutect my blog again from scratch and as soon i install just the script inthe header the delay comes back, i will try to port the script and images to my space at google pages or write it in the htnml, ill let you know the outcome
Thanks
i folowwed your advice:
1: hosted the script in my host but with images on yours and same problem persisted
2:hosted the script and images, also changed the paths in the script but the problem was still there
3: copy/pasted the script but it didnt accept it, i put javascript tags at the begining and end but sill didnt accept.
hope this helps tracing down the problem
Hi Aditya, I linked about this post in my blog, hope you can visit there.
Oh btw, I hosted the script and changed the smilies. I hope it won't bother you. If I want to add more character symbols, how will I do it? For example this one, \:D/
Hey, Aditya.
Thanks for the smilies!! BTW, how do you make widgets stack side by side on your footer? It looks pretty nice!
the same problem like Alastor
I like this post. It's very nice. Thanks :)
@Ricardo: I'm sorry! The only problem I can see is that since my script changes the 'innerHTML' property, it affects codes in it as well. So if you have any part of your videos' markup which forms an emoticon (for example a javascript function which ends has 'xxx;)xx', it'll replace the text with the tag for the emoticon. That could be causing problems. Apart from that, I really cannot help..
@Raquel: You tell me about them! I'd love to expand the script to hold as many emoticons as possible. However, you'll need to give me an image of the emoticon associated with the characters as well, and I'll add it in! (Try and make them look like the current emoticons as much as you can?)
@Michael: It's a creative use of the 'float' property! Have a look at my source code for an idea.
@GG: And that would be?
@CMS: You're most welcome!
Very nice :-P
Thanks Aditya.
Hi Aditya, Whenever I insert the code given by you in the head section, after saving the changes, the End-Script tag (/script) gets truncated automatically and thus the hack is not working.
Please tell me why it is so. :?:
I believe the tag you're seeing is this (after saving):
<script src='http://aditya.vm.googlepages.com/addSmiley.js' type='text/javascript' />
That is perfectly fine. If you don't see your smilies, wait for the page to finish loading. My script adds them in once everything is loaded, so that it doesn't interfere with any other scripts on the page and reduces load time :)
Yes but still I cann't see them after a lot of time and reloads. You can see the test Post Here. I have uploaded my template Here for our kind perusal.
Please check and tell me where is the problem.
Ok, I think I know what's happening. My regexps tries to match only those smilies which have a space in front of it, so that it doesn't accidently match any kind of code and spoil that.
Right now, your post body contains:
<p>:)</p>
Try and write something, give a space and then the smiley. That should work :) Like this:
<p>Testing smiley :)</p>
Let me know how it does!
Thank You Aditya, you were right. After inserting a leading space, they are displayed now. :)
Can you pls add some more smilies to your script. The text equivalent are given in this Post on my Hindi Blog.
Well, I could add more of them in, but I really don't want too many emoticons showing up in posts, especially because I believe they become something of a distraction when used excessively. So I guess it won't come from me ...
Seeing how the attributes of my license stands, I'd gladly give permission to anyone to extend my script to add contain more smilies :)
well, I did it! and thanks again. But look at this post of mine, it doesnt show all the smileys. Any clue?
Yep! The same mistake Shrish was making ... put in a space before your smilies. This is to avoid any emoticonization of codes which have special characters and alphabets in them, sometimes forming smiley combinations :)
thank you...
Nice work. Now I have to find a new excuse not to blog. :-s
Yep! And a solid one at that :)Haha!
Nice to see you around here!
well i give up, after creatng some tes blogs with a fresh template the problem is still there if its not the videos pictures get reloaded, i hosted he script myself nd images butr that didnt help.
is everyon on super +20mg or am i seeing stuff that its not there, well ive tryd everything.
Thanks Aditya
adi thnx a TON!
hi...
i how to i can delete border of emoticons? when I follow all and test to post some text with emoticons but there have include. how can i delete?
Than you for your....
“...i how to i can delete border of emoticons?....”
I am guessing you want to remove the borders Blogger automatically puts. You juts have to apply a CSS definition as so:
.post-body img#new {
margin:0px;
padding:0px;
border:none;
}
Hope this helps! :)
thanks dude. Helped the cause.
'http://site.gman.googlepages.com/Emoticon.js'
This is my modified code. It has ~ 100 Yahoo! Messenger Emoticons (hidden included)
Homepage:
http://gman-blog.blogspot.com/2007/06/emoticon-dnh-cho-blogger.html
plz help me,i want smilies on my blog, when i copy and paste the code and save the template it is changed to the following code and i dont get smilies displayed on my blog posts. I dont know any reason why this happened to me. plz help me
script src='http://aditya.vm.googlepages.com/addSmiley.js' type='text/javascript'/>
i have placed the code above the /head> section. plz send answer to my id hariharakumar2000@yahoo.com
my blog
http://hariharakumar-blog.blogspot.com/
Testing testing :D
thanks for your hack!
hi aditya.
i got a little problem with the space in the smilies.
in need to eliminate the need of the space before the smilies, how can i do that?
thx for reply. :)
Thnx alot Aditya.. Hats off off 2 u for this wonderful job..wrked gr8 for me...
I hav added ur blog in my blogroll... ;)
btw my blog is www.hash-rocks.blogspot.com
Hi Aditya.. your script did not work in my blog..could u plz help me
Hi Aditya!
I'm a newbie in this blogger thing,,could u help me out?..
I'm so excited to add emoticons to my blogger BETA, I can see you have given the script, too. But is there any code I have to change if I want to use other emoticons? I mean--not the yellow ones--e.g.kao anis.
Thank you-thank you-thank you!!
Very helpful, Thanks
Ver helpful, thanks..
By the way, may I modify the javascript? I want to add more smileys.. :P
dear, aditya, i've added some modification to your script for my blog. But I've added the credit too which tells that the script was from you once..
Thanks
hi.. newbie blogger here. what's the css code so that my page would display smilies on page elements? i want to put it there so that maybe commenters know what to type in to get smileys.. thanks! hmm.. maybe i'll settle with a picture for now.
Hi Aditya,
Using the same idea, I have done somthing that will draw attention to the referral ads from th blog post body to generate more AdSense revenue.
More details
Hi! Doesn't Ramani "no-border tips" works for Internet explorer?
Does it?
Sorry for my bad english :p
@Tiamotiodio: Yes, the no-border CSS works for Internet Explorer as well.
What kind of emoticons are these? MSN? They're so cute, I'd love to use more than the standard "smile" and "wink" ones!
I don't really remember. I think they're a custom emoticon pack I found somewhere.
I'm not developing this anymore, but I'm sure someone with time could add more emotions :) I'd be happy to let them, and link them here...
Post a Comment