How do I add my Stack Overflow reputation as a live badge on GitHub?

Question

I am trying to add my Stack Overflow reputation as a live badge on my GitHub profile README.

First, I would need to somehow get my account information from Stack Overflow using some API. Next, I would need to extract the reputation and then pass it to another API which creates badges in Markdown.

Now, I have done some research and it seems like I am able to use the Stack Exchange API to attain my Stack Overflow account information in JSON format via an endpoint URL. Furthermore, Shield.io's API will allow me to create badges from an endpoint URL which is perfect. However, Shields.io requires the endpoint to be in a specific JSON format.

So now to solve the puzzle, I need a third API which would be able to read and parse the JSON from the Stack Exchange API and then host an endpoint URL in the JSON format needed. RunKit's API seems to be able to do just that.

An example of what I am trying to achieve (but instead of commits it is my Stack Overflow reputation):

Answer 1

Another easy solution is to use the flair feature that's built into Stack Exchange:

1. Edit your profile

2. Click on "Flair" in the sidebar:

   

3. Copy the HTML shown on that page and paste it into your README.md

By default, flair images look like this:

There are options on the flair page for changing the theme as well as showing data from just one site (e.g. Stack Overflow) or including reputation from all Stack Exchange sites where you have over 200 points.

Answer 2

To get StackOverflow reputation as a live badge, just replace my user user id and name with yours!!

<a href="https://stackoverflow.com/users/10249156/wasitshafi" target="_blank">
<img alt="StackOverflow"
src="https://stackoverflow-badge.vercel.app/?userID=10249156" />
</a>

Result