Obsolete - StackTack, a JavaScript widget you can stick anywhere

Question

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.

Not only is this a brilliant idea, it also looks so wonderful. Good job! — Maxim Zaslavsky, Commented Jun 4, 2010 at 8:35
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, Commented Jun 5, 2010 at 3:20
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, Commented Jun 8, 2010 at 16:52
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, Commented Jun 10, 2010 at 7:02
Would it be possible to add support for, other stackexchange sites like askubuntu.com — myusuf3, Commented Oct 29, 2010 at 14:01
@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, Commented Nov 2, 2010 at 19:53
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, Commented Jul 14, 2011 at 21:48
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, Commented Nov 12, 2011 at 21:30
The live demo doesn't work for me (current Chrome). I get JS syntax errors and it only shows "loading question XYZ". — magnattic, Commented May 14, 2014 at 11:50
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, Commented Apr 2, 2015 at 7:38
Here's my own StackTack fork (which itself is just a fork of the aforementioned fork) to make it work with Python 3. — OfirD, Commented Sep 10, 2021 at 10:01

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

28

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

answered Aug 25, 2010 at 18:16

C. Ross

4534 silver badges7 bronze badges

3

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
Commented Aug 26, 2010 at 2:22
Has this been done yet? If not, I'd be willing to implement this.
– vzwick
Commented Sep 24, 2011 at 12:13
2

It's done now.
– Nathan Osman
Commented Mar 19, 2012 at 16:45

Add a comment |

Soviut · Accepted Answer · 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.

Soviut · Accepted Answer · 2010-11-02 20:06:38Z

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

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

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

answered Jun 25, 2010 at 5:44

Maxim Zaslavsky

2,44115 silver badges10 bronze badges

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
Commented Jun 25, 2010 at 6:02
It would have been nice to link to the bitbucket issue #1 to see the answer.
– rds
Commented Aug 19, 2011 at 8:31

Add a comment |

Soviut · Accepted Answer · 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 · Accepted Answer · 2010-07-13 10:42:31Z

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.

answered Jul 13, 2010 at 10:42

TWith2Sugars

1513 bronze badges

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
Commented Jul 13, 2010 at 16:17

Add a comment |

osiixy · Accepted Answer · 2011-12-31 15:50:50Z

5

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

answered Dec 31, 2011 at 15:50

osiixy

1511 silver badge3 bronze badges

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
Commented Jan 4, 2012 at 2:59

Add a comment |

Soviut · Accepted Answer · 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>

Nazmul · Accepted Answer · 2011-07-05 16:17:09Z

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.

edited Jul 5, 2011 at 16:17

answered Jul 2, 2011 at 12:51

Nazmul

1414 bronze badges

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
Commented 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
Commented Jul 5, 2011 at 3:49
Interesting. perhaps [href["' + options.stylesheet + '"]' would do the trick. To surround the sub-parameter in quotes.
– Soviut
Commented 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
Commented Jul 9, 2011 at 4:22
Does it work now?
– Soviut
Commented 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
Commented Jul 13, 2011 at 12:10

Add a comment |

Community · Accepted Answer · 2017-05-23 12:39:55Z

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.

edited May 23, 2017 at 12:39

CommunityBot

1

answered Nov 3, 2012 at 17:23

mtk

1414 bronze badges

Add a comment |

gamehelp16 · Accepted Answer · 2013-03-05 13:44:58Z

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

answered Mar 5, 2013 at 13:44

gamehelp16

1213 bronze badges

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
Commented Mar 5, 2013 at 18:06
but we can configure it in the <div> tag
– gamehelp16
Commented Mar 6, 2013 at 11:23

Add a comment |

Cilan · Accepted Answer · 2014-02-06 01:57:36Z

2

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

answered Feb 6, 2014 at 1:57

Cilan

1217 bronze badges

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
Commented Feb 6, 2014 at 3:07

Add a comment |

Stack Exchange Network

Obsolete - StackTack, a JavaScript widget you can stick anywhere

Screenshot / Code Snippet

About

License

Download

Platform

Contact

Code

12 Answers 12

Update - Answer to my own question above

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
app
obsolete
javascript
jquery
widget
.

Linked

Hot Network Questions

Obsolete - StackTack, a JavaScript widget you can stick anywhere

Screenshot / Code Snippet

About

License

Download

Platform

Contact

Code

12 Answers 12

Update - Answer to my own question above

You must log in to answer this question.

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
app
obsolete
javascript
jquery
widget
.