Quote, reply, and converse across the open web.


"added another quoteback. product is so good once you use it" –@mhdempsey

"it triggers abundance mindset which usually, I feel, ends up having nonlinear positive effects" – @sonyasupposedly

The ethos behind Quotebacks is one of the reasons why I love the product. Yes, it’s a great addition to my thinking toolkit, allowing me to store quotes without polluting my note-taking and thinking system. But it’s also a tool which aims at making the Internet a more generous place. If you regularly write online, give it a try!
<blockquote class="quoteback" darkmode="" data-title="Quote the web with Quotebacks" data-author="@ness_labs" cite="https://nesslabs.com/quotebacks">
The ethos behind Quotebacks is one of the reasons why I love the product. Yes, it’s a great addition to my thinking toolkit, allowing me to store quotes without polluting my note-taking and thinking system. But it’s also a tool which aims at making the Internet a more generous place. If you regularly write online, give it a try!
<footer>@ness_labs<cite> <a href="https://nesslabs.com/quotebacks">https://nesslabs.com/quotebacks</a></cite></footer>
</blockquote><script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>
			

Quotebacks brings structured discourse to blogs and personal websites.

Quotebacks makes it easy to reference content and create dialogue with other sites by turning snippets of text into elegant, self-contained blockquote components.

There are a few ways to use Quotebacks:

  1. 1. Use the creator tool above on this site
  2. 2. Use the quotebacks browser extension for Chrome or Firefox
  3. 3. Host quotebacks.js on your own site

To learn more about the project, read about our design goals, or check out Introducing Quotebacks or Towards a Blogger Peer Review.


Here are some ways people are using Quotebacks today:

  • Give someone strong, generous attribution in your writing
  • Create a conversations page where you write public replies to others
  • Quote yourself! Bring in context from your previous writing or digital garden

Who's using Quotebacks?

Download our blogroll as an OPML file and import it into your RSS feed of choice!
To me the long-neglected advantages of blogging are not just about better presentation of information, but about the level of discourse they once engendered and how it compares to Twitter today. Blogging has a higher cost than tweeting, so it filters for more serious (or at least more committed) posting, where quality trumps quantity.

Why quote?

Our overal design goals are to help maintain context when composing new texts with quotes, to enable generous quotations, and to facilitate quoting all texts and voices. A bit more about these goals:

First and foremost, quoting gives context, helping readers see where an author is coming from. Quotes and citations are an important part in making and remembering history. And looking looking towards the future, they allow us to better see, understand, and build on the vast graph of human knowledge—the original "web"—that other, greater internet of which this one is just part.

Secondly, quoting another person can be generous. Generous quoting can mean raising another's voice alongside your own, affirming their authorship, and striving to not take them out of context. One can quote generously, no matter whether one is agreeing or disagreeing with another author.

And of course, quoting is also a political act, in which we elevate and validate the voice of another individual. We're inspired by this challenge to think about our own quoting and citation acts:

Reflect on the way you approach referencing the work of others in your own writing, presenting and thinking. Whose work do you build on to make arguments, describe the field and the problems you engage in your work? Who are you citing, and why do you cite them (and not others)? [...] Indeed, our practices of citation make and remake our fields, making some forms of knowledge peripheral. We often cite those who are more famous, even if their contributions appropriate subaltern ways of knowing.

Develop and build on Quotebacks open source library and UX pattern.

quoteback.js
11kb

MIT License

  • Change the style to match your own website's theme
  • Extend or expand quoteback’s capabilities
  • Build on quotebacks to intetegrate with your own tools for thought
  • Do something crazy we haven’t thought of

Find the source code on GitHub.

Quotebacks for Social Media

Quotebacks is a great tool for citations and quotes in independent social media sites. We've already seen some interesting adoption from Micro.Blog!

Beyond this library, the quoteback is a new UX standard for quoting online.

The Quoteback UX Pattern

Save and manage quotes while browsing the web.

The Quotebacks extension allows you to highlight any piece of text on the web and quickly create a squoteback. Quotes are saved to your Quoteback library and stored in your browser's local storage in simple JSON format. You can export and import quotes easily.

Use a keyboard shortcut on any page to save a snippet to your library, or right click and select "Copy Quote" in the context menu.

Features include export to markdown (very useful for markdown-based tools such as Roam or Obsidian), export as image, and search across all your quotes.

Chrome: Mac: ⌘+shift+s   Windows: ctrl+shift+s

Firefox: Mac: alt+s   Windows: alt+s

FAQ

How do I use Quotebacks in emails?

Embedding things into emails is… tricky. Most solutions that “just work” have a custom implementation behind the scenes (e.g. Substack’s tweet embeds). For now:

1) The default HTML underneath a quoteback is a element which should degrade gracefully in emails without the JS file

2) You can choose to “save as image” to download a quoteback as a static image file that should work well in emails, tweets, and so on.

Can I embed Quotebacks in Roam or Notion?

No, and yes. The quoteback HTML will format poorly inside Roam & Notion, but we have specifically created a Markdown export for your quotes so that you can paste quotes into Roam/Notion and other Markdown editors quickly.

Can I use Quotebacks without the extension?

Yes. If you want to develop with Quotebacks on your own site, include the latest quoteback.js file as a link in your head: <script src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"> If you are fine with not having new updates and prefer not to use live dependencies, feel free to simply download the latest quoteback.js and include it in your development files. It will convert all <quoteback-component> elements to Quotebacks

Why doesn’t Quotebacks do X?

Quotebacks is in beta. If you have suggestions for how to evolve and improve the tool please get in touch!

I found a bug!

Oh bother. Hope it’s not a serious one. The best place to submit this is via a Github issue but if you’re not familiar with Github just ping us on Twitter / email and we’ll take a look.

Where are the quotes saved?

All quotes are saved into your browser's local storage. There is no central server. This means that quotes are *not* stored across machines and if you un-install the extension, you will lose your quotes. However - quotes can be exported as a simple JSON file under the gear icon on the library page.

What JS am I embedding?

The JS file that generates the quoteback embed is a small javascript file that is served via CDN JSdelivr directly from Github. You can take a look yourself at the file here. There is no tracking either on the file or within the javascript so we have no insight into how or where these embeds are used.

Can I change the hotkey?

On Google Chrome, visit chrome://extensions/shortcuts and you'll be able to edit it there.

I embedded a Quoteback but it’s showing up as a bunch of HTML?

Some CMS editors (e.g. Ghost and Wordpress) handle embeds by adding a “html” block into the post instead of just copy and pasting it in. Try looking for an “insert HTML” option and see if that fixes it. If not ping us and we’ll see if we can help.

I use another extension that uses the same keyboard shortcut?

This is a known issue that we might have more elegant solves for in the future but for now you can re-map your chrome extension shortucts here: chrome://extensions/shortcuts and your Firefox shortcuts here.