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.

Community
  • 1
Soviut
  • 3,333
  • 3
  • 19
  • 14
  • 20
    ++ slick is the word – Sky Sanders Jun 04 '10 at 07:12
  • 2
    Not only is this a brilliant idea, it also looks so wonderful. Good job! – Maxim Zaslavsky Jun 04 '10 at 08:35
  • 3
    Man, this is one awesome idea! – Nathan Osman Jun 04 '10 at 16:50
  • 3
    Very impressive. – Andy West Jun 04 '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 05 '10 at 03:20
  • Using jquery.stacktack.min.js returns an XML file with access denied, but using jquery.stacktack.js works OK. – Mark Henderson Jun 06 '10 at 03:22
  • This is really cool! – Nippysaurus Jun 08 '10 at 05:48
  • Thanks to Farseeker for integrating StackTack into his SAggregator app, I've added a link to it in the description. – Soviut Jun 08 '10 at 07:57
  • +1 for a really cool use of the API. Seems like it could easily break the 10k hit limit if it gets even a modest amount of exposure, though (which is probably a good thing!). – Mark Rushakoff Jun 08 '10 at 11:22
  • 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 08 '10 at 16:52
  • 1
    Answers are now explicitly requested in the ajax call as per the changes made in this ticket http://stackapps.com/questions/613/dont-include-answers-in-question-lists-by-default The changes should propagate across S3 in roughly 24 hours. – Soviut Jun 10 '10 at 07:02
  • Brilliant, I hope to see many of these "tack" around the web in the future. – OscarRyz Jun 19 '10 at 01:21
  • @Oscar, me too! That would really make it worth the effort. – Soviut Jun 19 '10 at 02:43
  • StackTack now targets version 1.0 of the stack API, in compliance with the rules. All seems well so both the normal and minified versions of the javascript should be propagated across S3 in 24 hours. – Soviut Jun 19 '10 at 02:54
  • I had to revert the api version to 0.8 for now since the 1.0 hosting seems unstable. The update should propagate in about 24 hours over S3. – Soviut Jun 20 '10 at 03:16
  • @systempuntoout, you may want to look at what Farseeker did with SAggregator http://stackapps.com/questions/570/saggregator-a-way-to-accumulate-all-the-latest-activity-from-the-stackapps-api He was able to get a Tack to display inside a JQuery UI modal dialogue. – Soviut Jun 23 '10 at 07:16
  • @systempuntoout, his backend has nothing to do with the tack in his modal dialog, that's all happening client side. Just import JQueryUI into your page, create a stacktack div and tell a JQueryUI modal dialog to wrap it. http://jqueryui.com/demos/dialog/#modal – Soviut Jun 24 '10 at 17:55
  • StackTack now targets Stack API 0.9. I've also added a JQueryUI dialog example to the demo page. It should propagate across S3 in about 24 hours, as usual. – Soviut Jun 25 '10 at 03:11
  • Please consider listing StackTack on StackList. – Nathan Osman Jul 07 '10 at 03:27
  • Now listed on StackList at http://stacklist.quickmediasolutions.com/view_app.php?id=34 – Soviut Jul 08 '10 at 06:15
  • Now targeting Stack API 1.0, the files will propagate on S3 in about 24 hours. Nothing broke and nothing changed, so don't expect any surprises (knock on wood) – Soviut Jul 10 '10 at 02:45
  • Very nice, I've given it a go and it's sweeeeet – TWith2Sugars Jul 12 '10 at 08:50
  • @TWith2Sugars, post a link as an answer if you've implemented it publicly. I'd love to see it in action. – Soviut Jul 12 '10 at 08:56
  • I think the links are broken. Seems to be an error on the domain redirect for www.stackoverflow.com. – Kevin Jul 13 '10 at 14:31
  • @Kevin, http://bitbucket.org/zamtools/stacktack/issue/2/question-link-missing-slash I've made a ticket for it and will be addressing this shortly. – Soviut Jul 13 '10 at 19:49
  • The linking issues should be resolved as well as the tag styles. I plan to make a very explicit stylesheet override on any content within the container to ensure all content is unaffected by any more blog themes. – Soviut Jul 14 '10 at 17:32
  • 1
    Would it be possible to add support for, other stackexchange sites like askubuntu.com – myusuf3 Oct 29 '10 at 14:01
  • @garbagecollector, I'm planning a 1.1 release soon which will allow for complete API urls. Currently the plugin makes too many assumptions about how the api path will be named. – Soviut Nov 01 '10 at 05:59
  • @soviut also could you test it on tumblr as well. I would be amazing to be able to embed SO discussions in posts, on the fly. – myusuf3 Nov 01 '10 at 14:24
  • 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: http://zamtools.tumblr.com/post/1463290085/stacktack – Soviut Nov 02 '10 at 19:53
  • 1
    @Soviut it doesn't seem to work. – myusuf3 Nov 02 '10 at 20:52
  • I forgot to mention, S3 will take about a day to propagate so you may not see it working until tomorrow. My mistake. – Soviut Nov 02 '10 at 23:31
  • @Soviut could i get a sample code snippet? as well as how you installed it with tumblr i tried looking at page source no mas :) – myusuf3 Nov 03 '10 at 13:54
  • I've actually already posted a tutorial as an answer here that explains the steps needed to accomplish this. It explains how to edit the theme HTML as well as how to post a Tack in a text post on Tumblr. – Soviut Nov 03 '10 at 18:27
  • It's awesome! works like a charm: http://utkarshsengar.com/2010/11/how-to-get-started-on-tdd-with-ruby-on-rails-stacktack/ – zengr Nov 17 '10 at 20:44
  • I'm using stacktack at http://www.shrinkrays.net/code-snippets/csharp/stackoverflow-driven-c-faq.aspx - is there a way to force it to dynamically load questions? At the moment it's hitting api.stackoverflow.com with all the questions – Chris S Nov 26 '10 at 11:44
  • @Chris, one solution would be to put the stacktack() function call inside the click event that expands the question. Be sure to use selectors in the click to target the specific question div, for example: $(this).find('.question').stacktack(); – Soviut Nov 26 '10 at 22:31
  • @Soviut I've added your changes, however I'm getting banned by IP when I click two questions in the link above. Is there some way of avoiding this? – Chris S Nov 30 '10 at 14:59
  • @Chris, it could be an issue with how often you're polling their service. The changes I suggested should not have caused this. – Soviut Dec 01 '10 at 00:41
  • awesome! I'll be using it on my blog when I make one (soon)! Great job. – bevacqua Jun 25 '11 at 18:37
  • Sorry about the domain outage. It was fixed as soon as I noticed. – Soviut Jun 28 '11 at 02:52
  • @Soviut this Programmers question gives a javascript error on StackTack. You can test it here. Chrome says Cannot read property 'email hash' of undefined . – systempuntoout Jul 11 '11 at 20:47
  • @systempuntoout this should be fixed now. Give it 24 hours to propagate over the S3. – Soviut Jul 13 '11 at 08:47
  • @Soviut sorry for bugging you mate, but the problem persists :(. http://www.gaecupboard.com/post/agtnYWVjdXBib2FyZHISCxIEUG9zdCIIbXBRRVogaWwM/windows-azure-vs-amazon-ec2-vs-google-app-engine-programmers-stack-exchange – systempuntoout Jul 13 '11 at 19:37
  • 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
  • @Soviu working :) yup. – systempuntoout Jul 15 '11 at 10:44
  • Excellent. I actually realized after that the undefined error wasn't coming from the parameter on the user object being undefined, but rather the entire user object was undefined. So now it simply skips the profile creation step if no user is passed. – Soviut Jul 15 '11 at 19:46
  • I just submitted a pull request on BitBucket for ya. A couple broken urls. Great project! – Rebecca Chernoff Sep 10 '11 at 07:28
  • @Rebecca, Thanks, I've pulled. Now I just have to get it on S3. – Soviut Sep 11 '11 at 16:19
  • 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? – Goodbye Stack Exchange Nov 12 '11 at 21:30
  • That's a really good job @Soviut. I tried it with my blog and it's working fine but I want to know if there is a way to just embed a particular answer instead of the whole questions + answers? Thanks for help. – San Francesco Aug 27 '12 at 16:19
  • 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 '14 at 11:50
  • I updated the bitbucket repo but haven't had a chance to push the changes to S3 yet. – Soviut May 14 '14 at 19:55
  • Using a locally-hosted script from the bitbucket repo (which includes apiVersion: '2.2' in its defaults), I'm still seeing requests getting redirected to the "API 1.x shutdown" page. Did more than just the version number change? – Jeffrey Bosboom Sep 02 '14 at 23:54
  • @brasofilo (and Soviut), thanks for recovering the image, but the correct thing to do is set images using the built-in tool (Ctrl G or matching button), so that the images are kept on Stack Exchange's dedicated and reliable image server. – Brock Adams Sep 22 '14 at 19:24
  • @Brock, yep, thought of that after submitting the edit, thx for heads up. – brasofilo Sep 22 '14 at 19:31
  • app.stacktack.com appears to be defunct and stacktack.com appears to have switched to a "fashion and beauty" site in July of 2014. – Brock Adams Apr 02 '15 at 01:07
  • 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 https://github.com/nathan-osman/StackTack – Soviut Apr 02 '15 at 07:38
  • Also there is this "remix" http://stackapps.com/questions/3244/stacktack-george-edison-remix-now-with-a-few-extra-features – Soviut Apr 02 '15 at 07:39
  • @Soviut can Unix.Stackexchange and Islam.SE website Q&A be shown using this? – mtk Jun 07 '16 at 07:37
  • Is it possible to use StackTack with the new StackOverflow Documentation (http://stackoverflow.com/documentation)? What would it take to make it work?

    The current syntax of <div id="stacktack-1227286"></div> is question-id-based, which doesn't match the syntax of the documentation topics...

     – Michael Zlatkovsky - Microsoft Jul 23 '16 at 13:42
  • Out of the box I don't think so, but it would be easy enough to change the API URL to point to the documentation system. – Soviut Jul 23 '16 at 16:56
  • 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 '21 at 10:01

12 Answers12

28

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

C. Ross
  • 453
  • 4
  • 7
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.

Soviut
  • 3,333
  • 3
  • 19
  • 14
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

Soviut
  • 3,333
  • 3
  • 19
  • 14
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.

Maxim Zaslavsky
  • 2,441
  • 15
  • 10
  • 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 06:02
  • It would have been nice to link to the bitbucket issue #1 to see the answer. – rds Aug 19 '11 at 08:31
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.

TWith2Sugars
  • 151
  • 3
  • 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
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>​
Soviut
  • 3,333
  • 3
  • 19
  • 14
5

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

osiixy
  • 151
  • 1
  • 3
  • 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 04 '12 at 02:59
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>
Soviut
  • 3,333
  • 3
  • 19
  • 14
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.

Nazmul
  • 141
  • 4
  • 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 04 '11 at 04: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 05 '11 at 03:49
  • Interesting. perhaps [href["' + options.stylesheet + '"]' would do the trick. To surround the sub-parameter in quotes. – Soviut Jul 06 '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 09 '11 at 04:22
  • 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. – Nazmul Jul 13 '11 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.

Community
  • 1
mtk
  • 141
  • 4
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

gamehelp16
  • 121
  • 3
2

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

Cilan
  • 121
  • 7
  • 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 06 '14 at 03:07