Skip to content

Instantly share code, notes, and snippets.

@timetocode

timetocode/twitch-widget.html

Created September 25, 2014 01:25
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timetocode/dcfa0ecebf79a1548138 to your computer and use it in GitHub Desktop.
Save timetocode/dcfa0ecebf79a1548138 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Widget, displays if a twitch.tv user is currently streaming.
Raw
twitch-widget.html
<!-- jQuery, delete this line if you already have jQuery on your page -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the twitch widget, place code in the <HEAD> -->
<script>
var twitchUserName = 'timetocode' // your name goes here
$(document).ready(function() {
$.getJSON("https://api.twitch.tv/kraken/streams/"+twitchUserName+"?callback=?",function(streamData) {
console.log('Stream Data:', streamData) // debug message, shows all available data
if(streamData && streamData.stream) {
// displayed if online
$('#streamWidget').html("<b class='online'>*ONLINE*</b> twitch.tv: <a href='http://www.twitch.tv/"+twitchUserName+"'>"+ streamData.stream.channel.status+"</a>")
} else {
// displayed if offline
$('#streamWidget').html("<b class='offline'>*OFFLINE*</b> <a href='http://www.twitch.tv/"+twitchUserName+"'>http://www.twitch.tv/"+twitchUserName+"</a>")
}
})
})
</script>
<!-- Place this div wherever you'd like the widget to appear on your page <BODY>.
You can change "querying twitch" to say whatever you want to be displayed
prior to the twitch.tv api's reply, which should be pretty quick.
-->
<div id='streamWidget'>querying twitch</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment