Twitch client ID is bad

[jasonkeene]

@svinkle The stream badges for Twitch no longer work. This is because the client_id that is hard coded into the source is no longer valid:

https://github.com/gerberface/streambadge/blob/348e02d3f89c94d384427c018fe57d8b6eab9673/app/image-badge/index.php#L22

When I hit Twitch's API with your client_id this is what I get back:

{"error":"Bad Request","message":"No client id specified","status":400}

When I hit Twitch's API with a valid client_id I get back the proper JSON response.

This has probably been the case for a while now. Twitch only recently required client_id for all requests. If you can generate a new client_id and update the site I would much appreciate it!

[svinkle]

@jasonkeene, unfortunately I no longer maintain this project or have access to the servers to make any changes. The only person I know of with access is @gerberface.

Until this is resolved I would recommend commenting out the code for your badge in order to not serve a broken image.

[lantredugeek]

Hi @svinkle,

I know, you're not maintaining this project anymore, but it seems that the iFrame is working.

Example; <iframe src="http://streambadge.com/twitch/lessportifsduclavier/" style="border:none;height:4em;width:100%"></iframe>

Do you know of any way to inject something in the style that would redirect users clicking on the iframe to another URL than the actual stream? I've been trying tons of methods without any luck. You might be able to help.

Thanks, Jonathan

[svinkle]

hey @lantredugeek,

I've worked out a solution for you. I setup a new <a> element to send the user wherever you'd like, styled overtop of the <iframe>. Change the href and text within the link to whatever makes sense for your situation.

Let me know if this works:

HTML:

<div class="streambadge-redirector">
    <a href="https://twitch.tv/" class="streambadge-redirector__link">
        <span class="visuallyhidden">Twitch.tv</span>
    </a>
    <iframe src="http://streambadge.com/twitch/lessportifsduclavier/" style="border:none;height:4em;width:100%" class="streambadge-redirector__iframe" tabindex="-1" aria-hidden="true"></iframe>
</div>

CSS:

.streambadge-redirector {
    position: relative;
}

.streambadge-redirector__link,
.streambadge-redirector__iframe {
    left: 0;
    height: 4em;
    position: absolute;
    top: 0;
    width: 100%;
}

.streambadge-redirector__link {
    background-color: transparent;
    display: block;
    z-index: 3;
}

.streambadge-redirector__iframe {
    border: 0;
    z-index: 2;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

[lantredugeek]

WOW @svinkle! That worked like a charm! :D

Thanks a lot! You saved my life <3