Page

2014/04/28

Blogger Recent Comments + Avatar + Post Title

14
2016.9.26 Update: Now new version V2 has released, please go to this page for installation: "Blogger Recent Comments V2__Avatar + Post Title + HTTPS".

Recent Comments is a common and essential widget in Blogger blog. Sometimes you`ll find it comes with "Avatar image", but you`ll hardly find it comes with "post title section", as which is not an easy technique.

With information of post title, it`s very easy to identify where the comment is from, which will be a very handy function, so that`s why I made this widget. Please let me introduce some special features firstly, or you might move to section [B. Installation Code] for the installation procedure.




A. Special Features


1. Comment Toggle

Each comment will show summary by default. When the mouse hover it, the indicator symbol "" appear. By pressing the summary area, it will show the full comments.


2. Deleted Post

Normally if one post is deleted, all comments in that post will still exist in the feed, which means the recent comments widget still could read these comments.

To avoid such discrepancy, in my widget, these comments will show "this post has been deleted" in the post title section, to remind you to delete those comments accordingly from Blogger dashboard.


3. Different Avatar Image

For each commenter, this widget will show different avatar image by individual identity accordingly:
  • Custom Avatar
  • Blogger Logo (blogger account w/o custom avatar)
  • Open ID Logo
  • Anonymous Logo



B. Installation Code


Please refer to the following steps:
  1. Go to Blogger Dashboard > Layout
  2. Click on Add a Gadget > HTML/JavaScript
  3. Copy and Paste the code below:


Before saving, you might want to modify some parameters. Please refer to the LETTER NAME above:

E: the red number 1 means to show comments from no.1 comment

F: the red number 5 means to show 5 comments in this widget

G: how many characters to show in each comment

H: the width of Avatar image (in pixels)

I: you could replace the blue texts with your custom Blogger Logo url

J: you could replace the blue texts with your custom Open ID Logo url

K: you could replace the blue texts with your custom Anonymous Avatar url

L: the red texts could be customized

M: the red texts could be customized

N: you could use custom character to expand comments

O: you could use custom character to collapse comments



C. CUSTOM CSS


If you would like to customize CSS, please refer to the GREEN remark in installation code.

For example, if you would like to change the style of Avatar image, then find /* avatar image */ :
  • border: if you don`t need border, you might change as "border: none;"
  • border-radius: adjust the number "10" larger or smaller, then you`ll see the shape of Avatar become rounder or squarer
  • box-shadow: just change the parameter, then you`ll see the difference



D. FAQ


Q1: Why I couldn't see any comment?

Ans: Please check some settings in your dashboard:
  • Go to Blogger Dashboard > Settings > Basic > Permissions > Blog Readers > be sure it`s "Public" here
  • Go to Blogger Dashboard > Settings > Basic > Other > Site feed > Allow Blog Feed > be sure it`s "Full" or "Custom" here
  • If the setting above is "Custom", be sure the settings of [Blog Comment Feed] and [Per-Post Comment Feeds] are both "Full"
↑ TOP

14 comments:

  1. Hi Wayne, I'd like to ask you if there's any chance to change the order of the date: day/month/year instead of year/month/day and also the word "anonymous". My blog is in Spanish and I'd like to change these two features. Thank you very much.

    ReplyDelete
    Replies
    1. Hi David,
      yes, it's possible, but you need to know how to modify js on your own. Open the file "recent-comments-min-140427.js", you'll find "E=b.published.$t.substr(0,10)" → this is the DATE string from blogger feed.

      You could operate the string value in your way, then put the value back to E, that's all~

      Delete
  2. Wayne, if I modify the values: substr(0,10) => substr(10,0) to change the order, the date disappears, how should I change those values then?, sorry but I don't know any of Java. Thank you again.

    ReplyDelete
    Replies
    1. dear david, if your proposal doesn't spend much time, then I could modify the code for you. Since I ever suggested "modify js on your own", it means the modification needs some time. Sorry I didn't have much time for this free customized case now.

      Delete
  3. What a shame, I would've liked to use your code, anyway I think you should do it when you have time since dd/mm/yyyy is the European date format and more people could ask you the same request as me in the future. Best regards.

    ReplyDelete
    Replies
    1. Thank for your suggestion & noted the European date format, thought the format "year/month/day" is from Blogger feed string. After some months(in one year), I will release a new version of this widget, and will publish to my main blog "wfublog.com" first. I'll consider the date format at that time.

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This code is working just fine. It's the best i've ever used. However, it is incompatible with https protocol. With blogspot forcing its adoption, it would be a good idea to update it. Thanks.

    ReplyDelete
    Replies
    1. I've published a new version with https compatible, but not in this blog. Please visit my main blog in this page: http://www.wfublog.com/2015/10/blogger-recent-comments-v2-avatar-post-title-https.html

      The page above is in Chinese, sorry that you have to try to find the installation code. I'll write an post in English version in this blog in the future.

      Delete
    2. Drogi Wayne , mam pytanie ... widżet jest super ale dlaczego mi na blogu chwilami znika , raz widzę komentarze a raz ich inie ... Proszę o pomoc !

      Delete
    3. hi lalka,

      sorry I don't understand Polish, but I use google translation for your comment above and try to reply in English.

      I guess you mean "sometimes the comment will disappear" ? Maybe Blogger identify some comments as spam, you could find these comments here:

      Blogger dashboard → Comments → Spam

      For not to misunderstand, I would appreciate if you leave comments in English ^^

      Delete