41

Screenshots

Screenshots of some samples:

My flair Jeff Atwood Jon Skeet

Tooltip with total reputation:

Total reputation points tooltip

Tooltip with specific-site reputation:

Single-site rep tooltip

Live PNG Samples:

My PNG flair Jeff Atwood's PNG flair Jon Skeet's flair

About

se-flair produces combined-account flair in the form of a short HTML document suitable for iframe-embedding, a javascript file for embedding, or a PNG image. The flair fits with the look of the standard flair on Stack Exchange sites. Using HTML allows for links to multiple specific-site profiles and tooltips showing total rep and specific-site rep. Totals are calculated across all linked accounts (as opposed to the standard combined Stack Exchange flair, which only uses sites where the user has at least 200 rep).

Display name and gravatar are taken from the highest-rep associated account. The specific sites shown and linked are in descending-rep order. The number of sites shown and linked can be chosen from 1-8 (with a default of 7, since the 8th just barely doesn't fit).

Data is cached for up to 8 hours. Complete PNG image output is cached for up to 1 hour.

se-flair.2718.us

See https://se-flair.2718.us/ for more complete instructions. Short version:

  • https://se-flair.2718.us/[account-id].html produces an HTML document suitable for iframe-embedding
  • https://se-flair.2718.us/[account-id].js produces JavaScript code that inserts the stylesheet link into the document head and writes the flair div into the document
  • https://se-flair.2718.us/[account-id].png produces a PNG image of the flair

Note that your account-id is the numeric ID in the URL for your profile on the main stackexchange.com website.

Compatibility

See se-flair.2718.us for instructions on how to embed the flair. Embedding both by iframe and by JavaScript works in current versions of Chrome, Firefox, Safari, and Internet Explorer. In at least some versions of Internet Explorer, the favicons for the sites do not render well and the bounds for the suggested iframe are not quite right, though the JavaScript embedding method works fine other than the favicons. PNG images do not use transparency, so they should render just fine in any browser that supports PNG images.

Updates

See Experimental Features/Changes and Revision History answer.

Contact

Comment here or email ilg at the domain in the website in my profile.

Code

Written in Python with Serverless, running on AWS Lambda with Amazon CloudFront providing caching.

36
  • 2
    For my flair, I get a page that says "internal server error". Commented Feb 25, 2011 at 1:04
  • @George: Something funky and transient seems to be going on with Google App Engine—I initially got an internal server error for your flair, too, but just 2 minutes later it worked fine, and it consistently works fine on the local development platform. (I'm also seeing other strangeness from App Engine on the administrative side, which makes me think it's plausible that it's a GAE issue, but I'll keep looking to see if I can make sense of the error logs.)
    – Isaac
    Commented Feb 25, 2011 at 5:33
  • @Isaac: Thanks... it's working now for mine if that helps. Commented Feb 25, 2011 at 5:39
  • 2
    For my flair (redirected version), I also get a Internal Server Error Page. Please fix it. Commented Mar 2, 2011 at 14:26
  • 1
    @chanchal1987: It should be fixed for yours now. I hadn't properly covered the case where the Area 51 account is the highest-rep account.
    – Isaac
    Commented Mar 2, 2011 at 17:04
  • 1
    @umar: The only problem with doing it that way is that JSON-formatted flair is deprecated and may be removed at some point in the future.
    – Isaac
    Commented Apr 5, 2011 at 16:56
  • 1
    I'm getting an internal server error as well..
    – Joost
    Commented Oct 30, 2012 at 15:57
  • 1
    @Joost: My guess is that it's a glitch in the account-association data in some fashion, so I posted a question here asking about it: stackapps.com/q/3756/2490
    – Isaac
    Commented Nov 9, 2012 at 16:48
  • 1
    @Joost: New URL: se-flair.appspot.com/1893844
    – Isaac
    Commented Jan 7, 2013 at 6:43
  • 1
    @AméricoTavares: Yeah, mine too, from sometime yesterday. It's probably caused by some change in the Stack Exchange profile page HTML. I'll probably get to trying to fix it later today.
    – Isaac
    Commented Jun 27, 2013 at 15:57
  • 1
    @Isaac: working flawlessly now, thanks for the prompt response :)
    – brasofilo
    Commented Oct 15, 2014 at 19:11
  • 1
    Started getting 404 not found on my flair after (what seemed like) years of working well.
    – Bob Stein
    Commented Jun 27, 2019 at 15:24
  • 1
    @BobStein It's not just you. I'll look into it as soon as I can... maybe later today.
    – Isaac
    Commented Jun 27, 2019 at 15:26
  • 2
    @BobStein The HTML of the accounts tab of the Stack Exchange profile page changed and broke the scraping. It should be fixed now.
    – Isaac
    Commented Jun 29, 2019 at 5:40
  • 1
    @AritraChakraborty It seems like Google App Engine has just gotten to be fairly annoying. I'm mostly done with porting it to use the Serverless framework and it seems to be stable, so maybe give that version a try instead: se-flair.2718.us (I'm planning to update this Q&A with the new URL when it's fully done)
    – Isaac
    Commented Dec 1, 2021 at 2:06

3 Answers 3

11

Revision History

2024-06-04: Worked around issues with certain avatar image hosts not allowing embedding of the images in external HTML (affected HTML and JS, but not PNGs). Fixed some minor edge cases (e.g., user with 0 badges).

2024-01-05: Launched the AWS Lambda version at the new URL. Old (se-flair.appspot.com) URLs will 301 Moved Permanently redirect to se-flair.2718.us. URLs using the old hexadecimal string "association ID" have apparently been broken for a while, since Stack Exchange removed support for those kinds of IDs. Previous versions relied on the Google Charts API for some text rendering, which had become unreliable; that dependency has been removed.

2019-06-29: Fixed data scraping from Stack Exchange profile page.

2016-03-20: Added the ability to get PNG output at higher resolution (multiples) using @2x, etc.

2014-10-14: Fixed issues with users whose display names contained non-ASCII characters and avatars that were not of the expected size.

2014-02-01: Added file-extension style output selection (i.e., using .html, .js, or .png to select the output type) and made it the "default" way to use se-flair (in so far as it's the method described on the home page and given by the code generator—pre-existing paths are still valid). Under-the-hood templating changes.

2014-01-25: Fixed issue with oversized favicons (this may take a while to work itself fully clear of all caches, both server and local-user). Adjusted javascript embed to avoid multiple inclusions of the CSS file when multiple javascript embeds are present in a single page.

2013-06-28: Fixed issue with Gravatars being replaced by essentially-random identicons (due to HTML change on Stack Exchange profile accounts page).

2013-04-28: Minor internal changes that may result in slight performance improvements. Added guards against internal server errors in PNG image generation. For HTML and JS output, used CSS to slightly compress the text of badge counts with 4 or more digits.

2013-02-24: Fixed issue with missing display names (due to HTML change on Stack Exchange profile accounts page). Added support for non-Gravatar avatars.

2013-01-07: Enabled the use of the numeric "account id" instead of the association id, changed the examples to use account ids, and made the "get code" page generate the account id URLs. (URLs based on association ids should continue to work to whatever extent they already did—it seems they may not have worked at all for some more recent users.)

2012-05-16: Fixed issue where the total rep would be missing a zero after the comma (for example, "4,69" instead of "4,069"). Added last-modified and cache-control headers to output so that proxies and browsers can cache the results.

2012-03-24: Fixed broken SSL favicon URLs, added cache-control header to the SSL proxying of the favicons to cause browsers to cache them for 30 days.

2011-11-22: When the HTML or JavaScript flair is loaded via https, the favicons are proxied through se-flair.appspot.com so as not to break the https security (sstatic.net doesn't have a proper SSL certificate of its own).

2011-11-19: HTML and JavaScript output now use SSL-agnostic URLs (by stripping off the leading protocol, for example., removing http: to get //sstatic.net/math/img/favicon.ico) for the favicons and if https was used, switch to the https://secure.gravatar.com/ URL for the Gravatar, so using an https://se-flair.appspot.com/ URL inside an https page should not cause any insecure resource loading.

2011-09-22: Changed from many API calls to scraping the stackexchange.com profile accounts tab. Fixed the color of the rep text in the PNG output.

2011-03-31: Fixed issue with some favicons being missing or very large, possibly distorting the HTML and JavaScript output (specifically GIS, possibly others).

2011-03-28: Fixed issue with incorrect rounding in display of total rep in some instances.

2011-03-22: Fixed error with applying topn parameter (for example, top4) to image output; hid badge types with a count of 0; added facility to get copyable embedding code based on a profile page URL.

2011-03-20: Fixed internal server error in case where StackAuth 1.1 API call reports an account with no site_name.

2011-03-17: Issues with label placement and bad rendering of favicons seem to be corrected now; if badge counts are not complete at time of loading, they are not displayed (but they will be rechecked on the next load).

2011-03-16: Initiated experiment in faster loading—badge-loading is more often delayed, but overall flair loads faster, just omitting badge counts if they are unavailable.

2011-03-13: Added experimental image output.

2011-03-07: JavaScript embedding method added; all links now target _blank so as to open in a new window/tab; http://se-flair.appspot.com/[site hostname]/[site user_id]/ (or http://se-flair.appspot.com/js/[site hostname]/[site user_id]/) now displays a link to the correct URL rather than redirecting to it.

2011-03-06: Total rep is now rounded rather than truncated (as is the case in Stack-Exchange-produced flair); diamond is shown if moderator on highest-rep site and diamond and count are shown if moderator on other sites; display-name color fixed.

2011-03-05: Added a work-around for a bug where the StackAuth 1.1 API returns an invalid user_id, and some improved error-handling.

2011-03-02: Fixed "internal server error" issue for users for whom their Area 51 account is their highest-rep account. (Since there is no API access to Area 51 data, the data on the Area 51 account is generated by running some regular expressions against the HTML of the user page; previous versions neglected to pull the display name and email hash for Area 51—the display name and email hash of the highest-rep account are used for the gravatar and display name in the generated output.)

2011-02-28: In the case described below, where some badge counts are assumed to be zero because of a failed API call, a small (?) will appear to the right of and slightly above the badge counts with the title text "data may be incomplete". [superseded by 2011-03-16] (As below, the API call to get the badge counts will be tried again on the next load.) Also, requests using the 32-character hexadecimal string association id without the four hyphens are now redirected to the URL with the 36-character association id (with the four hyphens in place).

2011-02-26: The "internal server error" issue seems to have been a problem with loading badge counts. Now, in instances where there is a problem loading badge counts for a user on a particular site, it is counted as zero badges from that site to allow loading to complete. Retrieval of the badge count is retried on the next load.


Experimental Features/Changes

• Data is now scraped from the stackexchange.com profile accounts tab

Because of the really large number of API calls needed to assemble the data (and having to scrape the Area 51 profile anyway) and problems associated with it, versus the relative simplicity of scraping the accounts list on the stackexchange.com profile page, data is now grabbed that way. In most instances, this seems to result in slightly higher reputation points and badge counts for reasons that I haven't fully investigated. This also means that there is no longer a delay in loading up badge counts.

1

I was wondering how do we get our {association-id}?

1
  • One way is through se-flair: http://se-flair.appspot.com/[site hostname]/[user_id on that site]/ will find it and redirect you to http://se-flair.appspot.com/[association-id]/—for instance, for your account here, http://se-flair.appspot.com/stackapps.com/4684/ redirects to http://se-flair.appspot.com/db343971-bdd4-4dc5-997c-1adcf4ab2843/, so your association-id is db343971-bdd4-4dc5-997c-1adcf4ab2843.
    – Isaac
    Commented Mar 6, 2011 at 5:59
1

I just thought of getting a flair and I've got my association-id.

But, the real problem is: I don't see any of my flairs. Instead, I get an internal server error..! Are there any bugs associated with the flairs ?

My association-ID is 749e38d2-7c16-105a-f49e-38d2750fce12 and you could see the error displayed here.

3
  • A sidenote: I just came-by here to provide the bug-report :-)
    – user14720
    Commented Dec 16, 2012 at 11:47
  • 1
    This appears to be the same issue that I already reported for another user, so I've edited that question to add your case as well.
    – Isaac
    Commented Dec 16, 2012 at 21:00
  • 1
    The just-released revision that uses the account id instead of the association id should make se-flair work for you now.
    – Isaac
    Commented Jan 7, 2013 at 6:46

You must log in to answer this question.

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