Imagine quote-tweeting a paragraph of text and embedding it on your blog without losing context...

Introducing Quotebacks

Quotebacks is a tool that makes it easy to grab snippets of text from around the web and convert them into embeddable blockquote web components.

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.

Quotebacks are like a quote retweet, but for any piece of content on the web. They work on any webpage, and gracefully fall back to a standard blockquote.

Thus, "Quotebacks" is three things:

  1. A web-native citation standard and quoting UX pattern
  2. A tiny library, quoteback.js, that converts HTML <blockquote> tags into elegant interactive webcomponents
  3. A browser extension to create quoteback components and store any quotes you save to publish later.


The Quotebacks Extension

The Quotebacks extension allows you to highlight any piece of text on the web and turn it into an embeddable quoteback.

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.

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

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

Quotes you clip 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.

Installing and Using Quotebacks

The Quotebacks Browser Extension

After installing the Quotebacks Chrome extension, navigate to any webpage, highlight some text, and press cmd+shift+s (ctrl+shift+s on Windows). Quotes you've clipped are saved to your local storage in simple JSON. You can export your quotes and do anything you want with them. Copy the embed link of any quote to generate an embeddable quoteback, then paste that into your blog markdown file or HTML page. Note the Javascript file links to quoteback.js, hosted through reliable CDN jsdelivr. Your quoteback will be embedded!

The Quotebacks library

If you'd like to use quotebacks in your own web development, download the source code from Github, or include quoteback.js as a dependendency in your head:

<script src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/[email protected]/quoteback.js">

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 our 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.

FAQ

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.

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/[email protected]/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.

Changelog - notable releases

v1.1.0
v1.0.3
  • Added dark mode support - enable it by setting darkmode="true" on the blockquote embed.
  • Create a quoteback in the context menu with highlight → right click → Copy Quote.
  • Bug fixes and minor UI enhancements.