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.

15 thoughts on “Browser Bookmarklets for Giving Credit”

  1. Aaron Davis says:

    Aaron Parecki unpacks his process of cleaning up his Facebook account.

  2. The IndieWeb Gift Calendar is an annual group effort to ship one or more IndieWeb-related thing(s) each day of December that others can use to improve their IndieWeb experience.

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

    1. Chris Aldrich says:

      Aaron, sorry to hear that it isn’t working for you. I recall having some quirks with single versus double quotes and with regards to JavaScript I’m a only at a cut&paste level of proficiency and even then it takes some trial and error. I would hope that John’s version might work better as his JS skills are assuredly better than mine: https://johnjohnston.info/blog/re-re-browser-bookmarklets-for-giving-credit/.

  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:

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

  5. john says:

    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.

Leave a Reply

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