I’m working with WOWD (https://takomaradio.org) to improve their current Spinitron integration. We’re using Spinitron hosted IFrames to show recently played songs. WOWD has a limited tech staff so we like the simplicity of the iFrame integration vs other options, but there is one question we had.
The new layout we’re working on will show recently played songs and also upcoming shows near the top of the page in small iFrames. You can see it at: https://takomaradio.org/home-v2
The IFrames work great as expected, but the only issue is that any clickable links open up inside of the small iFrames themselves. Is there an option we can pass into a spinitron iFrame URL to change the target="" attribute on links in the iFrame? If we could use target="_parent" or target="_blank" it would work great for us since the links would break out of the tiny IFrames.
Also, we can just disable the links using CSS, but wondered if there was anyway we could keep them active and make them usable (not open in the small iFrame) after they’re clicked.
The trick with target attribute doesn’t work all that well. It solves one problem (opening a new page in the small box) but creates others. The visitor ends up on a Spinitron page that doesn’t have any navigation back to takomaradio.org and doesn’t look like your other pages.
Judging from your site, I think you could use the JS widget versions of “recently played” and “upcoming shows” and a custom layout. The links will open in the visitor’s current browser tab but they will be dressed up to look like your pages and have the same navigation that your page layout has.
It has “recently played” and “upcoming shows” like your new page. They have links to playlists, shows and DJs that open as normal pages in the current tab. Those pages have links to other Spinitron content in the body and links back to www.testradio.org in the layout.
The same can be done for takomaradio.org. If you want to try it and see what you think, we’re here to help.
Thanks for your help Tom and I hadn’t thought about the problem where even if links to break out of the IFrame, they would still be at the stripped down Spinitron pages without nav or anything else.
I’m trying to steer a little clear of the JS widget if we can just due to keeping our integration very simple and maintainable for the station. I had seen the Custom Layout option in the Spinitron settings and read through the other post you have on it. Quick question, I assume there’s no reason we can’t use a custom layout and still bring it in through an iFrame right? I think if I can run a little bit of JS on the page I’m bringing in through the iFrame I can accomplish what I’m after.
If I can’t then I’ll likely just go the exact route you recommended.
We call it the JS widget only because it uses JS to load the content into the page. It doesn’t mean you have to do anything with JS. It’s easier to live with in a number of ways than iframe.
If you use custom layout and iframes then you’ve got the navigation problem again. The iframe is its own separate browsing environment. It gets complicated and ultimately isn’t what users are used to. JS widget avoids those issues altogether because the Spinitron widget is actually part of the main page.