How to Add a Last.fm Widget to Your Website (Step‑by‑Step)Last.fm provides an easy way to share what you’re listening to by embedding widgets on your website. This guide walks through the process step‑by‑step: choosing the right widget, grabbing the embed code, customizing appearance, and troubleshooting common issues. Follow along whether you’re adding a sidebar widget to a blog, a profile box to a portfolio, or a custom player to a fan site.
What a Last.fm widget does
A Last.fm widget displays information from a Last.fm user account or a specific artist/track, such as:
- Recent tracks — what you’ve recently scrobbled.
- Now playing — the current song.
- Top tracks/artists — charts from your listening history.
- Artist/album badges — clickable visuals linking to Last.fm pages.
Widgets typically use HTML/CSS/JavaScript embed code or image badges that update automatically.
Step 1 — Choose the right type of widget
Decide what you want to show on your site:
- If you want a live list of recent tracks or “now playing”, choose a Recent Tracks or Now Playing widget.
- For profile promotion, pick a profile badge showing your avatar and playcount.
- For artist-focused pages, use an Artist widget or top tracks widget.
- If you need a lightweight option for older platforms, use an image badge.
Consider layout constraints: narrow sidebars work best with compact widgets; wide header areas can host larger, horizontal displays.
Step 2 — Get your Last.fm username or target artist
You’ll need the Last.fm username (for user widgets) or the artist name/identifier (for artist widgets). To find your username:
- Log in to Last.fm.
- Click your profile to copy the username from the URL (e.g., last.fm/user/yourusername).
For artist widgets, search the artist on Last.fm and copy the artist slug from the URL (e.g., last.fm/music/Artist+Name).
Step 3 — Create or find the widget code
Last.fm used to provide an official widget creation interface; if an official generator isn’t available, you can use one of these approaches:
A. Official embed (if available)
- Go to your Last.fm profile or artist page and look for “Share” or “Widget” options.
- Choose the widget type, size, and colors.
- Copy the generated HTML/JavaScript embed code.
B. Community or third‑party generators
- Use a trusted third‑party widget generator or GitHub project that creates Last.fm widgets.
- Enter your username/artist and select options.
- Copy the produced HTML/CSS/JS snippet.
C. Manual simple image badge
- Use the Last.fm badge image URL format (if supported) or a small script that fetches recent tracks and renders an image on the fly.
- This option is fastest for static sites but provides limited interactivity.
Example of a simple embed snippet (illustrative — adapt if using an official generator):
<!-- Example Last.fm recent tracks widget (illustrative) --> <div id="lastfm-widget"> <a href="https://www.last.fm/user/yourusername" target="_blank" rel="noopener"> <img src="https://lastfm-img.example.com/badge/yourusername" alt="Last.fm widget"> </a> </div> <script src="https://example-widget-host.com/lastfm-widget.js"></script> Replace placeholders with the actual code provided by Last.fm or your generator.
Step 4 — Customize appearance
Most widgets allow some customization:
- Size (width/height)
- Theme (light/dark)
- Number of tracks shown
- Font and color accents
If the provided options aren’t enough, use CSS overrides. Example:
#lastfm-widget { width: 240px; background: #111; color: #eee; font-family: "Helvetica Neue", Arial, sans-serif; } #lastfm-widget a { color: #f50; } Add the CSS to your site’s stylesheet or within a