264

Screenshot / Code Snippet

screenshot

<head>
    <script type="text/javascript" src="//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><!-- This does not support HTTPS, so you might get a non-SSL block on HTTPS sites! -->
    <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 Stack Exchange sites such as Stack Overflow, Server Fault and Super User, 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 Stack Exchange 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 (defunct site).

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 Stack Exchange 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.

63
  • 20
    ++ slick is the word Jun 4, 2010 at 7:12
  • 2
    Not only is this a brilliant idea, it also looks so wonderful. Good job! Jun 4, 2010 at 8:35
  • 3
    Man, this is one awesome idea! Jun 4, 2010 at 16:50
  • 3
    Very impressive.
    – Andy West
    Jun 4, 2010 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, 2010 at 3:20
  • 3
    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, 2010 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, 2010 at 7:02
  • 1
    Would it be possible to add support for, other stackexchange sites like askubuntu.com
    – myusuf3
    Oct 29, 2010 at 14:01
  • 1
    @garbagecollector, Tumblr sanitized html IDs from any html I tried to put in a text post, so I updated the plugin to allow class-based IDs as well. See it in action here: zamtools.tumblr.com/post/1463290085/stacktack
    – Soviut
    Nov 2, 2010 at 19:53
  • 1
    @Soviut it doesn't seem to work.
    – myusuf3
    Nov 2, 2010 at 20:52
  • 1
    Sorry, I did that quickly and forgot to actually use the email hash in the url. I've fixed that. Expect the CDN to update in about 24 hours.
    – Soviut
    Jul 14, 2011 at 21:48
  • 1
    Forgive me if this is a question that's been asked, but is there a way to use this with the StackExchange per-site blogs? Nov 12, 2011 at 21:30
  • 2
    The live demo doesn't work for me (current Chrome). I get JS syntax errors and it only shows "loading question XYZ".
    – magnattic
    May 14, 2014 at 11:50
  • 1
    Sorry guys, the domain expired on me when I wasn't keeping an eye on it. There are mirrors of the repo on github github.com/nathan-osman/StackTack
    – Soviut
    Apr 2, 2015 at 7:38
  • 1
    Here's my own StackTack fork (which itself is just a fork of the aforementioned fork) to make it work with Python 3.
    – OfirD
    Sep 10, 2021 at 10:01

12 Answers 12

28

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

3
19

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.

13

Posting On Tumblr

I have recently updated the StackTack plugin to allow class-based Stack IDs to be used in situations where IDs can't be added to your html. This makes it possible to post Tacks on Tumblr now because classes are not sanitized from html posts on their service.

Customize Your Theme

  • Log into Tumblr and go to your dashboard.
  • On the right, click the customize link.
  • Click the themes link
  • Enable custom HTML
  • In the HTML editor find the block of <link> tags
  • Paste the following code after those link tags
<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>

Posting

  • Start a new text post
  • Click the HTML button on the text editor
  • Create a <div> or <p> with a class that has a stacktack ID in it
<p class="stacktack-1227286"></p>

See it in action here:

http://zamtools.tumblr.com/post/1463290085/stacktack

8

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.

2
  • I can't edit your post directly so I added a new answer instead. I figure I'll add a few tutorials this way.
    – Soviut
    Jun 25, 2010 at 6:02
  • It would have been nice to link to the bitbucket issue #1 to see the answer.
    – rds
    Aug 19, 2011 at 8:31
5

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

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.

1
  • 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, 2010 at 16:17
5

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

Response capability It would be nice if this app did not only show the Stack activites but gave a chance to respond them.

1
  • 1
    It's not possible to write data to stack exchange using the 1.x API nor is it possible to authenticate a user. Even if it were possible, making the tool able to respond would have made it vastly more complex and significantly more data to download. I did, however, allow users to click on the questions and answers to view them on the live site where in they can respond if they're registered members.
    – Soviut
    Jan 4, 2012 at 2:59
4

Stackapps works nice by using jQuery 1.4. But when I upgrade jQuery to 1.6.x it fails to show the output and giving error:

"Syntax error, unrecognized expression: [href=http://app.stacktack.com/stacktack.min.css]"

Check it with http://nazmulweb.com/sof (Now there is no error as I have edited the js part)

And the working one is here with jQuery 1.4.x http://nazmulweb.com/site5/demo/sof/Default.aspx

UPDATE

Using jQuery 1.6.2

if ($('link[href=' + options.stylesheet + ']').length === 0)

the above line gives trouble and causes error but after changing the above line to

if ($("link[href=' + options.stylesheet + ']").length === 0)

Stacktack works properly in jQuery 1.6.2.

Check it out at http://nazmulweb.com/sof

Thank you so much.

6
  • Which browser are you using? I updated JQuery in my test page to 1.6.1 and got no errors. I looked at your source for the page that fails and think it might have something to do with how your injecting a script tag into the header. Because the error I got stated that stacktack() wasn't an available object.
    – Soviut
    Jul 4, 2011 at 4:05
  • Using IE8, IE9 and FireFox 3.6.18. I changed the jQuery source in my working demo and it did not work for jQuery 1.6.x
    – Nazmul
    Jul 5, 2011 at 3:49
  • Interesting. perhaps [href["' + options.stylesheet + '"]' would do the trick. To surround the sub-parameter in quotes.
    – Soviut
    Jul 6, 2011 at 22:30
  • I've added the quotes around the href. The fix should be online in about 24 hours when S3 propagates.
    – Soviut
    Jul 9, 2011 at 4:22
  • Does it work now?
    – Soviut
    Jul 12, 2011 at 20:37
  • I tried it with stacktack.min.js file and did not work. I don't know why it is not working in my case. Might be it is related to the script file placement, as I am adding the script file by append method(if you view the source of my page). However, it is working with local copy of stacktack.js as I mentioned earlier. Anyway, thank you once again.
    – Nazmul
    Jul 13, 2011 at 12:10
4

This is really a great app :) I liked it very much.

Can it be possible to also pass the user-id as a parameter somewhere, so that the link to original question get's linked with the referrer and would help in Announcer and Booster badge.

Update - Answer to my own question above

Updating the a href to required link would do the job here. Check this post to see the required js for this.

2

I think you should include $(document).stacktack(); to the javascript file, so we just need to include your library, and... that's it :D

2
  • 1
    That's possible, but a bit presumptuous. It means any configurations can't be passed and really isn't how a JQuery plugin should behave.
    – Soviut
    Mar 5, 2013 at 18:06
  • but we can configure it in the <div> tag
    – gamehelp16
    Mar 6, 2013 at 11:23
2

How come the code isn't formatted to be in different colors? (etc, how they show on SO)

1
  • That was beyond the scope of the original design and the time I had to develop this in. It would have also made the library considerably more complex.
    – Soviut
    Feb 6, 2014 at 3:07

You must log in to answer this question.

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