I realize that this is pretty niche, and that pretty much the only users would be The Bridge, the primary chat room for Arqade, but it should be pretty straight forward to include the name of the game and a bit of the description in a onebox.

The issue is that if a bare link is posted, there is absolutely no way to know what game is being mentioned without following the link, since the link only includes a numeric app ID.


I've made a 'plugin' to do this. It works with my Make your own custom oneboxes for Chat userscript, where there are also a few other 'plugins' (as answers over there) that you could use to add different oneboxes for different sites. You'll need to install the userscript and add this 'plugin' and it will work! :)

Complete usage and installation instructions are detailed on the linked Stack Apps post.

Here's an example:

enter image description here

I'm not completely familiar with Steam and everything you might want to know might not be on the onebox right now. But if there's anything you want added, please comment and if it's available through the API, then I'll add it for sure! :)

Here's the 'plugin' (which you'll need to copy+paste into the userscript, as mentioned on the linked Stack Apps post):

customSites['store.steampowered.com'] = function(link, $obj) { // http://store.steampowered.com/app/377840/
    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/shu8/SE-Chat-Custom-Oneboxes/a043cfaae462d918f94558e188749089ef9d97cb/steam.css">');
    var id = link.split('/')[4];
    $.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+encodeURIComponent('http://store.steampowered.com/api/appdetails?appids='+id)+"%22&format=json&diagnostics=true&callback=", function(d) {
        data = d.query.results['_'+id.slice(1)].data;  
        tags = '';
        $.each(data.categories, function() { tags += '<span class="ob-post-tag">' + $(this)[0].description + '</span>'; })
        var template = "<div class='steam-container'> \
                            <img src='"+data.header_image+"' /> \
                            <div class='title'><a href='"+link+"'>"+data.name+"</a></div> \
                            <div class='tags'>" + tags + "</div> \
                            <div class='desc'>"+data.about_the_game+"</div> \
  • 1
    That looks about right. The only thing I would suggest is increasing the title font size even more. – MBraedley Mar 30 '16 at 21:05
  • @MBraedley done! :) 15px -> 20px now. I haven't updated the screenshot though... – ᔕᖺᘎᕊ Mar 30 '16 at 21:13
  • Yeah, I noticed it's not using the correct one. Use header_image instead of the first screenshot. – MBraedley Mar 30 '16 at 21:20
  • And in the css, use 368x172 or 276x129 for the header image. – MBraedley Mar 30 '16 at 21:29
  • Also, it looks like the short blurb that's below the header image in the actual store page isn't accessible through the API, which I find a little weird. – MBraedley Mar 30 '16 at 21:31
  • @MBraedley could it be due to the confirm your age thing? Not completely sure, but yeah it seems weird! – ᔕᖺᘎᕊ Mar 31 '16 at 8:51
  • 1
    No, because I've looked at the response for a number of games, age restricted and not, and none of then have it. Seems more like an oversight than anything else. – MBraedley Mar 31 '16 at 10:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .