Add a direct link to comment on a chapter that looks like a real A03 button!
Right now, if a user is reading in "entire work" the easiest way to comment on a chapter is to open the next chapter in a new tab, then go back a chapter, click comments, and then leave a comment. Readers who downloaded a work have even more hoops to jump though.
This is a guide to making a direct link to the feedback section so that our readers can give us some. It uses AO3's default CSS classes to piggyback on the archive formatting our reader is using, making it look like an official A03 button on the web. (CSS formatting does not carry-over if the work is downloaded, but the link will remain.)
Work Text:
Right now, if a user is reading in "entire work" the easiest way to comment on a chapter is to open the next chapter in a new tab, then go back a chapter, click comments, and then leave a comment. Reader's who have downloaded a work have even more hoops to jump though. This guide shows how to make a feedback links or buttons to put at the end of each chapter to make it easier for readers to bookmark, comment, or leave kudos. In each step the new information will be bold and underlined.
All example text including chapters point to A Complete Guide to Limited HTML, Chapter 9 - Bad Ideas where I discuss using AO3's built-in CSS classes to format your works. (The live links and buttons point to this work.)
Feedback Link or Button
Find the complete link (URL) to the work (for one-shots) or work and chapter. While the work and chapter numbers will change (see the underlined sections), the URL shroud look like:
Add the anchor #feedback at the end of the address (URL). This will direct the link to the feedback section at the bottom of the page. The updated URL Should look like:
If you just want to leave a little note about commenting, stop here. You can include the link with text and it might look something like:
If you’re reading this using ‘entire work’ or as a download, and there’s something about the chapter you enjoyed (or criticism you want to share) please Leave a Comment
Add the AO3-defined class 'action' to format the link to look like an A03 button. (No matter what site skin your reader is using, because it modifies the action class, the button will format correctly.) The updated link text should look like:
<a class="action" href="https://archiveofourown.org/works/5191202/chapters/163691542#feedback">Leave a Comment</a>
You can describe the link / set the button text to whatever you want. This tutorial uses “Leave a Comment.” That said, I would not recommend using language already in use on the archive, like Kudos ❤️, because your reader expects that button to leave kudos, not to jump to the comments section. We all get a little grumpy when things don't do what we expect.
So that's how you make a button. If you're not feeling like coding it yourself, you can copy-paste the line below and just change out the root URL or work and chapter number:
<a class="action" href="https://archiveofourown.org/works/5191202/chapters/163691542#feedback">Leave a Comment</a>
