jordesign

<p>Scrobbled Blocks brings your Last.fm listening history to your WordPress site using native Gutenberg blocks. Whether you’re a music blogger, podcaster, DJ, or just want to share your musical tastes with your audience, this plugin makes it simple.</p>
<h4>Two Powerful Blocks</h4>
<p><strong>Now Playing Block</strong><br />
Display the track you’re currently listening to, or the most recent track you’ve played. Perfect for sidebars, footers, or anywhere you want to show off your current musical mood.</p>
<p><strong>Recently Played Block</strong><br />
Show a list or grid of your recent scrobbles. Configurable from 1-20 tracks, with flexible layout options to match your site’s design.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Live Editor Preview</strong> – See your actual Last.fm data while editing in Gutenberg</li>
<li><strong>Flexible Layouts</strong> – Choose between list and grid views for the Recently Played block</li>
<li><strong>Customisable Display</strong> – Toggle artwork, timestamps, and Last.fm links on or off</li>
<li><strong>Smart Caching</strong> – Minimises API calls while keeping data fresh (1 min for Now Playing, 5 min for Recently Played)</li>
<li><strong>Graceful Degradation</strong> – If the API is unavailable, cached data is served; if no cache exists, blocks simply don’t render</li>
<li><strong>Theme-Friendly Styling</strong> – Uses CSS custom properties so you can easily match your theme</li>
<li><strong>Responsive Design</strong> – Looks great on all screen sizes</li>
<li><strong>Custom Placeholder</strong> – Upload your own placeholder image for tracks without artwork</li>
</ul>
<h4>External Services</h4>
<p>This plugin connects to the Last.fm API (<code>https://ws.audioscrobbler.com/2.0/</code>) to retrieve your public listening history and display it on your WordPress site.</p>
<p><strong>What the service is used for:</strong></p>
<p>This plugin uses the Last.fm API to fetch your recent scrobbles (listening history) so they can be displayed on your WordPress site using the Now Playing and Recently Played blocks.</p>
<p><strong>What data is sent:</strong></p>
<ul>
<li>Your Last.fm username</li>
<li>Your Last.fm API key</li>
<li>The number of tracks to retrieve</li>
</ul>
<p><strong>When data is sent:</strong></p>
<ul>
<li>When the Now Playing or Recently Played blocks are displayed on a page</li>
<li>Data is cached locally to minimise API requests (1 minute for Now Playing, 5 minutes for Recently Played)</li>
</ul>
<p><strong>Service provider:</strong></p>
<p>This service is provided by Last.fm Ltd.</p>
<ul>
<li><a href="https://www.last.fm/legal/terms" rel="nofollow ugc">Last.fm Terms of Service</a></li>
<li><a href="https://www.last.fm/legal/privacy" rel="nofollow ugc">Last.fm Privacy Policy</a></li>
</ul>
<p>No personal data from your site visitors is collected or sent to Last.fm. Only your configured Last.fm username and API key are transmitted to retrieve your public listening data.</p>
<h3>CSS Customisation</h3>
<p>The plugin uses CSS custom properties (CSS variables) for easy theming. Add these to your theme’s CSS to override the defaults:</p>
<pre><code>:root {
    /* Artwork sizes */
    --scrobble-artwork-size: 64px;
    --scrobble-artwork-size-grid: 100%;

    /* Spacing */
    --scrobble-gap: 1rem;

    /* Typography */
    --scrobble-font-size-track: inherit;
    --scrobble-font-size-artist: 0.875em;
    --scrobble-font-size-timestamp: 0.75em;

    /* Colours */
    --scrobble-color-text: inherit;
    --scrobble-color-text-secondary: inherit;
    --scrobble-color-link: inherit;
}
</code></pre>
<h4>Example: Larger Artwork</h4>
<pre><code>:root {
    --scrobble-artwork-size: 100px;
}
</code></pre>
<h4>Example: Custom Colours</h4>
<pre><code>:root {
    --scrobble-color-text: #333;
    --scrobble-color-text-secondary: #666;
    --scrobble-color-link: #1db954;
}
</code></pre>
<h3>Additional Notes</h3>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.0 or higher</li>
<li>PHP 7.4 or higher</li>
<li>A Last.fm account (free)</li>
<li>A Last.fm API key (free, get one at last.fm/api)</li>
</ul>
<h4>Source Code</h4>
<p>This plugin uses build tools to compile JavaScript for the block editor. The compiled files are located in the <code>build/</code> directory.</p>
<p>The original, human-readable source code is available in the <code>src/</code> directory and on GitHub:<br />
<a href="https://github.com/jordesign/scrobbled-blocks" rel="nofollow ugc">https://github.com/jordesign/scrobbled-blocks</a></p>
<p>To build from source:</p>
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code> to install dependencies</li>
<li>Run <code>npm run build</code> to compile the blocks</li>
</ol>
<h4>Support</h4>
<p>For bug reports and feature requests, please visit the <a href="https://github.com/jordesign/scrobbled-blocks/issues" rel="nofollow ugc">GitHub repository</a>.</p>
<h4>Contributing</h4>
<p>Contributions are welcome! Please see the <a href="https://github.com/jordesign/scrobbled-blocks" rel="nofollow ugc">GitHub repository</a> for development guidelines.</p>


Scrobbled Blocks

Display your Last.fm listening activity on your WordPress site with native Gutenberg blocks.

Ryan

<p>Widget to display your recently played tracks from last.fm LIVE! Which means the widget will display the song you are currently listening to (provided that you are scrobbling to last.fm) along with your chosen number of previously played songs.</p>


last.fm Live!

Widget to display your recently played tracks from last.fm LIVE! shows any song you play(& scrobble) on your site in realtime.

Scrobbled Blocks vs last.fm Live!