I have a few accounts on SE sites but I read more than I contribute, so all of them have less than < 200 reputation each which will probably grow slowly in the future. Even though that means that I can't show the combined flair, I still have an option of embedding individual flairs with smaller reputation by using a direct image URL.

My problem is that if, say, I want 5 different flair images (this is the approximate number I want), I have to go to five different sites to get them. My question is whether it has been considered providing a centralized flair page that will allow me to get all the image codes for all of the flairs that I want in one place?


The following Stack Snippet does that for you.

If you enter your accountid (found in the url of your network profile) the snippet will call the Stack API /users/{ids}/associated which returns the site_url and your userid for each site you have joined. With that information it is easy to generate the img url [site_url]/users/flair/[user_id].png. The rest of the code generates some DOM elements and add those to the DOM so you can see the result.

var accountid = 521817;

function emptyNode(node) {

function generateAllSiteFlair(accountid)
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function() {
    var resp = JSON.parse(xhr.responseText);
    var flair = document.getElementById('flair');
    resp.items.forEach(function(item) {
      var img = document.createElement('img'),
      div = document.createElement('div'),
      span = document.createElement('span');

      img.src= item.site_url + "/users/flair/" + item.user_id + ".png";
      span.textContent = img.src;

  xhr.open("GET", "https://api.stackexchange.com/2.2/users/" + accountid + "/associated?pagesize=100&filter=!-rYuN4gX");

document.getElementById('go').addEventListener('click', function(val) {
#flair span {    
    float: right;
    overflow-wrap: break-word;
    width: 50%;
<label for="accountid">account id: 
<input id="accountid" type="text" value="521817" />
<button id="go">Generate</button>
<div id="flair">


You must log in to answer this question.

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