StackTack, a Javascript widget you can stick anywhere

Question

up vote 73 down vote favorite

27

Screenshot / Code Snippet

alt text

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

<body>
    <div id="stacktack-518021"></div>
</body>

About

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.

It works by finding HTML elements with an id similar to "stacktack-518021" where the number is a StackExchange question ID. The widgets are then generated inside these containers.

The widgets can be heavily customized, both globally and on a per-question basis. Stylesheets can be overridden to change the appearance and answers can be filtered in many different ways.

See it in action with our live demo.

Complete information and instructions are available here on the StackTack Wiki.

License

BSD - Do with it what you will, but please give Zamtools credit and please let us know what you're doing with it. We're curious to see how people use this.

Download

No download necessary. StackTack is globally hosted on Amazon S3. Simply add a reference to it in your HTML.

Platform

StackTack is intended for use on web pages, blogs and articles. Anywhere an author may want to include a StackExchange question.

Contact

Bug reports and communications can be made on the StackTack BitBucket bug tracker.

Code

StackTack is written in Javascript and JQuery and consumes the Stack API directly via AJAX requests. The source can be found at the StackTack BitBucket repository.

StackTack has also been integrated into the SAggregator created by Farseeker.

edited Jun 8 at 7:56

asked Jun 4 at 6:13

Soviut
94439

50% accept rate

7

+1 this is really slick – Dave DeLong Jun 4 at 6:21

5

++ slick is the word – code poet Jun 4 at 7:12

1

Not only is this a brilliant idea, it also looks so wonderful. Good job! – Maxim Zaslavsky Jun 4 at 8:35

+1 - Well done, very clean, as a side note, an extra j slipped into your sample code: jhttp:// :) – Nick Craver Jun 4 at 12:14

hah, thanks. Fixed. – Soviut Jun 4 at 16:23

2

Man, this is one awesome idea! – George Edison Jun 4 at 16:50

2

Very impressive. – Andy West Jun 4 at 18:02

Please let me know if anybody actually implements this on their site or blog. I'm interested to see it in the wild. Also, the S3 mirrors are still propagating so the jquery.stacktack.min.js may still pull the wrong stylesheets for another day or so. – Soviut Jun 5 at 3:20

+1, what they said – Christopher Parker Jun 5 at 18:41

Using jquery.stacktack.min.js returns an XML file with access denied, but using jquery.stacktack.js works OK. – Farseeker Jun 6 at 3:22

@Farseeker: Thanks, I just fixed this. – Ryan Duffield Jun 6 at 4:13

This is really cool! – Nippysaurus Jun 8 at 5:48

Thanks to Farseeker for integrating StackTack into his SAggregator app, I've added a link to it in the description. – Soviut Jun 8 at 7:57

2

It would be unlikly to break the 10K limit as this is all happening from the client's browser in Javascript using Ajax, not a central server. This means each request a visitor is making requests from their own IP. If one user were to refresh the page 10,000 times in a day, then they might hit the limit. – Soviut Jun 8 at 16:52

1

Answers are now explicitly requested in the ajax call as per the changes made in this ticket stackapps.com/questions/613/… The changes should propagate across S3 in roughly 24 hours. – Soviut Jun 10 at 7:02

show 18 more comments

Soviut · Answer 1 · 2010-06-25 15:22:16Z

Using More Than One Site Per Page

See Maxim Z's original question here.

The StackTack plugin doesn't need to select the entire document to work, you can feed it any selection you like.

$('div').stacktack();

The only requirement for an element to become a Tack is to have a valid StackTack ID. This affords you the ability to isolate Tacks to a certain portion of your page:

$('.my-tacks').stacktack();

You can also use multiple StackTack instances to target different APIs or specify different defaults. To target two different Stack sites on the same page, do the following:

$('.stackoverflow-tack').stacktack({site: 'stackoverflow.com'});
$('.serverfault-tack').stacktack({site: 'serverfault.com'});

<div id="stacktack-12345" class="stackoverflow-tack"></div>
<div id="stacktack-30303" class="serverfault-tack"></div>

The reason there is no class name override for the site parameter is because you can't represent a URL in a class name due to invalid characters.

C. Ross · Answer 2 · 2010-08-25 18:16:51Z

up vote 2 down vote

Any chance for this to be packaged as a WordPress plugin/widget?

answered Aug 25 at 18:16

C. Ross
1211

I'm not very familiar with Wordpress plugins, but this tutorial digwp.com/2009/06/including-jquery-in-wordpress-the-right-way shows how to import jquery and run a script, so it should be theoretically possible to do at a low level. I'll look into it. – Soviut Aug 26 at 2:22

Maxim Zaslavsky · Answer 3 · 2010-06-25 05:44:47Z

I think that we should be able to specify the API endpoint/site inside per-question options.

Currently, the site can only be specified in global options. This means that all questions have to be from one Stack Exchange site.

I think it'd be better if it would be possible to set a global site and then be able to set a per-question site that overrides the global rule. Should be an easy thing to implement and it would improve StackTack! :)

_{I added this to the issue list over at BitBucket, but I decided to post this here just in case.}

Soviut · Answer 4 · 2010-06-25 06:19:26Z

Tacks in Modal Dialogs

This is an example of how to add a Tack to a modal dialog using JQueryUI's dialog widget.

<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://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
   <script type="text/javascript" src="jquery.stacktack.min.js"></script>
   <script type="text/javascript">
       $(document).ready(function() {
           $(document).stacktack();

           $(".modal-dialog").dialog({'modal': true, 'width': 600});
       });
   </script>
</head>

<body>
    <div id="stacktack-1701543" class="modal-dialog onlyShowAcceptedAnswer-true"></div>
</body>

TWith2Sugars · Answer 5 · 2010-07-13 10:42:31Z

up vote 1 down vote

I've been asked to post my use of this app publicly so here it is: http://blog.tonywilliams.me.uk/clickonce-manifest-problem-with-net-4/

Must say it's a pretty good app that I plan on using a lot more.

answered Jul 13 at 10:42

TWith2Sugars
1113

	Thanks Tony, it looks great in context. I noticed your wordpress theme is stomping on the tag styles, I'll have that fixed soon. – Soviut Jul 13 at 16:17
	Thanks @Soviut, Look forward to it. – TWith2Sugars Jul 14 at 9:03

Soviut · Answer 6 · 2010-08-11 04:17:16Z

Experimenting with StackTack on JSBin

If you'd like to experiment with StackTack but don't want to install it on your blog or website, then check out this live editable demo on JSBin. Just hit the Preview button to see it in action.

Javascript

$(document).ready(function() {
    $(document).stacktack();
});

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" 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><meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="stacktack-1227286" class="width-50percent onlyShowAcceptedAnswer-true"></div>
</body>
</html>

StackTack, a Javascript widget you can stick anywhere

Screenshot / Code Snippet

About

License

Download

Platform

Contact

Code

6 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged app javascript jquery widget or ask your own question.

Hi there!

Get Started

Linked

StackTack, a Javascript widget you can stick anywhere

Screenshot / Code Snippet

About

License

Download

Platform

Contact

Code

6 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged app javascript jquery widget or ask your own question.

Hi there!

Get Started

Linked

Related