Home

What is StackTack?

StackTack is a widget for bloggers and writers to easily tack questions and answers from the StackExchange sites such as StackOverflow, ServerFault and SuperUser, into their articles. The widget remains up to date as answers get added, modified, voted on and accepted.

See a live demo.

StackTack

Installation

First, add a reference to JQuery 1.2.3 or later in your HTML <head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Next, add a reference to StackTack.

<script type="text/javascript" src="http://app.stacktack.com/jquery.stacktack.min.js"></script>

Finally, add the following script.

<script type="text/javascript"> 
    $(document).ready(function() {
        $(document).stacktack();
    });
</script>

You're done! All together, this looks like:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://app.stacktack.com/jquery.stacktack.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function() {
            $(document).stacktack();
        });
    </script>
</head>

NOTE: You can host the source code on your web server if you really want to, but linking to it from the StackTack CDN will load much faster, save server bandwidth and always keep the widget up to date.

Usage

Implementing a StackTack widget couldn't be simpler.

<div id="stacktack-ID"></div>

Just replace ID with a question ID from StackOverflow.

<div id="stacktack-1227286"></div>

Customization

The widget is also highly customizable, with plenty of options to change the appearance, target site and filter which answers are displayed.

Global Options

Global options can be set when the StackTack plugin is first initialized using an options object.

$(document).stacktack( {width: '900px', onlyShowAcceptedAnswer: true} );

site - 'stackoverflow.com' by default. The address where the API is hosted, only the name and .com extension are necessary. Change this if you want to use ServerFault or SuperUser.

apiVersion - '1.0' by default. Which version of the API to support.

stylesheet - 'http://app.stacktack.com/stacktack.min.css' by default. Point this at any stylesheet you like to control the appearance of your StackTack widgets.

onlyShowAcceptedAnswer - false by default. The accepted answer to the question is the only answer that will be displayed. If the question has no accepted answer then no answers are displayed at all.

answerLimit - Display all by default. The number of answers to display on each widget.

width - None by default. The width to make all the widgets. Any unit supported by CSS can be used such as px, em and % (percent).

Per-Question Options

Per-question options are applied using special HTML classes on the widget <div> tag. Multiple options can be set by separating the class names with a space. The class names are not case-sensitive.

<div id="stacktack-518021" class="width-600px filterAnswers-518038-518053"></div>

width-VALUE - Replace VALUE with a number and any unit type CSS supports. The % symbol is not valid in class names, use the word percent instead.

<div id="stacktack-518021" class="width-50percent"></div>

onlyShowAcceptedAnswer-VALUE - Replace VALUE with true or false depending on whether you only want the accepted answer displayed for this specific widget.

<div id="stacktack-518021" class="onlyShowAcceptedAnswer-true"></div>

answerLimit-VALUE - Replace VALUE with a number. By default all answers are displayed.

<div id="stacktack-518021" class="answerLimit-3"></div>

filterAnswers-ANSWERID - Replace ANSWERID with the ID of any answer belonging to the question. A list of multiple -ANSWERID can be added to only show the particular answers you want.

<div id="stacktack-518021" class="filterAnswers-123456-789123-243455"></div>

License

BSD

Updated

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.