Spinitron Web Integration: My Story

The LOOONG Backstory

In February 2022, another volunteer and I attended Spinitron’s webinar on Web Integration. We had just started using Spinitron and wanted to make it a bigger part of our website.

In the webinar, Tom showed us how we could take Spinitron content and make it look as if it were part of our website. It looked great, exactly what we were looking for. Unfortunately it didn’t take long before I got hopelessly lost in the sequence of directions.

Bruce, the other volunteer, was much more knowledgeable about html than I and thought he could pull it off. He gave it a try and got stuck about halfway through.

That’s where the idea sat for nearly a year. Every now and then, though, especially when Spinitron came up, I would bring up that webinar I attended and speculated on how we could make that happen. Perhaps we could hire someone to figure this out?

Finally, a few weeks ago, I decided to take another look at the directions. If I made decent progress, I thought, maybe I could post the place where I got stuck in these forums and someone would be able to help me out.

I took another look at the webinar video. I’m a visual learner, so usually this is my go-to first step. However … although Tom does a good job of explaining the concept and its benefits, he jumps around too much for me to get a clear picture of the steps I’m supposed to follow.

Fortunately I found the written step-by-step directions. They were a big help. After a few hours of trial and error, I had a workable Spinitron webpage that I could integrate into our site. Below I’m going to repost Tom’s direction with some added tips that helped me.

The Starting Directions

Step One: Choose a page on your site to use as a basis to make the custom layout.

For this, I actually added a new page that was totally empty of content (besides the usual header, menu and footer) except for “temporary test.”

Step Two: Open the page in a browser, view source, select all, copy, and paste into your text/code editor.

I use Chrome. I went to the “temporary test” page I just made, right-clicked on the center of the page and choose View Page Source. I selected all and copied. I then opened Text Edit, the bare bones text editor on Macs. I created a new document. When the empty document opened, I went to the Format menu and picked Make Plain Text. Finally I pasted in the content from the webpage.

Step Three: Carve out a chunk of content on that page and replace it with {{SPINITRON_CONTENT}}

I searched the page for “temporary”. It turned out to be the only instance of the word on the page and test was right after it. I deleted only that one line from everything I copied. I don’t know if this will work for everyone but it worked for me. I pasted {{SPINITRON_CONTENT}} to take its place.

Step Four: Delete the parts of the page that you don’t want on the pages with Spinitron content.

I didn’t delete anything else. There’s probably some (a lot?) that I could’ve. I decided to play it safe and see what happens.

Step Five: Save your work, select all, copy, and paste into the Custom Layout input in Spinitron’s Web Customization admin page.

I then viewed my work. At that point, I had gotten to the place where Bruce left off the previous year. I kept on reading the directions and working my way the problems.

Fine Tuning

For one, I needed to use the base tag that Tom describes in the second post of the directions I referred to above. At first, I was going to try to change all the relative URLs on the page, but I wasn’t able to find all of them. I went with the one-line page-wide …

<base href="https://www.lccommunityradio.org">

Adding that instantly solved a lot of problems.

Still the text looked too small and some of the colors didn’t match our website. My initial solution was to go and copy ALL the CSS from our website and pasted it into the Stylesheet box. That turned out to be a mistake. I learned I needed to find only the CSS that would fix the specific problems I was seeing. It took a lot of trial and error to get it to look right. It looks pretty good now, though I still have a couple of improvements I’d like to make.


It’s not perfect yet.

We’re subscribed to the two-week archive and there’s a Spinitron bug where the speaker icon that shows audio is available is not showing up.

Also, on phones, it shows the Spinitron page as the desktop version instead of the mobile design the rest of the site shows. Not sure if there’s a way to fix that.

However, I showed it to some of the other volunteers at a meeting today and they liked it. They thought I should incorporate it into the site despite the flaws. So that’s what I did.

Our website is here and click on the Schedule tab to see the Spinitron calendar page integrated.

Hope this helps someone else making a similar journey.

1 Like

Thanks for writing this up.

To get started with custom layout you have to become comfortable with an illusionist’s trick that most people find disorienting at first. It was like that with me when I developed the trick and whenever tried to explain it to others, including to our then developer who was really advanced expert in web technologies and knew our software well. The trick is literally designed to spoof your web visitors into seeing one thing and believing it is another. (I’m not 100% comfortable with this but I can talk myself into believing that it is ethically justified.)

Because of this difficulty, we offer free one-to-one support meetings to get anyone started. And I’ll do what I can to support y’all to the finish line too. Spinitron does not provide commercial web development services. We’re happy to work with your station staff, volunteers, employees, and contractors. This support is included in the base Spinitron service. Our goal is to get whoever it is trained up to the level that they can do whatever your web dev job is and maintain it going forwards. Within reasonable limits, of course — after all there’s only me that can really offer the support at this point, afaik.

That you made it this far without the zoom sessions means: hat tip to @Dean_Mattson :tophat:

Now, to your list of flaws…

That’s a bug in Spinitron itself that we are working on. I have a possible fix under review at present.

I see what you mean. We may need to deal with CORS. To that end, do you have your CNAME working yet?

No. Going to start investigating that today.

1 Like

It’s not required one way or another. It’s just I need to know for testing.