Bandcamp release id for WATMM editor embedding HOWTO

[dcom]

(Bah, this post should've been in Forum Discussion / Issues, admins, please move it.)

As there's occasional grumbling about the difficulty of embedding Bandcamp releases in this editor, here's my writeup on the subject, including a simple(r) solution that's far from optimal, but it works.

Bandcamp release id is AFAIK actually a WordPress article id, a numeric string that's more or less random from our point of view, so it can't be guessed.

The id is not included in a Bandcamp release's URL, but embedded (multiple times in different ways) within the HTML of the release page, so manual extraction requires viewing the source and knowing what to look for.

The way to get the id from the Bandcamp page without viewing the source is to click Share / Embed (under the release image), which opens an accordion below the link with a second link, Embed this album. Clicking it will open a Customize dialog, where you can select by clicking any style you want to get to the next step, where you get the Embed HTML code in a text input (the one starting with <iframe...). The embed code contains the release id within the iframe tag's src attribute, e.g.

https://bandcamp.com/EmbeddedPlayer/album=140089158/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/

where you can see the release id as a value for the album parameter (bold emphasis); this is what you want for this editor's Bandcamp embed dialog. Paste the embed HTML to an editor and copy the release id, then click the editor's Bandcamp embed button, paste the id and Bob's your uncle. I used to paste the whole embed HTML to the dialog's text field, then delete everything before and after the id, but YMMV. This is difficult and sucks donkey derrière, although I'm quite quick at it.

As always, TMTOWTDI (There's More Than One Way To Do It) - so I viewed the Bandcamp release page's source and found the easiest possible way to extract the id, so I came up with a small Javascript fragment that can be used as a bookmark:

javascript:window.alert(JSON.parse(document.getElementsByName("bc-page-properties").item(0).content).item_id)

Add it as a bookmark (copy and paste the code as the URL of the bookmark); when you're on a Bandcamp release page, run the bookmark and you'll get the id on a popup from where you can copy and paste it to the embed's input. As I've written elsewhere, this is not optimal, but definitely less painful than suffering through the indignity of doing it manually as above. 

There's no truly optimal solution that wouldn't require any copy-and-pasting, because to pick up the release number the release page's HTML source is required, so any solution is required to copy-paste either the id (extracted with Javascript from the release page like with my bookmark thingy above) or the release page URL (so that the id can be extracted programmatically from the page's HTML source). There are more complex and complicated solutions, but they're definitely even more farther away from optimal because of the effort required to implement them - I think the intuitive way would be to just paste the Bandcamp release's URL in the editor, but that would require modifying the editor's behaviour; the next best thing would be to paste the URL in the embed dialog, which would then load the release page's HTML and extract the release id - but that would require modifying the Bandcamp embed functionality.

Therefore, the currently easiest way is to use the bookmark kludge above. Let me know if you come up with a better one without having to delve into the forum software's innards.

Edited October 29, 2021 by dcom

[cruising for burgers]