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

About

se-flair produces combined-account flair in the form of a short HTML document suitable for iframe-embedding that 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.

se-flair.appspot.com

See http://se-flair.appspot.com/ for more complete instructions. Short version:

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

Note that your association-id is a 36-character-long string (32 hex digits and 4 hyphens).

Compatibility

See se-flair.appspot.com 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.

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 (directly fetching API URLs), running on Google App Engine.

link|improve this question
For my flair, I get a page that says "internal server error". – George Edison Feb 25 '11 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 Feb 25 '11 at 5:33
@Isaac: Thanks... it's working now for mine if that helps. – George Edison Feb 25 '11 at 5:39
For my flair (redirected version), I also get a Internal Server Error Page. Please fix it. – chanchal1987 Mar 2 '11 at 14:26
For me George Edison's flair is working fine. – chanchal1987 Mar 2 '11 at 14:40
@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 Mar 2 '11 at 17:04
@Isaac Thanks.... It's working now – chanchal1987 Mar 2 '11 at 17:14
may I know how u implement getting Area 51 reputation – umar Apr 5 '11 at 12:33
@umar: regex parsing/scraping of the profile page – Isaac Apr 5 '11 at 12:36
thx - I got it this way: area51.stackexchange.com/users/flair/"user_id".json – umar Apr 5 '11 at 14:35
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 Apr 5 '11 at 16:56
I'm getting 'internal server error' when trying to view my flair – Giorgi Feb 29 at 7:32
@Giorgi: It should be fixed now. – Isaac Mar 2 at 4:44
feedback

2 Answers

up vote 1 down vote accepted

Experimental Features/Changes

• Image Output

http://se-flair.appspot.com/png/[association-id]/ will produce a PNG of the flair. Samples (direct from se-flair.appspot.com, not screenshots):

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

Complete image output is currently cached for up to one hour.


• 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.


Revision History

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.

2011-02-28: In the case described above, 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 above, 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-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-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-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-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-13: Added experimental image output.

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-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-20: Fixed internal server error in case where StackAuth 1.1 API call reports an account with no site_name.

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-28: Fixed issue with incorrect rounding in display of total rep in some instances.

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-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-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-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).

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.

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.

link|improve this answer
feedback

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

link|improve this answer
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 Mar 6 '11 at 5:59
feedback

You must log in to answer this question.

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