Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

SE Flair

Create a nicer (HD) flair using the Stack Exchange 2.2 API

  • This uses the Stack Exchange 2.2 API which is documented here. It uses the /users/{ids} section to get the following information:

  • User display name

  • User display image

  • User badge count

  • User reputation

  • Site favicon

  • It uses an API key, available from stackapps.com. If you do not use an API key, it will allow only 300 requests per UTC day (meaning your page can only be loaded 300 times).

  • Licensed under the Apache 2.0 License. See file LICENSE

Usage

Download the 3 files in Flair - flair.html, flair.css, flair.js.

Do a find-replace for SITENAME and replace with the name of the Stack Exchange site (e.g. meta for meta.stackexchange or askubuntu for askubuntu.com)

This must be done in both flair.html and flair.css.

In flair.html, line 6, the http://SITEURL.com argumemt must change to the URL of the site (e.g. http://meta.stackexchange.com or http://askubuntu.com).

Also on line 6, the USERID must be changed to the user ID of your account on the site you have chosen (not your network profile id). You can find this by visiting http://SITEURL.com/users/me, and looking for the numbers in the URL bar.

On line 17 of flair.js replace APIKEYHERE with your API key, or leave it blank.

Example is live here

Usage with 2 or more flairs on one page

Complete all steps above, however many times required.

Copy everything in the flair.html files into one - everything should be inside the body, at the level of the div with ID flair-SITENAME-in-here (line 8).

In the flair.css file, only the first 4 sections need duplicating.

In the body tag of flair.html is an onload= section. This must be amended to include the function call multiple times. For example, to have a flair on Meta Stack Exchange and Stackoverflow, use makeAPIRequest('meta', 'http://meta.stackexchange.com', '-1'); makeAPIRequest('stackoverflow', 'http://stackoverflow.com', '-1'). Follow the same pattern for more (semi-colon ; delimited).

Example is live here

Features

  • Any SE site, excluding Area 51 (as it's not part of the API).
  • Jon Skeet compatible with minimal modifications.
  • Fetches all data needed, including favicon (no offline resources needed).
  • Multiple flairs on one page.
  • Fails gracefully (simply doesn't display anything) rather than an area with missing images / data and console error reporting.
  • Latest version of the API (2.2).
  • Up to 10,000 visitors per UTC day.
  • An HD Flair - better than the 208 x 58 images provided by SE, which are not retina ready.
  • You can choose where each detail goes - make a wide, a thin, a long or a fat flair, to fit your website.
  • Supports moderator diamonds at the end of names.

Thanks to the following resources

About

Create a nicer (HD) flair using the Stack Exchange 2.2 API

Resources

License

Releases

No releases published

Packages

No packages published