Saturday 24 January 2009

Blogger Recent Posts/Comments 2 in 1 Widget

2 comments
I have converted the Recent Posts Widget so that it can also be a Recent Comments Widget for Blogger - 2 in 1 Widget!. It will show:
  • Immediate updates of latest posts or comments
  • No editing of templates etc.
  • A variable number of posts or comments (over 5 items - the limit in blogger's feed widget)
  • With or without the date
  • With or without the beginning of the post/comment body
  • You can specify how many characters to show for the body text
  • You can also show the author if you have a group blog or for the author of comments
  • No annoying blank lines
  • It is straightforward to change these settings (less than a minute till you are seeing your updated site)
  • The script is on your host, so there are no mysterious calls to other sites
The Instructions

1. Go to your blogger Layout and add a widget
2. Select the HTML/JavaScript Widget
3. Title it "Recent Posts" or "Recent Comments" (this is a multi-purpose widget but each side bar entry has to be created separately to show both on your page)
4. Copy & Paste the script below
<script style="text/javascript">
// update these as needed 1=show, 0= don not show
var showdate=1;
var showcontent=0;
var showauthor=0;
// number of posts and number of content characters
var numposts=10;
var numcontent=100;
// check at bottom to have correct url
// for comments feed set postfeed=0 AND change 'posts' to 'comments' in bottom url
var postfeed=1;
function showrecent(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var posttitle = "Post";
if (postfeed) posttitle = entry.title.$t;
else {
var findtitle = posturl.split("#");
findtitle = findtitle[0];
findtitle = findtitle.split("/");
findtitle = findtitle[5];
findtitle = findtitle.split(".html");
findtitle = findtitle[0];
posttitle = findtitle.replace(/-/g," ");
}
var postdate = entry.published.$t.substring(0,10);
var postauthor = entry.author[0].name.$t;
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numcontent) postcontent = postcontent.substring(0,numcontent);
document.write('<li>');
document.write('<a href="' + posturl + '">' + posttitle + '</a>');
if (showdate + showauthor > 0) document.write(' ');
if (showauthor) document.write('by ' + postauthor + ' ');
if (showdate) document.write('- ' + postdate);
if (showcontent) document.write('<br>' + postcontent);
document.write('</li>');

}
document.write('<div style="font-size:75%; text-align:center"> <a href="http://impartialism.blogspot.com/2009/01/blogger-recent-postscomments-2-in-1.html">Widget by faithlessgod</a></div>');
}
</script>
<ul>
<script src="http://impartialism.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showrecent"></script>
</ul>
<noscript>You need to enable JavaScript to read this.</noscript>

5. Update the URL a couple of lines from the bottom of the code, if you do not you will be showing my posts!
http://impartialism.blogspot.com/posts/default
to yours. That is just replace 'impartialism' with your blogspot prefix.
http://yourprefix.blogspot.com/posts/default
6. If you are displaying comments feed then

A. replace 'posts' with 'comments' in the same URL
http://yourprefix.blogspot.com/comments/default
B. At the top of the script change
postfeed=1;
to
postfeed=0;
7. Save, move the widget to where you want and load your page

Optional (you probably want to check this for Recent Comments)

At the top of the script there are some comments they start with
//
Just to help if these are not clear:

8. The default number of posts to display is 10
numposts=10;
you decide how many you want to display,to change to say, 5, set
numposts = 5;

9. The default is to display the date
showdate=1;
to stop displaying the date set
showdate=0;

10. The default is to not display the author
showauthor=0;
if you have a group blog or are displaying comments set
showauthor=1;

11. The default is to not show the beginning of the post body
showcontent=0;
to display set
showcontent=1;

12. The default number of characters in the post or comment is 100
numcontent=100;
to change this to say, 50, set
numcontent=50;


That is it! Enjoy!

2 comments:

Martin Freedman said...

Note Copy & Paste is screwed up in some versions of Internet Explorer! It seems to work in all other browsers, recommend Firefox, Chrome or Opera

hadiahkan said...

Thanks!
What a detailed tutorial add comments.

You save my day men!