Mayura4Ever: How to Add Smilies for Threaded Comments in Blogger

January 15, 2015

How to Add Smilies for Threaded Comments in Blogger

If you are familiar with instant messaging / chatting or at least messaging, you might have come across emotion icons aka emoticons. Haven't you? Basically, emoticons are portraying facial expressions which comes in handy to convey your feelings or mood while drawing the attention of receiver. Imagine what if you could be using them in your blog comments as well. That could be fun, don't you think?

Emoticons

I don't think I'd need a few more lines to define what emotion icon is, and probably everyone who has been online or using mobile devices know exactly what I'm talking about. But according to Wikipedia:

An emoticon is a metacommunicative pictorial representation of a facial expression which in the absence of body language and prosody serves to draw a receiver's attention to the tenor or temper of a sender's nominal verbal communication, changing and improving its interpretation.

Yet, I believe a glimpse of emoticons would be the perfect definition ;)

Emotions for Comments

As you may have already anticipated, today I'm not going to talk about emotion icons, per se. I'm about to show you how you can integrate emoticons on your blog, so your readers can liven up their conversations with cute emoticons as well. Would that be a good idea? You decide :)

By default, in Blogger, even if a comment includes a smiley in text form, it interprets as text.

But once you integrate the smilies into your blog, the relevant text smilies (including the smilies in existing comments) will be converted to graphic images and rendered when you view the comment.

I've already discussed about adding emoticons for conversations, in 2011. By then Blogger didn't introduce their threaded comments feature for us bloggers. Now Blogger has threaded comments and if your blog has threaded comments enabled, you can follow the instructions and converse with smilies within your conversations.

Before You Go:

* Smilies are compatible with these comment form types - Embedded, Popup window and Full page. But unless you are using Embedded comment form, your readers won't be able to preview corresponding codes for smilies and they will notice after posting their comments. Hence I recommend switching to Embedded comment form.

If you think switching to Embedded comment form is a good idea, read How to Enable or Disable Comments in Blogger and change your comment form type to embedded comment form.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Now navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button.

5. Now search for the following tag within your template.

</body>

6. Add below line of code right before the </body> tag.

7. Now find below line of code in your template,

Note: You might encounter multiple search results and make sure you follow the same steps to each search result you come across.

8. Add below code snippet right before the line you found at above step. It will display available smilies for visitors above your comment form.

Color Indication Information:

   - Background color of smiley display area

   - Alignment of smilies and related code on display area

   - Padding of smiley display area - Top, Right, Bottom, Left

   - Width of smiley display area

   - Height of smiley display area

9. Now search for the following line of code in your template,

<b:includable id='threaded_comments' var='post'>

10. Expand the set of code if needs to, and add the code snippet under step 8, right after the above line of code.

11. Now save your template.

12. Go back to view your comment section to find your cute smilies animating.

Note: Smilies will only be rendered after submitting the comment, not while you're composing it.

Enjoy :-)

30 comments:

Harleena Singh said...: Hi Mayura,

You know how much I LOVE emotion, and I know you do too :)

That's why so many of your comments have smileys all over the lines, and I love those! Yes, you shared some nice ones here, and like you, we have @ROHAN CHAUBEY - who is a precious ABC (Aha!NOW Blog Community) member and a group admin too - another pro at emotions. I am sure you'd both hit off well, as you both love emotions, just like me, thus I mentioned him here :)

I guess these can be used on WordPress too just as they're used on Blogger? More learning lessons for me!

Thanks for sharing. Have a nice weekend :); January 16, 2015 at 11:34 AM
Mayura De Silva said...: Hi Harleena,

Ha ha... Of course, I know about that ;) And you observed me right. Like you, I love smilies a lot too :)

Actually, I've adapted the smilies once I've shared here to work with Threaded Comments dear. This script is only compatible with Blogger comment form, but it can be modified to work with WordPress or another blogging platform as well.

I'm glad you mentioned Rohan and I'll take a peek into his blog too :) I'm sure there's so much to learn indeed.

You have a nice weekend ahead too, Harleena :)

Cheers...; January 16, 2015 at 11:54 AM
Kaarunya said...: Ah the post for including emotions :) I don't whether you remember, but long time ago I did ask you for this post :)
You know, I think your readers will be glad to listen to you talk about emotions too :) So you can elaborate if you want :p
There is never a proper conversation without the cute emotions, as you say :); January 16, 2015 at 12:54 PM
Mayura De Silva said...: Hi Kaarunya,

I think you've got a better definition for smilies after all ;)

Thanks to your late reminder, I recall your inquiry on using smilies within posts as well :) But unfortunately, this is valid for comments only dear.

I played with the script for a while on enabling it for posts as well, but lack of HTML tags in Blogger templates makes it harder to turn smilies on within the posts. But I'll keep working and let you know if I can find a solution on that :)

Ha ha... Emotion icons talk themselves enough I believe :) Aren't they? So I could save a paragraph too :D And... I agree. I find emoticons brings a lot more to the conversation, hence I use 'em more often like @Harleena Singh mentioned :)

Cheers...; January 16, 2015 at 1:13 PM
Kaarunya said...: Oh thank you :)
I meant integrating the google plus profile with blogger, now I know there is no way without doing that... Thank you :); January 16, 2015 at 4:57 PM
Mayura De Silva said...: You're welcome :)

Integrating Google+ profile has several benefits which you can read here as well - How to Integrate Your Google+ Profile with Blogger.

But when it comes to enabling Google+ comments, I think it's always best to consider Pros and Cons I've mentioned in this post, Kaarunya :) With Google+ comments, the control over comments is less, compared to Blogger comments.

I hope it helps :); January 16, 2015 at 5:13 PM
Mayura De Silva said...: Smilies define themselves the best, I believe :) And I was wondering if there's any way to use smilies in posts like you asked once too, Kaarunya. Imagine how nice if it was possible :)

Ha ha... That I know for sure and I don't think we can get enough of smilies, ever :) So no "too much".; January 16, 2015 at 5:19 PM
Kaarunya said...: I know :) I did go through everything you have on the post, you thought I skipped nah :p

It sure did help :) Thank u again :); January 16, 2015 at 5:25 PM
Kaarunya said...: I know, it would be so good :) It would just bring the post to life :)
Haha ok then it's never enough with smilies, I will remember that :); January 16, 2015 at 5:28 PM
Mayura De Silva said...: I'm sure you read 'em, Kaarunya :) I wanted to reconfirm as I've got some queries from bloggers after using Google+ comments that there was no Comments tab, comments disappeared after changing URL and so.

I'm glad I could help dear :)

(Better luck guessing next time :D); January 16, 2015 at 5:41 PM
Mayura De Silva said...: Exactly! As you'd say "Bring your comment to life" :); January 16, 2015 at 5:45 PM
Kaarunya said...: I know you mean well :) Thanks a lot :)
Next time we will see :D; January 16, 2015 at 5:51 PM
Kaarunya said...: haha I would for sure :); January 16, 2015 at 5:53 PM
Mayura De Silva said...: You're most welcome dear :)

Owh... Yeah! ;); January 16, 2015 at 5:57 PM
Muba Mi said...: Hi Mayura
Emoticons boost readers engagement as so many expressions can't be expressed in words as better as they can be with an image or pic. So they are pretty good to find at the end of comment to use from them of your choice to make your comments more attractive.
Thanks a lot for sharing this wonderful tip and the coding to apply it at a Blogger's blog.; January 16, 2015 at 10:07 PM
ArtaGene said...: Hi Mayura,
Wow, don't know how you keep all that in your head.
so very smart and willing to share.

I'm with Harleena I'm always glad to see you, a smiley for sure!
:-); January 16, 2015 at 10:38 PM
Brenda Lee said...: Great tutorial as always Mayura! Definitely sharing it!; January 16, 2015 at 10:43 PM
Mayura De Silva said...: Hi Muba,

Excellent description about emoticons mate :) I couldn't have said it better. As you implied, emotion icons can express the emotions of the writer when words fail to grasp 'em or amplify the meaning of words.

I'm glad to hear you have enjoyed this post as well :)

Cheers...; January 17, 2015 at 2:29 PM
Mayura De Silva said...: Hi Arta,

It's always nice to hear from you as well dear :) Smilies indeed!

Ha ha... Actually I don't have to keep 'em all in my head though. Then I'd forget all my favorite desserts ;) Logic does matter, and rest can be referenced when coding.

You and Harleena are always kind :) I do appreciate it much.

Cheers...; January 17, 2015 at 2:37 PM
Mayura De Silva said...: Hi Brenda,

Yippy! Glad you have enjoyed it and appreciate sharing with your friends as well dear :) You rock, as always.

Cheers...; January 17, 2015 at 2:38 PM
Sue Price said...: Hi Mayura,

You do such great tutorials and this is another great one. I too love using emotions and do it on Skye and Facebook. I have never used blogger but I see you have said in a comment it can be incorporated into WordPress.

Have a great week

Sue; January 20, 2015 at 1:01 PM
Mayura De Silva said...: Hi Sue,

Can't go without smilies, eh? Smilies all around ;) I'm glad you enjoyed the post and appreciate your compliment as well dear.

Of course, you can incorporate emoticons on WordPress, simply by using a plugin too.

You have a great week there too :)

Cheers...; January 20, 2015 at 9:08 PM
Corina Ramos said...: Hello Mayura,

I know anyone who uses blogger will be happy to get this tutorial from you. Thanks for putting it together with a step by step instruction.

If I were to ever transition to bloger your posts would be the ones I read for guidance to set it up :). I wonder if I can get this on WordPress?

Hope you're having a great day my friend! Thanks again for a great post!; January 21, 2015 at 1:31 AM
Mayura De Silva said...: Hello Corina,

I hope so too dear, and appreciates your kind words after reading this post as well :)

Of course, you can set up smilies for your blog on WordPress without having to follow this tutorial :) You can turn on the built-in smilies option or if you prefer different kind of smilies, you can go for a plugin.

Hope you are enjoying this lovely week too, dear friend :)

Cheers...; January 21, 2015 at 2:32 PM
Donna Merrill said...: Hi Mayura,

Happy New year my friend. When it comes to those smiles, I always think of you because you always put them in the comment section on my blog. It makes me smile.

I do use them sometimes, mostly on social media...love to put those emotions up!

As usual, I will pass this on, especially for my Blogger friends!

-Donna; January 22, 2015 at 12:45 AM
Mayura De Silva said...: Hi Donna,

Yippy! Happy New Year to you too, dear friend :)

Ah... I love smilies indeed, and it's really nice to hear I could put a smile with 'em too dear :) I know you have been using them on Social Media, especially on Facebook. They really does bring out emotions to the conversations. Isn't it? :)

And... I appreciate you sharing with your friends too dear, as always :)

Cheers...; January 22, 2015 at 11:27 AM
Anonymous said...: zielonyflaming.pl With thanks for sharing your superb site.; January 21, 2021 at 5:54 PM
Anonymous said...: https://kosmetikana.pl Keep up the great job and producing in the crowd!; January 27, 2021 at 12:11 AM
Anonymous said...: natury-smak.pl Incredible....such a advantageous webpage.; January 27, 2021 at 1:48 AM
Anonymous said...: http://nutrisolutions.pl Thanks regarding furnishing like wonderful write-up.; January 27, 2021 at 4:04 AM

January 15, 2015

How to Add Smilies for Threaded Comments in Blogger

Emoticons

Emotions for Comments

30 comments:

Post a Comment