XenForo Steam Store Info BB Code Media Site

October 28, 2016 - Reading time: 10 minutes

Original Code by https://github.com/Royalgamer06

Modified Code for XenForo by surVfate (me)

Demo: https://jsfiddle.net/2m55ubay/ (Font will auto adapt into your XenForo Theme Font)
Put the below into Embed HTML:

<div id="steamcontent_{$id}"><iframe data-s9e-mediaembed="steamstore" allowfullscreen="" scrolling="no" src="//store.steampowered.com/widget/{$id}" style="border:0;height:190px;max-width:900px;width:100%"></iframe></div>
<script type="text/javascript">
function displaySteamInfo() {
    var appid = {$id};
    var default_css = 'background-color:#1B2838;padding:30px;color:#acb3b9';
    var title_css = 'color:#ffffff;font-family:impact;font-size:36px';
    var section_css = 'color:#67c1f5;font-family:impact;font-size:24px';
    var json_url = 'https://query.yahooapis.com/v1/public/yql?q=select+*+from+json+where+url%3D%22http%3A%2F%2Fstore.steampowered.com%2Fapi%2Fappdetails%3Fappids%3D' + appid + '%22&format=json';    

    var xhr = new XMLHttpRequest();
    //xhr.responseType = 'json';
    xhr.onload = function() {
        if (xhr.status == 200) {
            processSteamInfo(JSON.parse(xhr.response));
        }
    };
    xhr.open('get', json_url, true);
    xhr.send();

    function processSteamInfo(data) {
        var result;
        for (var key in data.query.results) {
            if(data.query.results.hasOwnProperty(key)) {
                result = data.query.results[key].data;
                break;
            }
        }
        if (result === undefined) {
            document.getElementById('steamcontent_' + appid).innerHTML = 'Not a valid Steam AppID!';
        } else {
            var store_url = '="http://store.steampowered.com/app/' + appid + '"';
            var steamcontent = '<div style="float: right;"><a href' + store_url + '><' + 'img src="' + result.header_image + '" style="margin-bottom: 20px; margin-top: 10px;"></a>';
            try {
                steamcontent += '<br><video width="460" poster="' + result.movies[0].thumbnail + '" preload="none" controls>';
                steamcontent += '<source src="' + result.movies[0].webm.max + '" type="video/webm"></video>';
            } catch(e) {
                try {
                    steamcontent += '<br><video width="460" poster="' + result.movies.thumbnail + '" preload="none" controls>';
                    steamcontent += '<source src="' + result.movies.webm.max + '" type="video/webm"></video>';
                } catch(err) {}
            } 
            steamcontent += '</div><span style="' + title_css + '">'  + result.name.toUpperCase() + '</span>';
            steamcontent += '<br><br><span style="' + section_css + '">DETAILS</span>';
            steamcontent += '<br><b>AppID: </b>' + appid;
            steamcontent += '<br><b>Title: </b> ' + result.name + '<br><b>Genre(s): </b> ';

            if (result.genres.length === undefined) {
                steamcontent += result.genres.description;
            }
            else {
                steamcontent += result.genres[0].description;
                for (var i = 1; i < result.genres.length; i++)
                    steamcontent += ', ' + result.genres[i].description;    
            }

            steamcontent += '<br><b>Developer: </b>' + result.developers;
            steamcontent += '<br><b>Publisher: </b>' + result.publishers;
            steamcontent += '<br><b>Release Date: </b>' + result.release_date.date;

            steamcontent += '<br><b>Language(s): </b><ul style="list-style-image: url(http://store.akamai.steamstatic.com/public/images/v6/ico/ico_bluecheck.png)">';
            var notice = result.supported_languages.toString().split('<br>')[1];
            var langs = result.supported_languages.toString().replace(notice,'').split(',');
            for (var i = 0; i < langs.length; i++) {
                steamcontent += '<li>' + langs[i] + '</li>';
            }
            steamcontent += '</ul>';
            if (notice !== undefined) {
                steamcontent += notice + '<br>';
            }

            steamcontent += '<br><span style="' + section_css + '">FEATURES</span><ul>';
            for (var i = 0; i < result.categories.length; i++) {
                var cat_desc = result.categories[i].description;
                if (cat_desc == "Single-player") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/SlpQaWP.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Multi-player") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Cross-Platform Multiplayer") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "MMO") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/J9qtjoQ.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Co-op") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/qbb9guy.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Local Co-op") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/qbb9guy.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Steam Achievements") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/nIUVeQw.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Steam Leaderboards") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/mdvJtUD.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Steam Cloud") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/h7Xx9EQ.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Stats") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/35onv4H.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Includes level editor") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/JLpw8zj.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Partial Controller Support") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/IVCZU3n.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Full controller support") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/jNt4NNj.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Captions available") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/vzxAPmF.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Steam Trading Cards") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/2V551sC.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Steam Workshop") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/202HgdU.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Early Access") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/t2NJMOX.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "VR Support") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/9Fi7Hos.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Commentary available") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/TjsIJAH.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Commentary available") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/TjsIJAH.png)">' + cat_desc + '</li>';
                } else if (cat_desc == "Includes Source SDK") {
                    steamcontent += '<li style="list-style-image: url(http://i.imgur.com/alL8qQr.png)">' + cat_desc + '</li>';
                } else {
                    steamcontent += '<li>' + cat_desc + '</li>';
                }
            }
            if (result.platforms.windows == "true") {
                steamcontent += '<br><li style="list-style-image: url(http://i.imgur.com/5e9unSL.png)">Windows support</li>';
            }
            if (result.platforms.mac == "true") {
                steamcontent += '<li style="list-style-image: url(http://i.imgur.com/d9DJ8ds.png)">Mac support</li>';
            }
            if (result.platforms.linux == "true") {
                steamcontent += '<li style="list-style-image: url(http://i.imgur.com/pv2olAh.png)">SteamOS/Linux support</li>';
            }

            steamcontent += '</ul><br><span style="' + section_css + '">ABOUT THE GAME</span><br>' + result.about_the_game;
            steamcontent += '<br><br><span style="' + section_css + '">SYSTEM REQUIREMENTS</span><br>';
            if (result.pc_requirements.minimum !== undefined) {
                steamcontent += result.pc_requirements.minimum;
            }
            if (result.pc_requirements.recommended !== undefined) {
                steamcontent += result.pc_requirements.recommended;
            }
            steamcontent += '<br><span style="' + section_css + '">SUPPORT THE GAME</span><br>';
            steamcontent += '<iframe src="http://store.steampowered.com/widget/' + appid + '/" frameborder="0" width="646" height="190"></iframe>';

            var isMobile = window.matchMedia("only screen and (max-width: 760px)");
            if (!isMobile.matches) {
                var content_elem = document.getElementById('steamcontent_' + appid);
                content_elem.style = default_css;
                content_elem.innerHTML = steamcontent;
            }
        }
    }
};

$(document).ready(displaySteamInfo());
$(document).ajaxComplete(displaySteamInfo());
</script>