Giter VIP home page Giter VIP logo

steam-miniprofile's Introduction

A little tool to feature Steam's miniprofile on your website

This is a tool that loads your miniprofile(with animated background and frame) as a HTML entity so that you can feature it on your website.

Preview:
Preview GIF

Guide

  1. Get your Steam's ID, you can use any of these IDs from SteamDB or google how to find it yourself. image

  2. Replace YOUR_ACCOUNTID_HERE with the ID acquired from step 1

 https://gamer2810.github.io/steam-miniprofile/?accountId=YOUR_ACCOUNTID_HERE

Internationalization / Change Language

Add query parameter lang in your URL. Example: https://gamer2810.github.io/steam-miniprofile/?lang=schinese

Available languages: bulgarian,danish,english,french,greek,italian,koreana,polish,brazilian,russian,latam,swedish,tchinese,ukrainian,czech,dutch,finnish,german,hungarian,japanese,norwegian,portuguese,romanian,schinese,spanish,thai,turkish,vietnamese

Examples:

To add this to your site

  1. You can load it into any div with JQuery or Javascript. Jquery's Load() guide.
  2. You can also load it as an iframe

    <iframe src="https://gamer2810.github.io/steam-miniprofile/?accountId=YOUR_ACCOUNTID_HERE" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>

  • Once it's loaded, you can mod it however you like using CSS.
  • A working example can be found at My site.

How it works

sequenceDiagram
    User->>+gamer2810.github.io: Get Steam Miniprofile
    loop Every 5 minutes
        Note right of Pipedream: Glitch shutdowns the CORS Server<br>every 5 minutes, so we schedule a request<br> every 5 mins to wake it up, ensuring response time
        Pipedream->>CORS Server: Wake up
    end
    gamer2810.github.io->>-User: Return loading miniprofile
    Note right of User: Wait for real profile to load
    gamer2810.github.io->>+CORS Server: Get real profile HTML
    Note right of CORS Server: https://glitch.com/~steam-miniprofile-cors
    CORS Server->>+Steam: Get real profile HTML
    Steam->>-CORS Server: Requested HTML
    CORS Server->>-gamer2810.github.io:Profile HTML with CORS headers
    gamer2810.github.io-->User: Replace loading miniprofile with real HTML

Note

  • This works by calling Steam's API and render the response with Steam's CSS. This site is not affiliated with Steam or Valve.
  • Your profile will need to be public for this to work.
  • It will track your public status (Online, Offline), but it wont track your friend-only status (Away, Snooze,...).
  • If your AccountID is invalid, it will instead load MY (as in the one writing this) miniprofile :).
  • You might have to disable caching of the iframe on your web, or changes on Steam won't be reflected immediately.

Contact

  1. If you decide to use this tool, I'd love to see you show it off in Discussion.
  2. If the tool does not work, please open an Issue and I will take a look.

Have a good day and Please feed me a star if you are feeling generous. I'm humgry

steam-miniprofile's People

Contributors

1653032 avatar gamer2810 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

steam-miniprofile's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.