A Google Gadget for Blogger that retrieves comments on the user's blog for all readers and displays them in a flexible, customizable way. Displays a list of up to 200 of the last comments left on your blog the way you want them to appear. Choose from author, comment, post title and more to link to and display. Mimic recent commenting widgets on other blogging sites or make your own style.
Table of Contents
The Gadget Series
Original version with improved look:
Last Comments 1.1
Newer version with show/hide & reload buttons:
Last Comments 1.2
Private blog version with show/hide & reload buttons:
Last Comments 1.3
You can add one of the above versions to your blog now by clicking one of the links while signed in to your Blogger account. A window will pop up allowing you to choose which blog to put it on and then to configure the gadget to your liking (or try the defaults). After configuring and saving the gadget, drag and drop it to your favorite location on your blog, and don't forget to press the "SAVE" button after moving it.
Last Comments gives you the choice to show how much or how little you want of the most recent comments on your blog, with parameters for:
S Aa*_wrote,_" -C*" Pcon_*, -D_*
- The number of comments (1 to 200)
- The length of comment previews (1+ characters)
- Automatic height adjustment
- Visitor comments only
- Relative font size to your blog's standard font size
- Separator bars in your choice of color or background image
- Custom presentation of comments
S Aa*_wrote,_" -C*" Pcon_*, -D_*
Last Comments comes preconfigured to work out of the box with no configuration necessary! However, you can configure most of it in 7 short steps.
- Enter the number of comments you wish to display on your blog. You can display between 1 and 200 of the most recent comments left on any post or static page of your blog.
- Enter the number of characters of text that should be displayed in each comment. You can show 1 to 998 characters per comment. Enter 999 to show the complete comment.
- Choose the font size relative to your blog's normal font size from the drop-down menu.
- Enter your customized Display List. (See below for information on how to construct an original Display List.)
- Enter the URL (not including the "http://" part) to a background image for the Separator bars. These bars will be shown above each comment in the list.
- Choose the Separator bars background color. If you leave the background image blank (default), this is the color the Separator bars will be shown in.
- Choose the height of the Separator. The height can vary from 1 to 20 pixels high. All Separator bars have rounded corners except when viewed on Internet Explorer.
You can also change the title of the gadget to anything you like (you don't have to use "Last Comments"), and you can set the gadget to an unchanging height by unchecking the "Adjust gadget height automatically?" check-box (if you do that, text overflow will not be shown). Again, all of the above steps are optional since the gadget starts out using default settings.
Last Comments allows you to add an extra flourish to your most recent comments list by displaying a semi-transparent colored bar called the Separator above each comment. The Separator can be from 1 to 20 pixels high with rounded top corners. Alternatively, you can change the Separator from a bar above each comment to a dotted line between each comment by entering a custom Display List.
You may select a color for the Separator from the list of color names supported by all major browsers during gadget configuration (Step 6), and if you go with the Separator bar, you can even change it from a single color to an image of your choosing. (Note: Do not type the "http://" in Step 5. Last Comments fills that in for you automatically to save space.) It is suggested that you use an online URL shortening service such as bit.ly or tinyURL.com to avoid extending the gadget's startup URL beyond Google's allowable URL length limit. Separators can also be turned off through the custom Display List.
Last Comments uses a specially constructed string of text called a Display List to allow users to customize the way the gadget and the recent comments are displayed on each blog. Display Lists have six components: Modes, Elements, Styles, Options, Links, and Custom Text, all of which are denoted by uppercase and lowercase letters, numbers, and symbols as follows:
Modes change the way the gadget displays the entire list of recent comments. Mode letters must be entered immediately in front of the first Element with no space after them or between them if mixing Modes. The letters to enter and what they stand for are:
- X for Hide Mode. Adding this to the front of the Display List will hide the comments when the gadget loads. (Available for Last Comments versions 1.2 and 1.3 only!)
- V for Visitors Mode. Adding this will remove blog author comments from the recent comments list.
- F for Float Mode. Adding this will float each comment to the left, which is useful when you put the gadget in a wide horizontal space.
Elements are the main components displayed by the gadget. Elements can be used once each in the Display List and are denoted by uppercase letters. Elements must have a space between them and the next Element.
- S stands for the Separator bar above/between comments
- A stands for the Author of a comment
- C stands for a Comment
- L stands for a custom text Label or Link
- P stands for the Post title
- D stands for the Date
- T stands for the Time
Styles change the position, font, and link styling that Elements display in (these do not apply to the Separator bar). By default, Styles apply to the Element and its leading and trailing text. Lowercase letters denote each style, and they go in front of the Element letter with no spaces in between them or after.
- - (dash) makes the Element and its leading and trailing text stay on the same line as the previous Element, otherwise each Element starts on a new line. The dash, -, may not have a space after it and it must be entered before any other style (the rest of the styles can be listed in any order or combination)
- w makes any Link (see below for the list of available URLs) apply to the whole Element, including its leading and trailing text
- e makes the font styling apply only to the Element and not its leading and trailing text
- b makes the Element bold
- c makes the Element appear in small-caps
- i makes the Element italic
- l makes the Element font-size larger
- n makes the Element appear normally without any styling
- s makes the Element font-size smaller
- u makes the Element underlined
These special Option numbers apply only to the Separator bar, the Date Element, and the Time Element. The Option numbers should be entered immediately after the applicable Element as shown below.
- Applies to Element S
- You can change the Separator from the colored bar above each comment to a colored line between each comment instead with this option.
-
- S changes the separator from a colored bar above each comment to a dotted, 1-pixel, colored line between each comment
- Applies to Element D
- There are 10 formats to choose from, 0 is the default
-
- D shows 2011-Jan-01
- D shows 2011-01-31
- D shows 2011/01/31
- D shows 1/31/2011
- D shows 1/31/11
- D shows 2011.01.31
- D shows 31.1.11
- D shows January 1, 2011
- D shows 01 January, 2011
- D shows January 1
- Applies to Element T
- There are 10 formats to choose from, 0 is the default
-
- T (24-hour) shows 09:06
- T (24-hour) shows 9:06
- T (24-hour) shows 09:06:03
- T (24-hour) shows 9:06:03
- T (12-hour) shows 9:06 AM
- T (12-hour) shows 9:06 am
- T (12-hour) shows 9:06 A.M.
- T (12-hour) shows 9:06 a.m.
- T (12-hour) shows 9:06:03 a.m.
- T (12-hour) shows 9:06:03 AM
Links can be used more than once in the Display List but only one per Element. Links are denoted by lowercase letters and should be entered immediately after the Element letter (or after the Option number if one is used). Links cannot be used with the Separator.
- a stands for the Author's URL
- c stands for the Comment URL
- p stands for the Post URL
- x stands for No URL (this letter is required in front of leading Custom Text that starts with "a", "c", "p", or "x")
Custom Text is text that appears before (leading) and after (trailing) each Element (however, Custom Text cannot be used with the Separator). You enter Custom Text immediately after the Link letter (or after the Option number or the Element letter if no Link is used). Both leading and trailing text can be composed of up to 12 characters including spaces which must be denoted by underscores (underscores themselves, plus signs, and asterisks count as two characters each—see below for an explanation).
The location of the Element in relation to the Custom Text is denoted by an asterisk, so all Custom Text before the asterisk is leading text, and all Custom Text after the asterisk is trailing text. There are three special symbols you can use in writing Custom Text have special meanings:
- * (asterisk) denotes the location of the Element within the Custom Text (enter +* to display an actual asterisk) and is required if any text will lead or trail the Element. Forgetting to tell Last Comments where to put the Element in relation to your Custom Text will result in the default Display List being used.
- _ denotes a single space in the Custom Text (enter +_ to display a single underscore) and is optional. As a reminder, browsers "eat" multiple spaces and leading spaces after new lines, so those are unnecessary.
- + is used before * and _ to display them as characters rather than special codes in the Custom Text (enter ++ to display a single plus sign anywhere in the Custom Text).
- Additionally, leading and trailing text attached to the L Element will be turned into a self-contained label or link. For example, Lc1234*5678 would become the hyperlink 12345678 linked to the Comment URL). This allows you to make one extra-long link or label in your Display List of up to 24 characters (not recommended—lengthy Display Lists can cause the gadget to trigger a "URL Too Long" error).
- Also, any spaces (denoted by underscores) at the beginning of leading Custom Text or at the end of trailing Custom Text will not be included in any hyperlink. For example, Lc_1234*5678_ would look the same as Custom Text without the first and last space (denoted by the underscores), like this: 12345678.
Now that you know what characters to use to enter Modes and Elements in the Display List and how to customize Elements with Options, Styles, Links, and Custom Text, let's look at the format of the entire Display List. In the pattern below, square brackets [] denote optional components (as you can see, everything is optional, and you can actually leave the Display List blank to use the default). The three periods at the end indicate that further Elements have the same format. Order is very important and spaces are also important: there should only be one space in between each Element and nowhere else.
[X][V][F][S[] ][[webcilnsu]A|C|L|P|D[]|T[][a|c|p|x][[leading text]*[trailing text]][ [-][webcilnsu]A|C|L|P|D[]|T[][a|c|p|x][[leading text]*[trailing text]]...]]
In other words,
- You can leave out any Mode, but if you use one or more, their order must always be XVF followed immediately by an optional Element
- The first Element must not have any space in front of it, and if the first Element is not S, Styles are permitted in front of it. However, the - (dash) Style cannot be used with the first non-S Element since that Element always starts on a new line.
- Style letters can be in any order or combination and must precede the Element letter; however, the - dash must precede all other Styles if it is used.
- Every Element after the first Element must have a space in front of it, and that space must precede all Styles modifying an Element or, if no Styles are used, the space must precede the Element itself.
- Three Elements (Separator, Date, and Time) have special Option numbers that are optional but must be entered immediately after their respective Element letter if used.
- Links are optional, but if one is used (one per Element), it must immediately follow the Option number if present, otherwise the Link letter should immediately follow the Element letter.
- Custom Text is optional, but if used it must be entered immediately after the Link letter, the Option number, or the Element letter, whichever comes last, and the Custom Text must have an * (asterisk) in it denoting the Element's position with respect to the text. Spaces within Custom Text are forbidden; use _ (underscores) instead to denote spaces. Leading text and trailing text can both be up to 12 characters long, and either side can have 0 characters if no text is wanted on that side. If no Custom Text is present, the * (asterisk) is not required, but if any Custom Text is entered, * (asterisk) is required.
Now that you know how to make a Display List, let's dissect the Display List for Screenshot 1 from above.
S Aa*_wrote,_" -C*" Pcon_*, -D_*
- S means the Separator bar will show above each comment.
- (space) is required before all Elements after the first one.
- Aa*_wrote,_"
- A means the Author's Name will be shown in every comment.
- a means the Author's Name will be linked to the Author's URL in every comment.
- *_wrote,_" means the Custom Text ' wrote, "' will be shown after the Author's Name in every comment
- (space) is required between Elements.
- -C*"
- - means the Comment Preview will be on the same line as the Author's Name and the the Custom Text after the Author's Name.
- C means the Comment Preview will be shown in every comment.
- *" means the Custom Text '"' will be shown after the Comment Preview in every comment.
- (space) is required between Elements.
- Pcon_*,
- P means the Post Title will be shown in every comment (because it has no minus sign in front of it, it will start on a new line).
- c means the Post Title will be linked to the Comment's URL in every comment.
- on_*, means the Custom Text "on " will be shown before the Post Title and "," will be shown after the Post Title in every comment.
- (space) is required between Elements.
- -D_*
- - means this Element will be on the same line as the Post Title.
- D means the Date of publication in default format ( D) will be shown for every comment.
- _* means the Custom Text " " (space) will be printed before the Date in every comment.
There are so many combinations that it might seem overwhelming at first, so to get you started, here are some sample Display Lists:
-
Aa -Pc_on_* which mimics Wordpress's recent comments widget.
-
FCc is a minimal list which shows the Comment Preview linked to the Comment URL floated to the left.
-
FS Cc would show the Separator over each linked Comment Preview.
-
S Ac*_wrote:_ C is another minimal Display List that shows the Author's Name linked to the Comment URL followed by Custom Text and then the Comment Preview all under the Separator bar.
If you see something you like in this list, you can simply copy it and paste it into the Display List text box in the Gadget Configuration pop-up window.
| Copy and Paste This | To Get This |
|---|---|
| XS Aa*_wrote:_ -Cc Ppon_* | Author Name wrote: Comment Preview
on Post Title
|
| S Aa*_wrote: C -Lc*_(link) Ppon_* | |
| S Aa*_wrote,_" -C*" Pcon_*, -D_* | Author Name wrote, "Comment Preview"
on Post Title, YYYY-MMM-DD
|
| Aa -Pc_on_* | |
| Ac -Lc_wrote...* C | Comment Preview
|
| FCc | |
| FS Cc | |
| S Ac*_wrote:_ C | Author Name wrote:
Comment Preview
|
| Aa*_left_a_ -Lxcomment_*at_ -Tc*,_ -Dp | |
| S C -Lc_►_* -Aaby_* -Pp_on_* | |
| S Aa*_wrote,_ -C"*" -Lc_(view)_* -Pp_on_* | |
| S Lc*►_ -C"*"_was_said_ -Aaby_* -Pp_on_* | |
| Ac*_commented: C | Author Name commented:
Comment Preview
|
| Where the Links in the above table will take you: |
|---|
| To the Author's Blogger Profile or Webpage |
| To the Comment |
| To the Post with the Comment |
All three versions of Last Comments are capable of displaying Google Web Fonts. Simply add the name of the Google Web Font you want Last Comments to appear in at the front of the list of font-families in the body.font variable's value attribute (you can find the body.font variable in your blog template about one push of the PageDown key from the top). Once you add the name of a Google Web Font to the body.font's value attribute, Last Comments will automatically download and utilize that font.
You don't even have to change your blog's primary font in order to change the font Last Comments is displayed in; you can do this by not adding the <link> tag to the <head> section of your blog template as instructed at the Google Font Directory. For example, if you want Last Comments to display using the Sniglet font, you should find the code describing the body.font variable in your template (scroll down just a bit from the top of your template on the Design|Edit HTML page), and then change your body.font variable's value attribute (shown below in bold) like this (the change is in blue):
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Sniglet, sans-serif"/>
Last Comments 1.3 is built exclusively for use with private Blogger blogs. It uses Google Account web authentication to verify Blogger identities and stores the authorization token in a cookie in your browser. The authentication process involves logging in to your Google Account (which is automated if you are logged in to your Blogger account already), allowing Last Comments 1.3 to access your Google Account (no information is gathered at all), waiting for the authorization token to be set as a cookie in your browser after your identity is authenticated, and then loading the comments from the private blog you are reading.
The cookie stored during the initial authentication process will expire in one year, but you can manually delete it at any time by opening your browser's cookie directory and deleting the cookie with an extra-long site name ending with the text: opensocial.googleusercontent.com.
People using Mozilla Firefox must set their browser to "accept third-party cookies", a setting that can be checked by going to Tools|Options|Privacy in their Firefox browser, otherwise Firefox will not allow the authorization cookie to be read by the Last Comments gadget and the gadget will not be able to load the comments.
- Maximum number of comments: 200
- Maximum number of characters per Comment Preview: 998 or the entire comment
- Cache refresh interval (the delay between posting a new comment and seeing it show up on this gadget): 0 seconds
- Default URL for links in comments: http://www.google.com
- Default Author Name: someone
- Default Author URL: http://www.google.com/search?as_epq=Author_Name&safe=active
- Default Post Title: some post
- Default Comment Preview: something
- Utilizes dynamic height adjustment (optional)
- Utilizes Gadget Skins (currently requires opensocial due to a known bug affecting all Blogger gadgets)
- Blogger comments may return extremely long verification URLs after they post. Because this gadget uses gadget skins to automatically conform to your blog's theme, long Display Lists and/or image URLs (for the Separator bars) may cause the gadget's loading URL to to be too long after a comment is posted on an embedded comment form. If the loading URL is too long, Google servers will display an error code instead of the gadget. If you get such an error, the gadget is still working and no harm has been done to your blog. The problem will subside after you follow a link with a shorter URL anywhere else on the blog. You can prevent this error from occurring by using a short Display List and/or a short Separator background image URL, or by using the default Display List with no background image on the Separator bars.
- For blogs using "Awesome" Blogger templates, all gadgets with lengthy content (which includes Last Comments) will be rendered incorrectly at random on Internet Explorer. FIX: To fix this problem, search your blog template for the CSS styling rule -goog-ms-box-shadow and set that styling rule to none for the CSS classes .main-inner .widget and .date-outer. This fix will remove the fancy shadows from gadgets and widgets in Internet Explorer only.
- Opera 10 does not recognize the em dash (U+2014) or the en dash (U+2013) if used in the Display List of Last Comments. However, the horizontal bar (U+2015) is recognized and can be used.
- For version 1.2, hiding the comment list does not shrink the gadget's iframe in Internet Explorer 8. It appears that Google's adjustHeight function does not work properly with IE8. Initially hidden comment lists will start out in an iframe sized according to the height value specified during gadget configuration. Once the comments are shown, the space taken up by them cannot be reclaimed by other gadgets until the page in Internet Explorer 8 is refreshed. Despite that, Hide Mode is still useful for blogs with little space.
- Internet Explorer 7 does not conform to CSS standards for floating objects and will not display this gadget properly if Float Mode is turned on.
This gadget, Last Comments, including all publicly available versions, shall observe Google's philosophy of "Do No Evil". This gadget does not willfully collect private information about users and contains no invasive code; however, by using this gadget, you are increasing the download counter at this gadget's host site. That said, you are freely permitted to download the XML files of the gadget at any time and host them at your own site to use with Blogger blogs if you so desire. Likewise, you are under no obligation to use this gadget. Outbound links accessible from the gadget to this webpage, the Last Comments User Manual, are tagged with "nofollow" so as to not affect this blog's rankings. This gadget is provided freely to the Blogger blogosphere as an enhancement of Blogger's commenting capabilities to bring Blogger up to date with Wordpress and Typepad recent commenting conventions.
