Making the COMMENTS Link more User Friendly.The "0 comments" link at the bottom of the blog posts can hardly be called intuitive. Viewers fail to understand it's significance. That is why on this blog I have customized it to make it more viewer friendly.
If there are no comments on the post this is what appears "Be the first to leave a comment!". If only one visitor commented on the post viewers see "1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." If more than one visitor left a comment than you see "n VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." where 'n' is the number of comments left.
This can be done by customizing the comments code.............ENABLE COMMENTS
The first step is to enable comments in your Settings. There are three places where comments have to be enabled. Login at Blogger.com and click on Settings link on Dashboard. Follow all steps outlined in Tips on Blogger Comments to enable your comments.
This will make the comments show up on the Post Pages. On the Main Page comments are not shown since it would make the Main Page slower to load if there are many comments. If after enabling all comment settings they are still not seen then possibly your template code has been corrupted. To reset it first backup your widgets data and customization. Then login at Blogger.com and click Layout link on Dashboard. Click Edit Html subtab of Layouts tab. Scroll down to bottom of Template Code box and click on the "Revert Widget Templates to Default" link. This will lose any customization in widget templates which you can restore from the backup you had made first.MODIFYING THE CODE
To modify the comments link code login at Blogger.com and click Layouts link on Dashboard. Click the Edit Html subtab of Layout tab. Click the 'Expand Widget Templates' checkbox on top right of the Template Code box. Wait for the page to refresh and scroll down to locate this code in the Blog Posts widget :<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if
cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
Copy and paste the code below instead of the above code :<p style='font-size:90%'>What have you to say?</p>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if
cond='data:post.numComments == 0'>
<p style='font-size:90%'>Be the first to leave a comment!</p>
<b:else/>
<b:if cond='data:post.numComments == 1'>
<p style='font-size:90%'>1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
<b:else/>
<p style='font-size:90%'><data:post.numComments/> VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
</b:if>
</b:if></a>
</b:if>
</span>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p style='font-size:90%'>Who has talked about this post?</p>
</b:if>
Preview and save the template. To increase the size of the letters increase '90%' in the code above.
You can see the modified comments link in action in this blog.
Enjoy!
Like this article? Subscribe to the RSS feed!
Bringing Google+ Comments to Blogger
-
*Cross-posted from the Google Official blog***
*
*
*Posted by +Yonatan Zunger, Principal Engineer*
**
*Reading and responding to comments can be one of...
60 comments:
Excellent! Thanks for this, really does increase the likelihood of people leaving comments on posts! Jas
Thanks for this post. I've been wondering how to do it.
Hello!
Being a novice computer user is a challenge. If I take my time following your directions then I am usually able to do these new things.
Thank you very much,
Belle
Thanks for another great post, Vin. It worked like a charm. I just have one question: Is there a way to specify the color of the text for the statements? For instance, if I want "Be the first to comment" to appear in the same color as another element in my blog and I have the color ID #, is there a way to do this?
Great idea, but it's just not working for me. I'm getting this error message which I suppose I should report:
We're sorry, but we were unable to complete your request.
When reporting this error to Blogger Support or on the Blogger Help Group, please:
* Describe what you were doing when you got this error.
* Provide the following error code and additional information.
bX-ivzkql
Additional information
blogID: "some long number"
host: www.blogger.com
uri: /html
This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.
Tiffany Partin,
You can use the same Html tags to change the color of the Text. Just like I have used font-size tag in the code above.
See Tips on Formatting Text in Blogger.
mg,
That is a connectivity error. Try clearing the cache, rebooting, from another connection or from another computer. Also try at times with less traffic like nighttime.
Try using another browser. Use Firefox browser.
Thanks Vin. I only use Firefox or Opera and in the end it worked with Internet Explorer. Probably a pretty clear cache with IE!
Very timely and easy to implement. I was just tinkering with my comment code last week to spice it up a little.
Hi, vin. I keep getting this message after following the instructions. What did I do wrong? Pls help!:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "span" must be terminated by the matching end-tag "".
Orchidsunset,
If you have a span tag like this :
<span class='post-comment-link'>
Then it must be closed by a matching </span> end-tag.
Look at the second code box in the post above. The fourth line from the bottom in the code box contains the matching end-tag :
</span>
Thanks for this, no one can find the Comment button on the standard format.
I'd like to take off the last part where it says "who has talked about this post?" how can I remove it? I like the rest of it though! Thank you
Us in a paragraph,
In the code I have provided above delete the second last line :
<p style='font-size:90%'>Who has talked about this post?</p>
Hey Vin, thanks again for a really hlepful post. It's working, but I wanted to take off the "What have you to say" and "Who commented" lines. So I took them out of the code, but now blogger says, "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag."
I don't know what end tag to put, I don't see "div" in the code you gave us anywhere. And I'm an HTML idiot.
Help please, and Thanks!!!
Vin, disregard my last comment, I figured out the tags.
Thank you for this post!!!!
How about using a Haloscan.com or JS-kit for comments?
I think they are more user friendly!
Shailendra,
Before installing any third party product backup your template and comments as insurance.
Also test the products on a test blog first installing them, then posting coments and then uninstall the products to see if your comments are not deleted after uninstall.
Very fine post. Thanks.
Thanks a lot for this entry, Vin. As usual, you're so helpful :). I noticed it days (weeks?) ago but didn't have the chance to try it. I did it now and it worked as a wonder :D.
By the way, I'm linking your blog in my blog :). That's the least I can do.
hallo und unbekannterweise ein netter gruß aus
saarbrücken. wünsche eine sonnige, jedoch nicht zu
heiße woche mit viel speiseeis und wenig arbeit.
nette grüße
erich
Worked like a charm! I do wish there was a way to make the comments show on the main page though, I sort of cheat mine, I go in and add the comments to the main post, I do this because my Dad reads my blog off line, he doesn't have internet access, my sister copies my blog and puts it on his computer so he can keep up with my daily life. If you know of a way to make the comments show on the main page without having to copy and paste them into the post, I would greatly appreciate knowing about it.
Thanks Vin, you are the best!
Wretha
Wretha,
Comments are not shown on Main Page as it contains many posts and having the full comments there as well will make it very slow to load as well as more confusing.
Thanks, Vin.
I did not know that the Post titles were clickable links, or that there was a separate page that posts would come up on showing comments! Now this begs a question: If I didn't know it, how will readers know it? So, then, is there a way to make posts NOT SHOW up on the main page, but have just their title-links show up instead?
Thanks again!
Dano and Reed,
Have a look at How to Make Show/Hide post links?
i always go to your site for some internet wisdom. this is a great site.
I got your site from Randa Clay It's amazing, a lot of people are already a part of this "u comment i follow" movement. I'm sure glad I am!
Sincerely,
Nobe
Ii have two blogs following the movement. Yipee! :)
love letters to my infant son - www.deariago.blogspot.com
my favorite internet things - www.nobe112681.blogspot.com
You mentioned that comments don't appear on the main page since that would make it take too long to load. What if I want the comments to appear on the main (home/first) page?
Lloyd
lloydgarver,
NOT advisable. Consider how confusing the Main Page would look to a viewer. Here is a sample :
POST1
5 Comments on Post1
POST2
3 Comments on Post2.
POST3
200 Comments on Post3.
POST4
No Comments on Post4.
POST5
100 Comments on Post5.
He/She may well get lost in the 200 comments on Post3 and will never reach your Post4. Besides with all these the page will load slowly.
There will also be discontinuity. A blog is meant to be continulus posts from the blog author on Main Page.
Each Post Pages carries comments which are a conversation about that post.
Hence mixing posts-comments-post-comments causes discontinuity in the conversation and makes for a blog with impediments to smooth flow of topic.
Something you can also do is to create an image for eache possibility and paste its code instead of the text.
Thanks for the tip, Vin.
Vin--
helpful as always--I added and change d the text to what I wanted it, but now the components are stacked and I wanted to remove a Paragraph tag and can't seem to accomplish that. There are multiple Paragraph tags within the code for the different scenarios and when I try to take them all out except the entry and exit one, the template won't save. Suggestions?
http://thetuningroom.blogspot.com
thanks--
CPS,
Can you provide more details? Possibly with examples?
Thank you for this post and all your blogging guides. They've helped me tremendously.
I will forever be grateful.
http://isladenebz.blogspot.com
Hi, I really like this but I'd like less space between the lines - any way to do that?
finola,
Which lines do you mean?
Hi there! I came across your website a few days ago and found your advice and tips immensely comprehensive and useful. I have a huge problem with posting comments that I would you will able to help me with - posting a comment is just not happening!
On the post, when I click on '0 comments' it opens to another page where there's a link to 'Post a comment'. And herein lies the problem - nothing happens when I click 'post a comment'. The page just flickers and stops. I've gone through Settings and allowed comments, etc. What on earth can be the problem?
Your help is much, much appreciated. ~Christina
Wishing Tree,
What is the blog address?
Sorry, Vin... it's http://wishingtreeblog.blogspot.com
Thanks again!
Vin, the posting a comment problem was fixed when I followed your instruction to fix the labels problem by clicking 'Revert widget templates to default'! Two problems solved in less than 12 hours! :) Thank you so much, Vin - we should have a partay in your honor!
I tried this and it said it couldn't be processed....any ideas?
JenReg,
What is the exact error message?
hi Vin,
This is great! I am testing the code out on my test blog: http://serendipitybyaliceeric.blogspot.com/
Do you know why I have "|" before and after the comments link? Also, this is a good solution for now, but ultimately I want to have all the comments appear on the main page in a scroll box. Is there a way to do that on blogger? I have seen that on a few people's blogs.
Alice + Eric,
Look carefully in the expanded widgets template code box for | within the comments code.
Can you give the link/address of a blog with such comments?
Vin,
It's here:
http://serendipitybyaliceeric.blogspot.com/
I can't find | within the comments code...
Eric
Alice + Eric,
I meant the link of the blogs you said you saw with that feature :
"I have seen that on a few people's blogs."
Go to Layout----->Edit Html and from browser menu do a Edit-------> Find for "|".
Vin,
check out http://www.justinmarantz.com
This is not a blogger blog, but I have seen similar features on blogger blogs before.
Eric
Vin,
About the "|" on my blog, it's not just text. They are actually links. Same links as the "add your comment" link. Now I am really confused...
Eric
Alice + Eric,
If you want to make orange juice you need oranges and not apples! :-)
Get me some blogspot blogs with that feature.
Hi! You must be brilliant or something - all those codes are enough to make my eyes cross! I tried pasting all the codes in; then I tried to remove the extras - for I only want it to say, "Little Musings and Reflections..." and of course for the number of them ... but it got messed up and so there is no link connected to it. I temporarily replaced the original default codes until I hear back. Can you help me? Thank you ever so much!
Old and Ignorant of Html!
Auntie eM,
Blogger has made it easier now. Click Edit link in Blog Posts gadget on Layout---->Page Elements tab and change comments option and save.
I have a problem. Can you just go to my blog and click on comment? I don't know why it doesn't work
this is my blog http://engineeringshare.blogspot.com
saiful Izwan a.k.a m@ntra,
First enable ALL comment settings.
Then backup your widgets.
Last step is to click on 'Revert widget templates to default' link at the bottom of the Template code box on Layout----->Edit HTML subtab.
Problem solved. Thank you so much Vin :)
How can I put a colored box around the bottom page "comments and "links" etc.?
So appreciate your sharing all this with us.
Micki,
In your template add border lines and background color as shown in How to Customize Template to comment code in CSS part of template :
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
Thank you so much! I've been trying to figure out for months why the little "comments" link wouldn't appear below my posts. After I read what you posted it only took a few minutes to fix. THANK YOU!
hello sir...i posted a comment y'day askin for assistance about comments in my blog....well i have solved the problem:)...your site is very helpful,i've joined in:)...it takes a lot of time to load though.(thought u would like the feedback)...keep going:)
Your change to the Post blog did not work. They sent me a message:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "D" must end with the ';' delimiter.
I could not find an entity "D" but then I don't know what it means.
Can you help me?
Crocker
Crocker Amazon,
In the code you pasted look for '&' character just before the 'D' and replace it with
'& a m p ;'
without the spaces and the quotes.
Hi Vin, Can we have the Wordpress Like comment system for Blogger ? I'm not satisfied with the current look of my blogs comment system. Wondering if there is a solution. ;)
P.S. - I don't want to go with Disqus or Intense-debate because adversely affects page-speed.
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?