Including a Follow button on your web page enables a visitor to click it and thereby add either the artist or another user to the visitor’s own profile.

Note:

  • The Follow button does not support following a playlist, as of yet. However, by using the follow a playlist endpoint, you can build a custom button to perform a follow functionality of a specific playlist. See an example in JSFiddle. To include such a custom Follow button in your website, register your companion application on your Dashboard and change the way the proxy JSFiddle sends the access token.
  • Your site visitors who do not have a Spotify account, are prompted to choose whether they want to create one, either directly or through Facebook. Site visitors who have a Spotify account but are not logged in, are prompted to do so either directly or through Facebook.
  • The Follow button does not have any events defined, nor does it listen for any. Following or unfollowing can only be triggered by the user clicking the button.
  • Currently you cannot change the Follow button design other than switching between the light and dark themes. By using the Follow Endpoints you can implement a custom version of the button.
  • Follow is not localized.

To Add a Spotify Button:

  1. Retrieve the code for the Spotify Follow Button widget.
     PUT HERE THE CODE RETRIEVAL INTERACTIVE PART
    
  2. Add the code to the artist page.
  3. Obtain the link you need for the widget.
    • a. In the Spotify Desktop Player, or in the Spotify Web Player, search for “Demoscene Time Machine” and then open the artist page shown in the search results.
    • b. Click the More icon More button.
    • c. Select Copy HTTP Link or Copy Artist Link:

      Adding a Button

  4. Paste the link into the Spotify HTTP Link box in the generator: Enter HTTP Link
  5. See the Preview change to include the Follow Button.
  6. See beneath the button preview the Embed code. Copy this code and paste it into your HTML file just above the discography heading.
  7. Add a heading with the artist name above the button. The code between the <body> and </body> tags should now look like this:

     <body>
       <div class="container">
    
       	<h1>Demoscene Time Machine</h1>
    
       	<iframe src="https://embed.spotify.com/follow/1/?uri=spotify:artist:4ikPJGH7I7IyhdBJs1GMhh&size=detail&theme=light" width="300" height="56" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe>
    
       	<h2>Discography</h2>
       	<p>Click an album cover to hear a 30 second preview, or click the button to play the album on Spotify!</p><br />
    
       	<div id="results"></div>
    
       </div>
    
       <script id="results-template" type="text/x-handlebars-template">
     	{{#each albums.items}}
     	<div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"><a href="{{external_urls.spotify}}"><div class="spotify-button"><img src="https://developer.spotify.com/wp-content/uploads/2014/06/play_on_spotify-green.png" /></div></a></div>
     	{{/each}}
       </script>
    
     </body>
    
  8. Save the page and open it again in a browser. You should see this: Adding a Follow Button to the Artist Page