Show your recent Last.fm scrobbles on your GitHub profile README. Powered by Vercel.
Check out spotify-recently-played-readme for a similar integration for Spotify.
Just add the following into your README and set the query parameter user to your Last.fm username.
To add link to your last.fm profile, wrap the image in a link tag:
[](https://www.last.fm/user/JeffreyCA01)You can customize your list.fm status by adding query parameters after the url. Here is a list of available parameters.
| Parameter | Description | Type | Default | Valid Values |
|---|---|---|---|---|
count |
Number of recent tracks to display | number | 5 | 1 - 10 |
width |
Width of the card in pixels | number | 400 | 300-1000 |
loved |
Show a heart indicator for loved tracks | boolean | false | true, false |
show_user |
Show your username and profile picture in the specified location. | string | never | never, always, header, footer |
header_style |
Adjust the size of the header or hide it | string | normal | none, compact, normal, compact_stats, normal_stats, compact_stats_only, normal_stats_only |
footer_style |
Adjust the size of the footer or hide it | string | none | none, wave, compact, normal compact_stats, normal_stats |
border_radius |
Adjust the radius of the card | number | 10 | 0 - 100 |
loved_style |
Customize the indicator placement for loved tracks | number | 1 | 1, 2, 3, 4 |
bg_color |
Customize the background color of the card. Supports alpha transparency. | string | 212121 | RGB/A hexadecimal |
Change the amount of recent tracks that are displayed.
Default:
5
Min Value:
1
Max Value:
10
Change the width of the card, in pixels.
Default:
400
Min Value:
300
Max Value:
1000
Show a heart indicator for loved tracks.
Default:
false
Possible Values:
true|false
Determines if and where the user's profile information is shown. If you want to show exclusively the user's profile in a given section, use the normal or compact header and footer styles.
Default:
never
Possible Values:
never|always|header|footer
header |
footer & footer_style=normal |
|---|---|
Changes the size and content of the header. You can use header and footer styles to show the user's stats (i.e. scrobbles, artist count, and track count). Using a _stats_only style will center the stats if the user's profile is not visible within the header. Use the compact or normal style in combination with show_user to exclusively show the user profile in the footer.
Default:
normal
Alias:
header_size
Possible Values:
none|normal|compact|normal_stats|compact_stats|normal_stats_only|compact_stats_only
none |
normal_stats |
compact_stats_only |
|---|---|---|
Changes the size and content of the footer. You can use header and footer styles to show the user's stats (i.e. scrobbles, artist count, and track count). Using a _stats style will center the stats if the user's profile is not visible within the footer. Use the compact or normal style in combination with show_user to exclusively show the user profile in the footer.
Default:
none
Possible Values:
none|wave|normal|compact|normal_stats|compact_stats|
wave |
normal |
normal_stats |
|---|---|---|
Customize the indicator placement for loved tracks.
Default:
1
Possible Values:
1|2|3|4
| Style 1 | Style 2 | Style 3 | Style 4 |
|---|---|---|---|
Change the background color of the main card with a hexadecimal RGB/A code. Supports alpha transparency.
Default:
212121
Possible Values:
any valid RGB/A hex-code
Deploy your own Vercel project using the link above. Next, you'll need to set the API_KEY environment variable to your Last.fm API key. You'll also need to set the VERCEL_URL system environment variable in the Vercel project settings.
- Clone Git repo
$ git clone https://github.com/JeffreyCA/lastfm-recently-played-readme.git
- Install Node dependencies
$ npm install
- Create
.envfile containing the following:API_KEY=<Last.fm API key>
- Run development server
$ npm run dev
The app will be running at http://localhost:3000.