Browser Bookmarklets for Giving Credit

I’ve been thinking more lately about giving credit on my own website, particularly in cases where the context of things I’m reading has some additional context based on where I originally saw them. I’d also like to give people I follow credit as the source by which my own content is aggregated.

Earlier today I tinkered around with some ideas relating to the old Curator’s Code which I revisit from time to time. I outlined some details, data fields, UI, and some pseudo-code to actually build it into a WordPress plugin. Then I thought I ought to check the repository where I discovered that someone had previously made one. Unfortunately it was withdrawn from the repository. I suspect its that they didn’t want to continue to support it moving into the Gutenberg era. (It still works with the classic editor.)

I don’t give credit on my site often enough in large part because it isn’t an easier thing to do when quickly posting some of the smaller bits of content. They say “manual until it hurts“, and doing this has just hurt too much for too long. Toward that end I thought I’d make a couple of quick bookmarklets for cutting and pasting text into my site. It’s not as good as a better custom UI, but it’ll work and could potentially work well for others.

These bookmarklets aren’t any great shakes and perhaps (hopefully?) someone with more JavaScript chops than I have can greatly improve upon them to add or modify some of the bits and automate things a bit better. In particular, I’m sure there’s a way to find the original publication date on a page and pull that data out, but currently I could only figure out how to find the last modified date using document.lastModified because I couldn’t find the other. I’d also prefer to have a way to automatically find the author(s) as well, but JS isn’t my best friend.

Instructions for use

Create two bookmarks in your browser’s bookmark bar. Give them convenient names like “via” and “hat tip” and add the snippets of code respectively into the URL fields. On a site you want to give credit to, highlight the name of the author of the post and click the bookmarklet. You’ll see a pop up for some text which you can then cut and paste into your post to give the credit. You can obviously edit the text if necessary.

If your site supports sending Webmention notifications, then when the post is published, the cited page will get a notification of your post.

Bookmarklet code

Below are snippets of code that the bookmarklets are running (for transparency’s sake).

javascript:(function(){let text=""; if(window.getSelection()!=''){text=window.getSelection().toString()+"\n";}prompt("Press Ctrl+C, Escape","<p><small><cite class="h-cite via"><abbr title="via">ᔥ</abbr> <span class="p-author h-card">"+text+"</span> in <a class="u-url p-name" href=""+location.href+"" target="_blank" rel="noopener noreferrer" >"+document.title+"</a> (<time class="dt-published">"+document.lastModified+"</time>)</cite></small></p>");})()
javascript:(function(){let text=""; if(window.getSelection()!=''){text=window.getSelection().toString()+"\n";}prompt("Press Ctrl+C, Escape","<p><small><cite class="h-cite ht"><abbr title="hat tip">↬</abbr> <span class="p-author h-card">"+text+"</span> in <a class="u-url p-name" href=""+location.href+"" target="_blank" rel="noopener noreferrer" >"+document.title+"</a> (<time class="dt-published">"+document.lastModified+"</time>)</cite></small></p>");})()

Example

Here’s an example of what it looks like on my site:

 Maria Popova with input from Tina Roth Eisenberg in curator’s ǝpoɔ ()

Who will you credit?

Some modification ideas to the Curator’s Code Plugin

I quietly wonder what it would take to modify the zip file for the Curator’s Code Plugin to take advantage of Parse This to input a URL and parse back a small snippet of context for more easily giving credit to posts in the WordPress classic editor?

It looks like it used to be in the repository, but perhaps with the rise of Gutenberg, they opted not to maintain it? 

I follow most of the code there, but I’m thinking too much of the actual output is done via JS with tinyMCE, so maybe I’m missing some of the finer portions. It also needs some tweaks to redirect to maybe the Internet Archive since curatorscode.org no longer exists.

I’m thinking an output closer to the following for each type might still be simple, but provide some additional context, (presuming my microformats aren’t too horrific/mis-nested):

<p><small><cite class="h-cite via"><abbr title="via">ᔥ</abbr> <span class="p-author h-card">AuthorTK</span> <a class="u-url p-name" href="https://example.com/TK" target="_blank" rel="noopener noreferrer">TitleTK</a> (<time class="dt-published">2020-TK-TK</time>)</cite></small></p>

<p><small><cite class="h-cite ht"><abbr title="hat tip">↬</abbr> <span class="p-author h-card">AuthorTK</span> <a class="u-url p-name" href="https://example.com/TK" target="_blank" rel="noopener noreferrer">TitleTK</a> (<time class="dt-published">2020-01-29</time>)</cite></small></p>

Hopefully the via and ht classes also give people enough to latch onto for doing some custom styling of the output if necessary.

With more prevalence of crediting like this, I also wonder how parsers might better display received webmentions for these types of notifications beyond the basic “Sue mentioned this”. Maybe a facepile of avatars under the heading “Inspired by this post”?  Though the way “via” is used in practice, it might also fit under the category of a repost?

Replied to Idea: a script to find Flickr photos being used online by Matt Maldre (Matt Maldre)
Flickr is a great place to find photos to use. Many photographers assign their photos with a Creative Commons license, so any can use the … Idea: a script to find Flickr photos being used online... Read More »

Clicking through to the photo, there is no mention of this image appearing on this important announcement. Perhaps the author privately contact the photographer about using his image. Since Ken Doctor is so incredible with his media experience (i’m being serious), I’m fairly certain someone from his team would have contacted the photographer to give him a heads up.

I’m sure I’ve said it before, but I maintain that if the source of the article and the target both supported the Webmention spec, then when a piece used an image (or really any other type of media, including text) with a link, then the original source (any website, or Flickr in this case) would get a notification and could show—if they chose—the use of that media so that others in the future could see how popular (or not) these types of media are.

Has anyone in the IndieWeb community got examples of this type of attribution showing on media on their own websites? Perhaps Jeremy Keith or Kevin Marks who are photographers and long time Flickr users?

Incidentally I’ve also mentioned using this notification method in the past as a means of decentralizing the journal publishing industry as part of a peer-review, citation, and preprint server set up. It also could be used as part of a citation workflow in the sense of Maria Popova and Tina Roth Eisenberg‘s Curator’s Code[1]set up, which could also benefit greatly now with Webmention support.
Annotated on March 09, 2020 at 12:18PM

Read The discovery metadata field by Matt Maldre (Matt Maldre)
The internet would be a really interesting place if every article that was shared automatically had a “via link.” Ok, so the internet is already interesting. But what makes the internet such a great place is its connectivity. Everything is linked together. We can easily share a link to an article. So many links all … The discovery metadata field Read More »
I’ve been fascinated with this idea of vias, hat tips, and linking credit (a la the defunct Curator’s Code) just like Jeremy Cherfas. I have a custom field in my site for collecting these details sometimes, but I should get around to automating it and showing it on my pages rather than doing it manually.

Links like these seem like throwaways, but they can have a huge amount of value in aggregate. As an example, if I provided the source of how I found this article, then it’s likely that my friend Matt would then be able to see a potential treasure trove of information about the exact same topic which he’s sure to have a lot of interest in as well.

One of the things I love about webmentions is that these sorts of links to give credit could be used to create bi-directional links between sites as well. I’m half-tempted to start using custom experimental microformats classes on these links so that when the idea takes off that people could potentially display them in their comments sections as such instead of just vanilla “mentions”. This could be useful for sites that serve as inspiration in much the same way that journalistic outlets might display reads (versus bookmarks, likes, or reposts) or podcasts could display listens. Just imagine the power that displaying webmentions on wikis could have for their editors to later update pages or readers might have to delve into further resources that mention and link to those pages, especially when the content on those linked pages extends the ideas?

Tim Berners-Lee’s original proposal for hypertext was rejected because it didn’t bake bi-directional links into the web (c.f. Webstock ‘18: Jeremy Keith – Taking Back The Web at 13:39 into the video). Webmentions seems to be a simple way of ensconcing them after-the-fact, but in a way that makes them more resilient as well as update-able and even delete-able  by either side.

Of course now I come to wonder just how it was that Jeremy Cherfas finds such a deep link on Matt’s site from over a year ago? 😉

Jeremy Cherfasupdate on the IndieWeb wiki ᔥ the IndieWeb-meta chat ()

Listened to The Curator's Code by Brooke Gladstone from On the Media | WNYC Studios

One of the greatest assets of the internet is that it leads to great content discoveries that readers might not otherwise be able to find. One of the biggest liabilities is that content is frequently repackaged without crediting its creators or where it was found. Brooke talks to Maria Popova, editor of the website Brain Pickings and one of the creators of the Curator's Code, which seeks to honor the way people discover content online.

hat tip: Martijn van der Ven and Jeremy Cherfas

Originally bookmarked to listen to on November 23, 2019 at 10:38AM