Skip to content

Instantly share code, notes, and snippets.

@akosnikhazy
Created October 9, 2019 06:57
Show Gist options
  • Save akosnikhazy/c8636d58f44a1505e096d315738b346c to your computer and use it in GitHub Desktop.
Save akosnikhazy/c8636d58f44a1505e096d315738b346c to your computer and use it in GitHub Desktop.
A small widget that shows up only when someone is live on Twitch, using Twitch's Helix API
<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.twitch.tv/helix/streams?user_id=THE USER ID HERE');
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Authorization: Bearer YOUR SECRET HERE',
'Client-ID: YOUR APP CLIENT ID HERE'
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$streamdata = json_decode (
curl_exec($ch)
,true
);
curl_close($ch);
if(!empty($streamdata['data'])){
?>
<div id="twitchstreamwidget">
<!-- Twitch Stream Widget created by Ákos Nikházy -->
<div id="twitchstreamclose">X</div>
<iframe src="https://player.twitch.tv/?channel=YOUR CHANNEL NAME" frameborder="0" allowfullscreen="true" scrolling="no" width="400" height="300"></iframe>
<div id="twitchwidgetplaying">Stream Title: <?php echo $streamdata['data'][0]['title']; ?></div>
</div>
<style>
#twitchstreamwidget,#twitchstreamwidget iframe{
width:400px;
}
#twitchstreamwidget iframe{
height:210px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border-bottom:1px solid #777;
}
#twitchstreamwidget{
background:#2f2f37;
height:250px;
position: fixed;
left:5px;
bottom:5px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
#twitchstreamclose{
background:#fefefe;
text-align:center;
-webkit-border-radius: 1000px 1000px 1000px 1000px;
border-radius: 1000px 1000px 1000px 1000px;
padding:0;
margin:0;
font-weight:bold;
border:1px solid #333;
width:22px;
height:22px;
font-size:11px;
position:absolute;
right:-10px;
top:-10px;
cursor:pointer
}
#twitchstreamclose:hover{
background:#ff7777;
}
#twitchwidgetplaying{
padding-top:1px;
padding-left:10px;
font-size:0.7em;
color:#efefef;
}
#twitchwidgetplaying::after {
content: " [ • Live]";
color:#ff2222;
font-weight:bold;
}
</style>
<script>
var twitchStreamWidget= document.getElementById('twitchstreamwidget');
var twitchWidgetClose = document.getElementById('twitchstreamclose');
twitchWidgetClose.addEventListener("click", deleteTwitchWidget);
function deleteTwitchWidget()
{
twitchStreamWidget.parentNode.removeChild(twitchStreamWidget);
}
</script>
<?php
}
?>
@akosnikhazy
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment