Tweet button with AJAX content

2,082 views
Skip to first unread message

danny

unread,
Sep 20, 2010, 7:45:44 AM9/20/10
to Twitter Development Talk
I've searched and searched without any luck.

I have AJAX content coming in, rendered in HTML with Tweet buttons all
over the place.

Problem is, the Tweet button does not work (since it appears the
Twitter Javascript goes through the loaded page DOM to enable the
Tweet button links AFTER the page load).

Right now I am manually generating the URL to forward the user to the
Twitter message page on a new window.
And I don't want to create a Javascript to pop it up in a centered
window with a fixed size since I want to stick to what Twitter has
already provided in their JS.

So anyone figure out how to make the Tweet button work with AJAX
content? The only hack I can think of is to unload the Twitter
Javascript from the HTML DOM and when AJAX content comes in...reload
the Twitter Javascript (I know...it's a very bad hack)

Suggestions? Thanks

Cairo Noleto

unread,
Sep 26, 2010, 8:04:26 PM9/26/10
to twitter-deve...@googlegroups.com
Hi, I have the same problem. Someone can help us?


--
Twitter developer documentation and resources: http://dev.twitter.com/doc
API updates via Twitter: http://twitter.com/twitterapi
Issues/Enhancements Tracker: http://code.google.com/p/twitter-api/issues/list
Change your membership to this group: http://groups.google.com/group/twitter-development-talk?hl=en



--
Atenciosamente,

Cairo Noleto 
Visits http://www.caironoleto.com/

A. Jesse Jiryu Davis

unread,
Sep 27, 2010, 10:22:38 AM9/27/10
to Twitter Development Talk
I have a similar problem, on this page:

http://emptysquare.net/photography/homeless-shelters/#1/

I use this jQuery code to regenerate the Tweet button each time Ajax
content changes:

var tweet_button = $('#tweet_button_container');

tweet_button.html(
'<a href="http://twitter.com/share" class="twitter-share-button" data-
count="horizontal" data-via="jessejiryudavis" data-url="'
+ document.location.href
+ '" data-counturl="'
+ document.location.href
+ '">Tweet</a><script type="text/javascript" src="http://
platform.twitter.com/widgets.js"></script>'
);

... and that works, but the Tweet-count is always 0 when I reload the
page, no matter how many times I've tweeted the URL.

Tweet buttons with Ajax content seem like a common case, can we get
some guidance about implementing it correctly?

Thanks,
Jesse

Mark Reginald James

unread,
Oct 7, 2010, 9:21:32 PM10/7/10
to Twitter Development Talk
That's great Jesse that you've found a method that works. I didn't
know that was a way to force a reload of widget.js.

Note that widget.js only needs to be re-sourced once to render all
Tweet buttons on the page, so you can just render plain tweet links
and then re-source the script.

An alternative method I've found successful is to take a local copy of
widget.js and give its main function a name:

var twttr=window.twttr||{};(twttr.showWidgets = function()...

(Note that the parenthesis and the end has to be moved before the
"()").

The AJAX response can the just include a "twttr.showWidgets()" call.

Twitter should really alter widget.js to do something similar, just
like the Facebook sharer allows you to call "FB.Share.renderPass()".

Another alternative that should work, but doesn't, probably because of
a Twitter bug, is to render the button directly as an iframe, as
described at http://dev.twitter.com/pages/tweet_button . AJAX updates
then work fine, except for a JavaScript error about a missing
twttr.updateTweetCount function. Is this a bug in
http://platform.twitter.com/widgets/tweet_button.html ?

Mark

Mark Reginald James

unread,
Oct 10, 2010, 8:07:49 PM10/10/10
to Twitter Development Talk
I'm no longer seeing the updateTweetCount error when rendering the
iframe directly, so this looks like the best method to allow AJAX
updates.

An additional advantage is that you can make the iframe slightly
bigger than that generated by the Twitter JS, eliminating clickjacking
warnings from the NoScript Firefox plugin.
Reply all
Reply to author
Forward
0 new messages