Make a WordPress timeline for comments (Facebook look-a-like)

After Facebook launched the timeline, I have thought about some different ways of making something in WordPress that looks like the Facebook Timeline. I made a page that shows all my comments in 2011 as a timeline (Check it!). I made it after seeing on Twitter that forsandree had made a guide for making a WordPress timeline for comments (Here is his timeline as well). Unfortunately for you, the guide is in Swedish. But I will try to explain it for you here!

What is the WordPress timeline for comments?

It is basically a page on my WordPress blog that shows every comment in a specific time-interval as a Facebook timeline. Check it here! It does not list the WordPress posts or anything, just the comments and a link to the post where the comment is presented, and the avatar of the comment author, a link to the comment authors site, and it is all presented chronologically, with the newest comments first. It also works if you have Disqus comments activated.

How to make a WordPress timeline for comments, the Facebook style:

Start with making a new file in your template-folder. Name it for example page-timeline.php. In that one, insert the code you have copied from Definition of Done (From this file).

Then, open a CSS-file you have, often named style.css, and paste all the css in the bottom of the file. The CSS that you find on Definition of Done (in the middle of the page).

Then upload the files to your template folder.

Then create a new page, leave it empty and in the lower right corner, under Page attributes, where it says “Template”, chose the one named “Tack-template”. Then publish the page. It will then be ready and look like the timeline. At least if you use the template “Twenty Eleven”. In other templates you might have to delete one of the closing div’s in the end of the file. There will be some Swedish words in there as well. You can edit the file for renaming all the Swedish terms. Or then, download my timeline files that are described a little lower on this page.

Customize and seo-optimize the WordPress timeline for comments

I think forsandree had made a great piece of code, but every great piece of code can be developed even more. I found dome things I wanted to change for getting it to look nicer and to be a little bit more SEO-optimized.

Change all the Swedish words to English.
Make the links to the posts with the “post title” as the anchor text instead of the date.
Add nofollow to all outgoing links (names of commenters). This is not necessary, but I get quite a lot of sp@m (Domain registration India), and I have not moderated away all of the comments, but neither I want to reward them, so I just nofolled every link to comment authors.
Add a Facebook Cover look-a-like picture to the top of the page (do this by making a image that look like the cover, and upload it when editing the page).

Here are the new files, where all the changes are made: Page-timeline2.php and “paste-into-style.css“. If you want to use them, you just need to change the file ending “.txt” to “.php”, and then upload them to your theme-folder, and chose the “template” Timeline-template from the right sidebar when making the page! Here is my comment-timeline once again.
Thanks for reading the post about how to make a WordPress timeline for comments like the Facebook timeline. I will probably soon post about how to make a template that shows your posts as a timeline also! Feel free to ask questions below!