Forem Creators and Builders

loading...
Cover image for Custom Page: Spotify Embed

Custom Page: Spotify Embed

Nick Taylor (he/him)
Lead software developer at Forem. Caught the live coding bug on Twitch at livecoding.ca
・1 min read

I'm having fun in my self-hosted Forem, https://community.vscodetips.com. One thing that I thought would be cool would be to add was Hacker playlists for folks to listen to.

image

  1. To add a custom page, navigate to your custom pages in the admin area, e.g. https://your_forem_site_/admin/customization/pages and click on the New Page button.

  2. Fill out the required fields including the Body html field (not the markdown one).

  3. To get the markup for the Spotify embed, check out the Spotify embed developer documentation.

  4. Click the Update Page button and you're done!

image

If you want to go a step further, you can have the playlist change every day. Take a peek in the repository below to see how I did that.

GitHub logo vscodetips / community.vscodetips.com

Assets for community.vscodetips.com

Assets and Resources for community.vscodetips.com

Houses logos, social cards etc for community.vscodetips.com as well as markup for embeds on custom pages.

Discord embedded into community.vscodetips.com

Spotify embedded into community.vscodetips.com




You might find this handy for the 1Vibe community @ildi . 😎

Discussion (4)

Collapse
ildi profile image
Ildi

This is a great idea! 1VIBE Spotify playlist coming soon 😎

Thanks for the suggestion @nickytonline - I should also experiment with some custom icons, I really like the nav menu you've setup for VSCodeTips, looks really clean.

Collapse
ben profile image
Ben Halpern

I'd encourage you to play around with alternate "templates" (we should more clearly display the difference)... but there is a lot you can do with pages to create a custom experience, ala:

dev.to/shecoded

Collapse
thomasbnt profile image
Thomas Bnt

Very nice integration of Spotify. I already seen the source code, it's simple but totally appreciated 😁😎

Collapse
michaeltharrington profile image
Michael Tharrington

This is so dope! Thanks for sharing this, Nick.

Also, seriously nice Hacker Playlist! 😎