Embed Stream on Website

Hi jklarich. I see the stream is already attached to a link on your Listen page. Are you wanting to turn the link into a button?

I am experimenting with different ways to display. I would like a button in the primary widget area (left widget area) that is a button that they can click on and then the stream becomes available. Just looking for options.

Here’s one way:
1. Add a Text widget to the sidebar

2. Add this code in the widget:

<span class="btn"><a href="https://player.streamguys.com/kdna/sgplayer/player.php">Play Me!</a></span>

3. Add this CSS using a child theme or or a plugin like https://www.ads-software.com/plugins/simple-css/ or https://www.ads-software.com/plugins/custom-css-js/:

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn a {
  color: #fff;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

There are a number of online sites you can use to generate the button code. I used this one: https://css3buttongenerator.com/

That worked great! Is there a way for it to just start playing without having to go to the other site?

Probably. You’d have to embed the station stream URL in your site. Found this plugin but not sure if it will work: https://www.ads-software.com/plugins/radio-forge/screenshots/

And when I tried to load the stream URL (at least the one from the station web site) I got a 404 Not Found: https://www.kdna.org/listen/

Another option you could try is replacing the code in your text widget with this:

<iframe src="https://tunein.com/embed/player/s32336/" style="width:100%;height:100px;" scrolling="no" frameborder="no"></iframe>

I generated that from this site: https://tunein.com/

Here are a couple of other references; haven’t read through them so not sure how relevant they are:
https://tech.techcollections.info/2011/04/addembed-online-internet-radio-player.html
https://clients.websavers.ca/whmcs/knowledgebase/93/How-do-I-put-my-stream-on-my-website-so-my-visitors-can-tune-in.html

Hi bdbrown,

Just to learn…
Why did you add a +white button color to the original code

.btn a {
color: #fff;
}

thx,
kerdezo

@kerdezo – Because the default theme CSS sets the widget anchor tag to grey:

.widget a {
    color: #777;
}

which is hard to see against a blue background.

Thanks bdbrown for the explanation!
Have a nice day!

This worked, but I didn’t get it to automatically stream. Will work on that.