Stackoverflow Profile embedding

If you want to change the code based on your need then you can download the repo which include the js file and html with it.

---

Step 1

Get your Profile ID and remember your's as we are going to use it in the last step.

for example: My user profile ID is 13202252

---

Step 2

Import this Css file in your head tag for styling the profile div

<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />

This css file is taken from another repository which is used to embed github contribution graph on your website. Here is the link to that repository:

Github Calender Embed

---

Step 3

Copy this html code and paste it in your html page where you want to show your profile.

<div>
  <h5>Stack overflow Profile</h5>
  <div style="border: 1px solid #DDDDDD;">
    <div class="contrib-column table-column">
      <span class="text-muted head">Reputation</span>
      <span class="contrib-number" id="repu"></span>
    </div>
    <div id="stack">
    </div>
  </div>
</div>

---

Step 4

Add these script tags at the bottom of your page and replace the value of the variable user_id with your profile ID.

<!-- profile ID mentioned in step 1 -->
<script>
  user_id = "13202252";
</script>

<!-- CDN Script tag -->
<script src="https://drive.google.com/uc?id=1y6wwiuaWu-EDbH_x6z616LkkWTA1_LN1"></script>
<!-- CDN Script tag -->

---

This project is created with the help of free stackoverflow user-profile api. So you can call limited number of times through this API per day.

So it will be really great if you can integrate it in final stage but not in development stage of your project.