Recent Comments Widget for Blogger. ~ The Blog Doctor.
Loading...

Recent Comments Widget for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

There are many benefits to having the latest comments on your blog displayed on your main page. In Blogger comments are only seen on post pages so visitors coming to your home page cannot see them unless they click on the small "COMMENTS" link after every post. If you include a Recent Comments section in your sidebar or your posts column then visitors can immediately read them and hopefully become impressed enough to return or click on them to read the posts.



When readers see the importance you give to their comments by displaying them on the main page of your blog many will take that as an incentive to post a comment.



There are two ways to include a Recent Comments Widget on the main page : The easy method and the slightly difficult Geek method..............


FEED WIDGET (EASY) METHOD


Blogger has the feed widget which you can add to your blog like any other page element. Blogger also puts out post, label and comment feeds. Combining these two we can construct a Recent Comments widget by pasting the URL of your blog comments feed into a feed page element.



To do this login to Dashboard of Blogger and click on Layout link for your blog. This will open the Page Elements subtab of Template tab. Click on 'Add Page Element' link in sidebar. In the popup window click on Feed widget. In the Feed page element window paste the comments feed URL of your blog which is :


http://YOURBLOGNAME.blogspot.com/feeds/comments/default


Instead of 'YOURBLOGNAME' put actual name of your blog. Choose the number of comments you want to show. The maximum is five at present and OK it. View Blog.
If you want to show comments only from one post put this URL in it :


http://YOURBLOGNAME.blogspot.com/feeds/THISPOSTID/comments/default


Replace the CAPS.
To get your post ID login to Dashboard and click on Posts. Click on Edit link of the post you want or place your mouse cursor over the link and look at the status bar of your browser bottom left hand corner. (Enable status bar from View--->Status Bar menu of your browser.) You will see something like this :






http://www.blogger.com/post-edit.g?blogID=xxxxxxxxxxxxxxxxxx&postID=7938018824060714868


Copy down the number after postID and paste it in your comment feed url. You will then get the comments from this post only. The disadvantage of this method is that you get five comments only. The advantage is it is easy.




The FEED-TO-JAVASCRIPT (GEEK) METHOD


This is the second method and it is slightly more complicated. It enables you to have much more than five comments in your widget and also to customize it in the colors you want. It also includes a NOSCRIPT tag in case the viewer has Javascript disabled in his browser.




This method can also be used to add content from your other blogs or any other site which puts out a feed to your blog. Since the new Blogger layout templates do not have a Previous Posts section in the sidebar like the Classic Blogger templates you can use this method to add it.




For this go to http://www.bucks.edu/feed/build.php. In the URL field enter the url of your blog's RSS feed which is :


http://yourblogname.blogspot.com/feeds/comments/default?alt=rss


Substitute actual blog name in place of yourblogname. Verify the URL of your feed before using this form. You can do this by opening the above URL in your browser. It should show all your blog posts. If not check Settings----->Site Feed in your blog and verify that it is set to Short or Full.



Then selct the settings you want :

Show channel? (yes/no/title) Display information about the publisher of the feed (yes=show the title and description; title= display title only, no=do not display anything)

Number of items to display.
Enter the number of items to be displayed (enter 0 to show all available)

Show/Hide item descriptions? How much? (0=no descriptions; 1=show full description text; n>1 = display first n characters of description; n=-1 do not link item title, just display item contents)

Use HTML in item display? ("yes" = use HTML from feed and the full item descriptions will be used, ignoring any character limit set above; "no" = output is text-only formatted by CSS; "preserve paragraphs" = no HTML but convert all RETURN/linefeeds to
to preserve paragraph breaks)

Show item posting date? (yes/no) Display the date the item was added to the feed.

Target links in the new window? (n="no, links open the same page", y="yes, open links in a new window", "xxxx" = open links in a frame named 'xxxx', 'popup' = use a JavaScript function popupfeed() to open in new window)

After selecting the settings you want click on Preview and check to see that content from your blog is being displayed. Then click on Generate Javascript button. Copy all the code. Login to your Dashboard and click on Layout. Click add Page element link in sidebar and choose Html/Javascript option. In the popup window paste the code, give it a Title and OK it. View Blog. See picture below :


Click on picture to enlarge it. Number 1 Feed is using the second method and shows much more comments than Number 2 Feed which has been added using the Blogger feed widget. To add a page element to the posts column you will have to alter the code as shown in 10 Quick Tips for Smarter Blogging.





STYLE THE FEED WIDGET


You can change the colors of the feed widget added using the second method above. To do this go to Template------>Edit Html and scroll down to your sidebar code for the feed widget. It will look something like this :

<b:widget id='HTML5' locked='false' title='RECENT COMMENTS' type='HTML'/>

Look for the number id of the widget. In this case it is HTML5. You will use this to add code to CSS part of your template to style the widget. To do this add this code just before ]]></b:skin> tag in your template :

#HTML5 .rss_item {
padding:.5em 0em 1.5em;
width:500px;
}
#HTML5 .rss_items {
margin-left:5px;
}

The CSS classes are :

.rss_box defines the bounding div for the entire display- use to define borders, fill, etc.
.rss_title the title of the feed and link style if displayed. Use with variants of rss_title a:link, rss_title a:hover, etc for rollover styles
.rss_items defines the unordered list <ul>...</ul> for the feed items- use to define the padding/margins for items.
.rss_item display of each feed item description and title, <li>...</li> as well as the channel description, if displayed.
.rss_item a: variant for the item title and link style
.rss_date defines the display of item posting dates

Just add your widget id before the clases above which represent the elements in the feed.



59 comments:

Etienne Teo said...

i was thinking whether you could create a widget for top commentors, would there be any diffculties faced for blogger to a wordpress PHP.?

vin said...

Etienne,

PHP does not work in Blogger.

Gail said...

Hello vin,
I just added Recent Comments to my sidebar. Thank you very much for sharing your knowledge with all of us bloggers.
Cheers,
Gambits from Gail

Anonymous said...

thanks for sharing that info i will defenetly use it on my blogs




http://adsenselt.blogspot.com
http://togetmoney.blogspot.com
http://quantumincome.blogspot.com

Mike said...

Thanks, I've been looking and working to place recent comments in my blog for a long time. Your solution is so simple thanks!

BayingAtTheMoon said...

I hate to be dim, but I followed the geek version of adding a comments element, and everything went to plan until I viewed the blog and it listed my posts but was just not a comments element. (It works brilliantly as an archive though!) What am I doing wrong? Also, how can I change the colour of the text to match the rest of my page. I followed your "Style the Feed Widget" but didn't find anything on changing text colour. Also, how do I put in a "Post a Comment" Link? Many thanks!

vin said...

BayingAtTheMoon,

If it lists your posts you may have pasted the URL of your posts feed instead of your comments feed. To style it add the line :

color:#000000;

to the appropriate div after changing '000000' to the hex code for the color you want. See :

http://betabloggerfordummies.blogspot.com/2006/12/css-tips-and-tricks-for-blogger.html

Mike said...

Vin, I'm very sad again. recently i used the easy widget to get recent comments in my blog bus yesterday something changed and its not working properly anymore, there no more links. I tried to use the advamce methode but for some reason my URL is not validated. Ik dont understand so I realy feel dum ...

vin said...

Mike,

Relax! Sometimes the feeds for some reason break down for a few days until repaired. See my Recent Comments widget in the right sidebar. It is also not working.

Kimberly said...

i recently added the wiget and my comment does not show up in the sidebar. what am i doing wrong?

vin said...

Kimberley,

My recent comment page element isn't working either so it is not a problem we can solve. Probably there is a server glitch.

Mike said...

I've been very busy and working on the 'geek methode' but it only shows the date of today and no recent comments. What am I doing wrong?
recente kronkeltjes
Mikelodeon


posted on September 16, 2007 03:59:24 am
«details»
posted on September 16, 2007 03:59:24 am
«details»
posted on September 16, 2007 03:59:24 am
«details»

vin said...

Mike,

Click the Preview button and see if the comments are seen. Are your feeds set to 'Full' in Settings-->Site Feed?

Mike said...

It's set to 'full' I'll send you an e-mail

Mike said...

I'm so dum, can't even find your email-adress... It's not possible to send the script in this commend, can you tell me your e-mailadres

vin said...

Mike,

It is :

drbhatns at gmail dot com

Allison said...

I also get a list of my actual blogs and not a list of the comments when I use the GEEK method. Your link for the geek method is different than for the easy method, so I tried using that instead. Instead of seeing comments I got a list with links saying "details." What is the actual link for the geek method? Thanks.

vin said...

Allison,

Try this link :

http://itde.vccs.edu/rss2js/build.php?

Ms & Mr KinkY said...

Dear All,

i found the problem why people are not getting the comments but the posts in their feed!

instead of putting the name of your blogspot page here as described by vin in the post above: http://YOURBLOGNAMEHERE.blogspot.com/feeds/POSTS/default?alt=rss

you should put it here: http://YOURBLOGNAMEHERE.blogspot.com/feeds/COMMENTS/default?alt=rss

can you see the difference? do not put the POSTS into the html to javasrcipt translator but the COMMENTS or so to speak the webaddress of the comments feed.

then also i found a site that also translates feeds into js/css. it is here: http://commons.ucalgary.ca/feed2js/style.php

hope this helps,
Ms & Mr KinkY

vin said...

Thanks Ms & Mr KinkY,

for clearing up the issue. I have updated the post.

Smiler said...

Hi Vin,
first of all I want to thank you. I've used several of your tutorials now and they've worked out great. I'm a great designer but a hopeless techie and you've given me great tools.

I've just installed the easy method for recent comments AND posts and at first everything seemed to work out fine with all the right info showing up, but they're not reflecting changes as I put up new posts and receive comments! I know I can install them as HTML but I don't want more than 5 and really want the "authors" feature for comments. Any suggestions?

Oh, if you want to check it out (in case the link above doesn't work): http://fromsmilerwithlove.blogspot.com

vin said...

Smiler,

There is a delay until your feeds are updated. There is another method but I seem to have misplaced the code.

Check out the page source for the comments widget at the bottom of the right column.

Smiler said...

Vin, you've already lost me with your question about page source. I tried out another comment widget with different code that works great and updates instantly. I've attached it here. The only thing I would like to add is the authors' names after each blurb. Is that possible?

[ = <

[script src="http://files.lifewg.googlepages.com/blogger-widget.js"][/script][script]var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; [/script] [h2]RECENT COMMENTS[/h2] [script src="http://BLOG URL HERE/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"][/script]

vin said...

Smiler,

I will email you my code as it is too long to put in the comments. My address is in the middle column.

Misha said...

Thank you!! Even with the easy method I was doing something wrong but it finally worked! It's like a miracle! I knew your title was referring to me.

Ranaesheart said...

http://www.bucks.edu/feed/build.php.

The above url is not working.

Any help?

Vin said...

Ranaesheart,

Try :

http://itde.vccs.edu/rss2js/build.php

BayingAtTheMoon said...

I have been using this widget on several blogs for months with no problems. Suddenly on two of them, it doesn't work and the page element is just blank. I have ensured that Full Feeds are enabled and Full Comments etc from the Advanced Mode of the Site Feeds menu. If I change the URL of the HTML of the widget to one that works elsewhere it displays the comments from that other blog. But when I change it back to the URL of the pages I want it to show from, it goes back to being blank. And there are definitely comments to display! What can be wrong???

Vin said...

bayingatthemoon,

Which blog do you have this widget on? And it is not showing comments of which blog?

Give the addresses of both blogs.

Anonymous said...

Thanks for the instructions for adding "Recent Comments"! It was so simple once you explained how to do it.

Many thanks!

Pat

ZAO said...

hi!

i've been looking for this kinda widget! you made it so simple, thanks!!!

summer pickles said...

thanks so much for these instructions... so much clearer than what i could find in blogger help... and now it is actually working, too! thanks, a fantastic help :)

Angie said...

hi Vin

I am not sure what did I do wrong with the comments.
Those posts with comments just don't show up any more.
I am using embedded comment form.

Angie said...

I have placed "recent comments" at the sidebar and they appear as they should. But I clicked the comment link, and it is blank. Same problem with the clicking the post.
In case you need the url to check it out .
http://angiesrecipes.blogspot.com
thank you.

Vin said...

Angie,

Disable the embedded comment form and see if they reappear. Clear Cache after saving settings.

Angie said...

hi Vin
Thank you for the prompt answer.
I disabled the embedded comment form, and cleared the cache. But the problem stays....

Not sure why?

Vin said...

Angie,

Did those posts disappear recently? Try reloading your original template.

Angie said...

hi Vin

No. Just after adding comments....
Could it be the problem with "TOC" hack? I applied TOC to label pages.

Vin said...

Angie,

First backup present template to PC. Then go to Layout---->Pick New Template---->Choose Minima Template and save.

Check if you can see the post with the comments now. If you can, it is a template problem. Contact the designer.

Angie said...

Forgot to mention that, as long as I hide the comments, then posts appear.

Vin said...

Angie,

Load a standard Blogger template and clear the cache.

mang0 said...

I tried the first and simple method, it works perfectly :) Thanks!

Mrs. Cyrier said...

Help! I tried to add this the first way (easiest), but it keeps telling me "invalid feed URL" when I type in: http://mediadivanews.blogspot.com/feeds/comments/default

If I change comments to posts it will show the posts, but the comments don't work.

Vin said...

Mrs. Cyrier,

The owner of the blog has disabled the comment feed for this blog in Settings---->Site Feed.

You can post a comment on his blog asking him/her to enable comment feed.

Jessie said...

Hi Vin
I followed your advice to put both the recent comments and recent posts on my blog. COuld you please explain why there is such a delay before the most recent one of either show on my blog. I have a friend who has linked a feed to my blog, and my postings are showing on her blog, long before on mine?

Thanks so much
Jessie

Vin said...

Jessie,

Try clearing the cache.

Perpetua said...

Thank you so much. I now have recent comments in my sidebar. Hurray! I have wondered about this for a long time.

But now I have a question about enhancing this. Do you know of a way to get this to include the title of the post for each comment?

Perpetua said...

Ooops, I forgot to check to get email follow up comments.

Vin said...

Perpetua,

Paste this code in a HTML gadget :

<script style="text/javascript" src="http://ezeeblog.googlepages.com/RecentComments.txt"></script><script style="text/javascript">var numcomments = 6;var showcommentdate = true;var showposttitle = true;var numchars = 200;var standardstyling = true;</script><script src="http://MYBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Replace 'MYBLOG' with actual blog name and save.

Perpetua said...

Wow, I love it!

I decided I didn't want the comment date to show so I tried changing showcommentdate = true to showcommentdate = false
and that worked.

Thank you so much!

b.s. said...

http://www.bucks.edu/feed/build.php

________________
Not Found

The requested URL /feed/build.php was not found on this server.
Apache/2.2.3 (Red Hat) Server at www.bucks.edu Port 80
____________________

the link does not work !! :-(

Vin said...

b.s.,

You can use :

http://itde.vccs.edu/rss2js/build.php

or Google AJAX code to convert feed to Javascript.

Put in comment feed instead of blog feed.

LJ said...

Hello,
I was able to follow everything. except for replacing the CAP letters. can you pls help me.

Thank you

Vin said...

LJ,

Replace the CAPS in this :

http://YOURBLOGNAME.blogspot.com

For example if my blog address is :

http://widgetry.blogspot.com

I will replace 'YOURBLOGNAME' with 'widgetry'.

Chris said...

the link http://itde.vccs.edu/rss2js/build.php doesn't exist either. any idea where to go now?
Chris

Vin said...

Chris,

Use the same code as in AJAX Blog List Gadget with Post Preview.

Only put in the Comment Feed url in the code instead of the Blog Feed url.

Brad Fallon said...

Is there a blog widget like word-press that is for free-webs users (that use advanced html)?

Silver MLM said...

How I can add members in blogger, is there a widget for that or there is a template with that option?

Missy H. said...

I noticed this is several years old, but I do hope it is still being moderated. I, too, have put the "Recent Comments" widget on my site. It seems to not only help with more people reading my blog, but more people seem to leave comments now, too. My only question is, can you leave up the "Recent Posts" after putting the "Recent Comments" widget on there? Can you do both? I am kinda new to all this, so any help from anyone would be greatly appreciated.
Thank You!

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.