artistlinks.js (1.0)

Create a link list for all your artist platforms that's easy to maintain.


Usage in a nutshell

  1. Create your custom input.js file.
  2. Embed code on your website.
  3. Update the input.js file when you got links to add or remove.

Package files


Supported platforms

Please open example_page.html in a webbrowser to see a list of supported platforms.


Your first link list

To keep this example simple, you're gonna create a link list with only two entries.

  1. Open input_generator.html in a webbrowser.
  2. In Platform Configuration, select Bandcamp.
  3. Take a look at Link Pattern: https://{var1}.bandcamp.com. If your Bandcamp page were located at https://mymusic.bandcamp.com, then {var1} would correspond to mymusic.
  4. In Value for {var1}, enter mymusic.
  5. Optionally adjust Displayed Link Text.
  6. Ignore Weight For Listing for now.
  7. Click the add button.

At this point you should see one entry in Your Custom Input Configuration. Don't worry if you make mistakes, you can always edit this later in a text editor.

  1. Back to Platform Configuration, select Pandora.
  2. Take a look at Link Pattern: https://pandora.com/artist/{var1}/{var2}. This one has two variables. If your Pandora page were located at https://pandora.com/artist/mymusic/Abc123defF45, {var1} would correspond to mymusic and {var2} to Abc123defF45.
  3. In Value for {var1}, enter mymusic.
  4. In Value for {var2}, enter Abc123defF45.
  5. Click the add button

At this point you should see two entries in the Your Custom Input Configuration. It should look like this:

// start of input configuration

'use strict';

const artistlinks_input = [

    // BANDCAMP: https://{var1}.bandcamp.com
    { 'platform': 'bandcamp', 'var': [ 'mymusic' ], 'text': 'Bandcamp', 'weight': 0 },

    // PANDORA: https://pandora.com/artist/{var1}/{var2}
    { 'platform': 'pandora', 'var': [ 'mymusic', 'Abc123defF45' ], 'text': 'Pandora', 'weight': 0 },

];

// end of input configuration

Note: Lines beginning with // are only comments/notes and have no effect on the script.

  1. Open a new empty file in a text editor and copy & paste your created platform configuration into it. Save the file in the same folder as the artistlinks.js file is located, name it my_input.js.

  2. Make a copy of example_page.html and rename it to my_example.html.

  3. Open my_example.html in a text editor and change <script src="example_input.js"></script> to <script src="my_input.js"></script>.

  4. Finally open my_example.html in a webbrowser. You get the idea.

You could also just copy & paste the code from Your Custom HTML Output in your website. Then you would not need the artistlinks.js file, but the link list will be harder to maintain.


Custom platform

If the platform you want to add is not supported, you can select Custom Platform in Platform Configuration and just enter the direct link in Value for {var1}, e.g. https://example.org/foo/bar. Also feel free to send me the missing platform link so it can be added to the script.


Embed the link list on your website

  1. Upload artistlinks.js and my_input.js to the same folder on your webserver.

  2. In the source code of the page you want the link list to appear, add the following code:

<div id="artistlinks"></div>
<script src="path/to/my_input.js"></script>
<script src="path/to/artistlinks.js"></script>
<script>artistlinks.main();</script>

Advanced users can also override one or more of the following options through the main() function:

Note: If sortByText and sortByWeight are both set to false, the links will appear in the same order as they are coming from your input. By default the script will sort the list first alphabetically by text and then by weight. Less weight, e.g. negative numbers will push the link up in the list. For example you probably want your official website to have a weight of something around -100 so it's always on top.

Options example:

const options = {
    'sortByText': true,
    'sortByWeight': true,
    'displayNodeId': 'artistlinks',
    'platformHtml': '<a class="platform {platform}" href="{url}" target="_blank" title="{url}">{text}</a>',
    'input': [
        { 'platform': 'bandcamp', 'var': [ 'mymusic' ], 'text': 'Bandcamp', 'weight': 0 },
        { 'platform': 'spotify', 'var': [ '123ABcdGHi4JKL5mn678Op' ], 'text': 'Spotify', 'weight': 0 },
        { 'platform': 'pandora', 'var': [ 'mymusic', 'Abc123defF45' ], 'text': 'Pandora', 'weight': 0 },
        { 'platform': 'officialwebsite1', 'var': [ 'mymusic.com' ], 'text': 'Official Website', 'weight': -100 },
    ],
}

artistlinks.main(options);

Maintain your link list

You can always add or remove individual platforms later. Just use input_generator.html to generate only the new ones you need, then copy & paste only the part you need into your existing my_input.js file. Or just remove the entries you don't want anymore.


Updating artistlinks.js

To update the script, just override your current artistlinks.js file with the new one and keep your current input configuration files.