Embedding Amplenote: Wordpress Isn't Destiny





This week we're announcing a feature built for bloggers: embedded notes. Like what you're reading at this very moment. Bring your own stylesheet if that's your thing. 🤓


9 Blogger Benefits of Embedded Notes over Wordpress

Here are some of the cases where embedded Amplenote blog posts improve outcomes compared to Wordpress:


  1. Blog post instantly updated (upon page refresh) as you edit your note content

  1. Embed pictures in your words, so you can talk about e.g., destinations with pictures and maps

  1. Draft and edit blog posts while online or offline, from any mobile or desktop platform

  1. No BS around "media uploads." Embed pictures or videos (!) in your blog posts effortlessly, even while you're offline.

  1. Blog post content becomes instantly searchable within an everyday UI (i.e., as links update, easy to find the blog to keep fresh)

  1. Organize blog content via tag hierarchy

  1. Collaboratively draft blog posts by sharing your note with co-authors

  1. You want to post "lite blogs" where you jot down a few thoughts for yourself and post those thoughts to the blog, with auto-updates

  1. It's not just for blogs: you can embed an Amplenote on any page of any site



Live Examples in the Wild



The GitClear blog features numerous examples of styled, embedded notes in action

The largest live demo of embedded Amplenotes is the GitClear blog. Here are a few of the best examples of notes becoming blog posts:



What makes embedded notes so cool for a purpose like the GitClear blog is that we can style the area around the note however we please. In the case of the screenshots above, the title and social media links are part of the outer shell of the blog. But, thanks to the stylesheet include, the inner blog (your note) is indistinguishable from its aesthetically pleasing surroundings.


Gimme the Code

In a couple weeks, our share dialog will include a tab that provides the latest version of the embed HTML. As of blog publication time, the embed HTML is:

<div class="amplenote-embed" data-note-token="PUBLIC_NOTE_ID" data-styles="/path/to/optional/stylesheet.css"><iframe frameborder="0" src="https://public.amplenote.com/embed/PUBLIC_NOTE_ID?hostname=www.gitclear.com&amp;styles=%2Fpath%2Fto%2Foptional%2Fstylesheet.css"></iframe></div>
<script defer src="https://assets.amplenote.com/embed.js"></script>

Yes, there's some redundancy in it at the moment, but there are also some pretty cool options:


hostname is used to make an Amplenote link appear without it's usual 🔗icon that appears on most links. Thus, if you want to link to another blog post on your domain, you can link there directly without the user having to click on an interstitial popup.


data-styles is used to provide a path to a stylesheet that is included by your note. To see how this works, see for example a recent GitClear blog post and the stylesheet we're using to give the note a Medium-esque facade.


Evolution of a Feature Designed to be "Anything but Wordpress"

Hopefully at this point it's a non-controversial view that Wordpress = 🔥🗑️. It has served its purpose, but it's time to move on.


What we're after is a path by which we can edit our a draft in a smooth, polished, instant-save environment with content versioning. Oh, and of course we want Rich Footnotes, because writing in 3d has considerable advantages.


There are surely blog platforms that could solve this problem, but we also didn't want to have to rely on a blog platform. Problems with blog platforms include

  1. There are too damn many of them to evaluate

  1. They change

  1. A blog platform is at least one layer divorced from the tool we'd use to draft the blog content


Embedded Amplenotes fix all these problems, while making it trivial to switch between blog providers on a whim, since you own all the blog content in your Amplenote account.





Plot twist

Thanks for stopping by the Amplenote blog. Did you know that the content of this "blog post" is just a plain old note, lifted from the author's Amplenote notebook? Rich footnotes, built-in emoji selector 😄, and the strongest encryption game among major note apps (all notes encrypted client-side by default) make us a solid option for modern writers. Try it out yourself.

Comments

No comments have been left on this blog.

Login to leave a comment