Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A widget that displays questions and answers from Stack Exchange sites on your blog or any HTML page.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 build.py
Octocat-spinner-32 demo.html
Octocat-spinner-32 juice.json
Octocat-spinner-32 stacktack.css
Octocat-spinner-32 stacktack.js
README.md

StackTack

StackTack is a tool that will fetch information about any question in the Stack Exchange network of sites and format it in a nicely-styled and functional widget.

What Has Been Changed

This fork contains a number of changes from the original code. The details of these changes are below:

  • The icons and images in the sprite were removed.
  • A build system for minifying the CSS and JS was added.
  • .stacktack() now operates on the current set of matched elements instead of searching for elements based on ID.
  • Options can be specified globally yet overridden on a per-invocation and per-element basis (including site).
  • API requests to the same site are grouped to cut down on requests.

Dependencies

  • jQuery (only if built with --disable-jquery-check)

Build Dependencies

Build Instructions

  1. Determine whether you want the CSS styles to be included in the minified JS file or whether you want to create an external minified CSS file.
  2. Run the following command:
    python build.py
    Note: add the --enable-embed-css option to the command above if you want to embed the CSS.
  3. You should now have a 'stacktack.min.js' file and (depending on the options you specified) a 'style.min.css' file in the 'out' folder.

Using StackTack

Adding StackTack to a page is relatively simple and consists of the following steps:

  1. If you did not build StackTack with the --enable-embed-css option, add the following line to the <head> section of your page:
    <link rel="stylesheet" href="style.min.css" />
  2. If you built StackTack with the --disable-jquery-check option, you will need to manually load jQuery by adding the following to the end of the <body> section of your page:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3. Add StackTack to the <body> section of your page:
    <script type="text/javascript" src="stacktack.min.js"></script>
  4. If you did not build StackTack with the --disable-jquery-check option, add the following lines directly below the one above:
    <script type="text/javascript">
    $(document).ready(function() {
        $('.stacktack').stacktack();
    });
    </script>
    This little snippet initializes all of the elements on the page with the 'stacktack' class.
  5. To insert a StackTack widget on the page, use the following template:
    <div class="stacktack" data-site="stackoverflow" data-id="1732348" ></div>
    The <div> contains a number of data-* attributes that specify the options for that particular instance. These options include:
    • answers: specifies the answers that will be displayed - this can be 'all', 'none', 'accepted', or a comma-separated list of answer IDs
    • id: the ID of the question [required]
    • question: whether or not to display the question
    • secure: whether to use HTTPS when retrieving data from the API
    • site: the site to retrieve the question from
    • tags: whether or not to display the question's tags
    • votes: whether or not to display vote score on answers
    • width: the width (in pixels) of the widget
    These options (except 'id') can also be specified in a map in the .stacktack() method in the previous step.
Something went wrong with that request. Please try again.