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?

Published by

Chris Aldrich

I'm a biomedical and electrical engineer with interests in information theory, complexity, evolution, genetics, signal processing, IndieWeb, theoretical mathematics, and big history. I'm also a talent manager-producer-publisher in the entertainment industry with expertise in representation, distribution, finance, production, content delivery, and new media.

12 thoughts on “Browser Bookmarklets for Giving Credit”

  1. The original Press This spun itself off as a stand-alone plugin, so look there first to recreate its functionality. If that doesn’t suit, try David Shanske’s Post Kinds plugin which incorporates a lot of Press This functionality and extends it quite a bit. You can create bookmarklets with it that work well (including mobile).
    Another option is Tom Critchlow and Toby Shorin’s Quotebacks which you might leverage though they won’t necessarily create new posts on your behalf.
    If you’ve got some programming experience, you might be able to do something interesting with a set of bookmarklets I just made too.
    I think I’ve also shared most of my documented workflow for using Hypothes.is for some of this too, though that may require some work on your behalf.
    Another good option is to add Micropub functionality and use some clients like Quill, Omnibear, or others in conjunction with the Post Kinds plugin. I think Quill may also have some useful bookmarklets you can use with it as well.

  2. I am all in on this Chris, but I just can’t seem to get it to work. I created the bookmarklet, highlighted the name and clicked the bookmarklet, but there was no pop-up. I must admit, I do not use many bookmarklets, only Alan Levine’s really. I may therefore have to dig into this a bit further as it is probably me.

  3. Hi Aaron,

    I am glad you posted this. I like bookmarklets. I run one a bit like this via AppleScript on my mac. This has an advantage of letting me add a keyboard to send straight to the clipboard.

    I am going to add the indieweb mark up to that using Chris’s script for reference. Like you I couldn’t get it working at first I had to mess around with he single and double quotes. This works for me:

    .gist table { margin-bottom: 0; }

    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>');})()

    <a href="https://gist.github.com/troutcolor/4235360dff2769d3efa7e10bffe7fb22/raw/b6bd40f1cc6aaa810d47e00432e4e0da8341208f/via-indie-web-bookmarklet" rel="nofollow ugc">view raw</a>
    <a href="https://gist.github.com/troutcolor/4235360dff2769d3efa7e10bffe7fb22#file-via-indie-web-bookmarklet" rel="nofollow ugc">via-indie-web-bookmarklet</a>
    hosted with ❤ by <a href="https://github.com" rel="nofollow ugc">GitHub</a>

    I’ve not got much of a handle on JavaScript so YMMV.

  4. Hi Aaron,
    I am glad you posted this. I like bookmarklets. I run one a bit like this via AppleScript on my mac. This has an advantage of letting me add a keyboard to send straight to the clipboard.
    I am going to add the indieweb mark up to that using Chris’s script for reference. Like you I couldn’t get it working at first I had to mess around with he single and double quotes. This works for me: javascript:(function(){let text = “”;if (window.getSelection() != ”) {text = window.getSelection().toString() + ‘n’;}var tocopy = ‘

    “‘ + text + ‘” in ‘ + document.title + ‘ (‘ + document.lastModified + ‘)

    ‘;;d=document;d.body.appendChild(Object.assign(d.createElement(‘textarea’),{value:tocopy})).select();d.execCommand(‘copy’);})() view raw
    via-indie-web-bookmarklet
    hosted with ❤ by GitHub
    I’ve not got much of a handle on JavaScript so YMMV.

  5. I’m pretty sure Chris Aldrich’s site is where I first learned about using ↬ (“rightwards arrow with loop”) for giving credit. (The symbol would then mean something like hat tip. “Via” is something else, still, apparently, although the distinction isn’t super clear to me. Since I already mark up reposts with microformats, I’m going to stick with this one—“hat tip”—for now.)
    Not sure if I should rework the format, use the “h-cite” microformat (or a cite element). cite should really only be used on the title of a cited work—please correct me if I’m wrong—whereas I would prefer to credit the person that lead me to whatever bit of information I stumbled upon, all while still linking, when possible, to a more specific blog post or page.
    Anyhow, I don’t give credit nearly enough—this here is like the third time or so. Let’s change that.
    Chris Aldrich

Mentions

Reposts

Likes

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond to a post on this site using your own website, create your post making sure to include the (target) URL/permalink for my post in your response. Then enter the URL/permalink of your response in the (source) box and click the 'Ping me' button. Your response will appear (possibly after moderation) on my page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)