Take the 2-minute tour ×
Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. It's 100% free, no registration required.

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

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.

share|improve this question
32  
+1 this is really slick –  Dave DeLong Jun 4 '10 at 6:21
18  
++ slick is the word –  Sky Sanders Jun 4 '10 at 7:12
2  
Not only is this a brilliant idea, it also looks so wonderful. Good job! –  Maxim Zaslavsky Jun 4 '10 at 8:35
3  
Man, this is one awesome idea! –  Nathan Osman Jun 4 '10 at 16:50
3  
Very impressive. –  Andy West Jun 4 '10 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 '10 at 3:20
    
+1, what they said –  Christopher Parker Jun 5 '10 at 18:41
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 '10 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 '10 at 7:02
1  
Would it be possible to add support for, other stackexchange sites like askubuntu.com –  garbagecollector Oct 29 '10 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 '10 at 19:53
1  
@Soviut it doesn't seem to work. –  garbagecollector Nov 2 '10 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 '11 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? –  neilfein Nov 12 '11 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". –  atticae May 14 at 11:50

12 Answers 12

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

share|improve this answer
2  
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 '10 at 2:22
    
Has this been done yet? If not, I'd be willing to implement this. –  vzwick Sep 24 '11 at 12:13
2  
It's done now. –  Nathan Osman Mar 19 '12 at 16:45
    
Hells. Yes. Thank you. –  xenomancer Mar 4 '13 at 6:47

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer
    
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 '10 at 6:02
    
It would have been nice to link to the bitbucket issue #1 to see the answer. –  rds Aug 19 '11 at 8:31

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>
share|improve this answer

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.

share|improve this answer
    
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 '10 at 16:17
    
Thanks @Soviut, Look forward to it. –  TWith2Sugars Jul 14 '10 at 9:03

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>​
share|improve this answer

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

share|improve this answer
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 '12 at 2:59

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.

share|improve this answer
    
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 '11 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 –  Hoque Jul 5 '11 at 3:49
    
Interesting. perhaps [href["' + options.stylesheet + '"]' would do the trick. To surround the sub-parameter in quotes. –  Soviut Jul 6 '11 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 '11 at 4:22
    
Thank you so much. –  Hoque Jul 11 '11 at 3:44
    
Does it work now? –  Soviut Jul 12 '11 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. –  Hoque Jul 13 '11 at 12:10

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.

share|improve this answer

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

share|improve this answer
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 '13 at 18:06
    
but we can configure it in the <div> tag –  gamehelp16 Mar 6 '13 at 11:23

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

share|improve this answer
    
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 at 3:07

You must log in to answer this question.

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