Verty's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Embed last.fm scrobbles to your profile page [Expanded]

I wanted to expand on this previous post: https://blog.spacehey.com/entry?id=221954

The Basics

There's the basic code to have a plain old image embedded that shows your recent Scrobbles:

<a href="https://www.last.fm/user/VertyyBird"><img src="https://lastfm-recently-played.vercel.app/api?user=VertyyBird&width=350&count=2" height="auto" width="350px"></a>

More Parameters!

But, you can add parameters to the code above to customise how the embed looks! The table below shows all the available options:

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
header_size Adjust the size of the header or hide it string normal none, compact, normal
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


To customise the embed, just add the parameters to the image query like this! I'll use my own account to show examples:

Display two recent tracks

https://lastfm-recently-played.vercel.app/api?user=VertyyBird&width=350&count=2

Show hearts next to Loved tracks

https://lastfm-recently-played.vercel.app/api?user=VertyyBird&width=350&loved=true

You can even change the Loved style

https://lastfm-recently-played.vercel.app/api?user=VertyyBird&width=350&loved=true&loved_style=1
Style 1                                    Style 2                   Style 3                        Style 4

Lastly, you can change the header!

https://lastfm-recently-played.vercel.app/api?user=VertyyBird&width=350&header_size=normal
none                                                 compact                                  normal

Hopefully I wrote this clear enough to understand. Comment with any questions!


4 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )