Would you like to be able to feature comments and the comments box beneath your blog posts, Wordpress-style? In this tutorial I will explain how this can be achieved in your Blogger "layouts" template. After you implement this hack, your readers will never have to leave the page to post a comment on your blog!
This is an example of what the inline comments looks like in one of my test blogs (click on the image for a larger version):
You can also see an example of this hack in action on this demonstration blog.
You will be able to change some elements of the inline comments' appearance as I will explain later in this post. For now, let's see how this hack can be done.
How to implement the inline comments hack
Before you do anything to your template, be sure to make a back-up of your existing template. This can be done by going to the Edit HTML page and selecting the "Download Full Template" link near the top of the page. It is always good practise to back-up your template before making ANY changes to it. Then if you make a mistake, you can always revert back to this later.
The following steps will take you through the installation process for the inline comments hack. Be sure to read the instructions carefully and copy the code exactly as it is written.
- For this hack to work, we will need to change a few settings for your blog. Firstly, go to Settings>Archiving in your Blogger dashboard and ensure that "Enable Post Pages" is set to "yes". This ensures that all of your blog posts are visible on their own page, and ensures that the inline comments will appear, since the iframe containing the comments can only call this once per blog page.
Next go to Settings>Comments and ensure that you have set comments to appear in a pop-up window. This may seem odd considering that we will be displaying comments within the page, but this setting ensures we have a better format for the iframe, as you will see later on. - Now that you have the correct settings, let's hack your template to make the inline comments appear. Go to Edit HTML and ensure that "exoand widget templates" is ticked. This means that we can get to the code within the blog posts widget, which is where the settings for your comments are contained.
- Find this entire section in your blog template:
And replace it with this section of code instead:
Very little has been done to this section of code, except to add comment code (<!-- like this -->) around the section of comment code we want to hide. This ensures that the correct comment code is generated, but not displayed. Without this present in the template, we can not show the comments at all!
Also, I have added the small iframe section which includes the code to call the comments page and display it beneath the blog post. - Now the iframe to display comments is in place, but we just need to make one more adjustment to ensure that the comment link from non-item pages (ie: your front page or search results) directs your readers to the comments on individual item pages.
- Find this section in your blog template:
And replace with this section of code instead:
Note that this section of your template may not nescessarily be contained in <span> tags. If this is the case, simply copy the <a class=... section instead. - Now save your template and take a look at your new inline comments! When you click the comment link from your home/label/archives/search page, you will be taken straight to the comments section on the individual post page. When you view the post pages themselves, you will easily see the inline comments beneath your blog posts.
You can change some elements of this hack to better suit your blog's style if you prefer. For example, in this default installation, the background color for the iframe is set to #dddddd. You can change this to a different color if you prefer to better complement your template. You can also change the height of the iframe (to display more comments), or could centralize the iframe by wrapping it in div tags with align set to center.
Why this version of inline comments works
Blogger's commenting system is now more secure, and comments can only be made from the actual comments page, rather than inside the post page itself. This decision to make the commenting system more secure was probably to thwart spammers and other malicious attention, though unfortunately this means we cannot implement inline comments very easily, nor can we change the comments page in any way.
The way around this is to feature the comments page in an iframe beneath the post. This means we can display the comments box within the post page, and that readers can leave comments without leaving the page.
Why you may want to install this hack
Your blog's readers are much more likely to make a comment if they do not have to leave the page to do so. It can be quite off-putting to be sent to a new page when you want to leave a comment, so by installing the inline comments you will probably discover that the number of comments increases.
Please let me know if you like this hack, or if you are experiencing any problems installing this in your template. In the near future I will also be posting a peek-a-boo version of this hack which can be used to show or hide comments instead of just displaying by default.
Technorati Tags: inline+comments | comments | blogger | wordpress | template | style
23 Comments:
You should know that you have to have your comment window set to pop-up (in the comment settings in Blogger) for this to work.
Thanks Thomas, I did explain about changint this in the settings but forgot to explain why!
Anyway, if you change the settings to display comments in a pop-up window, you will only see the smaller comments box in the iframe, which is what we ideally need for this hack to look effective.
The default setting would make a whole page appear instead, meaning you would have to scroll all the way to the right of the iframe to get to the comments box. The way I implemented the iframe means it's not possible to scroll horizontally (as this looks better from a design point of view).
Hope this clears things up!
I've been looking all over for a hack like this - but this appears to be a hack for the "new" blogger - will an adaptation of this work for "old" blogger - and if so, what should I change?
Will this Hack work with anonymous commenters? I cant see it on Strawberries page.
hey... i've read your "Hack" style for comments.. but i don't have a comment section in my blogspot as i use blogskins not from blogspot and hence, no comment. i wanna have a comment section but not like yours. blogspot's comment is this huge huge comment word there and they even SHOW the comment under the posts..
so i was wondering whether u could help me. i'm searching for a new blogskin that have this feature but to no avail..
maybe thats just some problem with my blogskin. u could have a look at it. then tell me whatever i need to do to solve my problem.. =)
THX!!
http://winter-chic.blogspot.com
Hello Jia~
The hack described above is for new Layouts templates, whereas you seem to use a classic template instead.
Most of the skins on Blogskinz are for classic templates like yours. If you want to feature comments in your blog, I could help you insert a link to a pop-up page so readers can leave comments, and read what others have written. Is this what you're looking for?
Alternatively, I know that Isnaini.com features loads of free classic Blogger templates you may like to take a look at. Some of these are really unique!
Hope this helps!
Amanda
test
I just discovered this hack. Thanks! Now I have more reasons to stay with blogger over wordpress. Nice!
I've used this hack, and it works fine. But! I've taken it out and replaced it with the original from my backup for one reason.
The 'close this window' link doesn't close! The entire 'pop up blog post with the comment hack' remains open. What I'd like to see or have explained to me is "How do we get the 'close this window' [the link item next to the "Jump to...."] work properly and actually close so the entire blog will re-appear?!! Is there a way to add a span class close this window tag?
I just tried it on my blogs and it seems to work fine except the 'close window' problem. I'll try living with that for a while.
I'm curious why you aren't using this hack on your own blog.
Hacker Class
Saigon Files
thanx for the hack! i made the changes to my html but am having one problem. the comment form does not appear until i click on the comments link at the end of the post. i am looking for a comment form that is always at the end of the post. does this hack do that? if so, what did i do wrong?
Hi, I'm getting the exact same thing as the person above me ({pam}) is getting. the comment form or the comments on a post only appear after i click on the comments link and they're still hidden on the original post page. i did this three times and even went to the option of reverting the html to default. i'm using the new blogger (not the classic templates). any idea.
hi amanda,
it doesn't work in my template. i am using wordpress template hacked to blogspot template. in step 5...there is no post-comment-link in my template so i couldn't implement it.
can please tell me how can i make this happen. it would be great help for me..thx in advance
hey Amanda!
Hope you recovered from the injury.
Anyway, about the topic, I use both of your hacks of inline comments. This one is truly functional form. But I also liked the simplicity of the method you posted before. By any chance do you still have the old method? I lost it somehow..
I am confused. I cannot find the initial section of code to replace in my template. Please help!
exoand widget templates" in step 2 its
EXPAND spelling error dear how do i remove scrollable sidebars from the comment system
Hi I am currently looking for some people to take up the staff positions in my Computer security forum & pen testing
Just go to the forum and apply to be staff
Thanks,
www.technoshit.com
amanda...I tried this hack and I get absolutely no change in my comments section, not even on the post pages.......could you kindly have a look
blog address:- www.cataclysmofreality.blogspot.com
email:- saimfriendship@gmail.com
it works! thank you so much for sharing! :D
Hmmm Is this not working? Where ever I should be able to find code it says "service temporarily unavailable" - I really want to try this hack. Help? Thanks
thanks
Post a Comment