Tech Note: Creating Tweet Buttons Dynamically

LGF • Views: 7,374

As I mentioned yesterday, I’ve integrated Twitter’s new official “Tweet Button” into the LGF Blog code to see how it compares to our previous Tweet button/retweet count feature, which calls the API at bit.ly to get the count statistics.

But I ran into a problem with the Twitter code: it’s intended to work only on page load, and there’s no documented way to dynamically add Tweet Buttons to content generated via Ajax. This meant I couldn’t add Tweet Buttons to the articles that appear when you click the “Show More Articles” button at the bottom of the LGF front page.

So I took a look at Twitter’s Javascript code for generating the buttons, which is located here. It’s “minified,” so I ran it through the Javascript unpacker and beautifier first, then read through the code (it’s pretty short) and discovered that installing a Tweet Button is a simple matter of instantiating a “TweetButton” object (passing it the DOM object — not the jQuery object — for the link that will be turned into a button), then calling the TweetButton’s “render” method.

The code to do this dynamically via jQuery is surprisingly simple. (The variable “thediv” is the container for the newly loaded articles.)

$(thediv).find('a.twitter-share-button').each(function(i) {
	var thisTweetButton = new twttr.TweetButton($(this).get(0));
	thisTweetButton.render();
});

A sidenote: I’ve noticed that the official Tweet Button is reporting lower numbers for the retweet count than bit.ly’s API does. It’s not immediately apparent why there’s a discrepancy.

Jump to top

Create a PageThis is the LGF Pages posting bookmarklet. To use it, drag this button to your browser's bookmark bar, and title it 'LGF Pages' (or whatever you like). Then browse to a site you want to post, select some text on the page to use for a quote, click the bookmarklet, and the Pages posting window will appear with the title, text, and any embedded video or audio files already filled in, ready to go.
Or... you can just click this button to open the Pages posting window right away.
Last updated: 2016-01-01 10:29 am PST
LGF User's Guide RSS Feeds Tweet

Help support Little Green Footballs!

Subscribe now for ad-free access!Register and sign in to a free LGF account before subscribing, and your ad-free access will be automatically enabled.

Donate with
PayPal
Square Cash Shop at amazon
as an LGF Associate!
Recent PagesClick to refresh
More Than 70 Years After the Holocaust, Victims Are Laid to Rest in Belarus More than 1,000 victims of the Holocaust were buried Wednesday in Belarus, some 70 years after they were killed in the genocide. Their bones were unearthed this winter by construction workers as they began to build luxury apartments in ...
Thanos
1 day, 21 hours ago
Views: 196 • Comments: 0 • Rating: 1
Tweets: 2 • Share to Facebook
Shares: 0
Comments: 0
: 0
Orville Peck - ‘Turn to Hate’ (Live at WFUV)wfuv.org • Follow @wfuv: ow.ly Orville Peck performs "Turn To Hate" live in Studio A. Recorded 4/26/19. Host: Russ BorrisAudio: Jim O'HaraCameras: Nora Doyle, Dan Tuozzoli, Brian Gallagher and Michael L'AbbbateEditor: Nora Doyle and Dan Tuozzoli
Thanos
4 days, 10 hours ago
Views: 408 • Comments: 0 • Rating: 0
Tweets: 4 • Share to Facebook
Shares: 0
Comments: 0
: 0
Vampire Weekend - This Life (Official Video)Father of the Bride available now: smarturl.it #VampireWeekend #FatherOfTheBride
Thanos
4 days, 10 hours ago
Views: 420 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Molly Tuttle at Paste Studio NYC Live From the Manhattan Center1. Take the Journey 0:232. Messed With My Mind 6:393. Sleepwalking 12:214. Light Came In (Power Went Out) 18:11 Watch Molly Tuttle live at Paste Studio NYC! More sessions and interviews here: pastemagazine.com Audio: Bob MalloryVideo: Brad Wagner
Thanos
4 days, 10 hours ago
Views: 394 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
The Raconteurs - ‘Help Me Stranger’ (Official Music Video) Music video for The Raconteurs new single “Help Me Stranger” from their forthcoming album HELP US STRANGER – out June 21st. Pre-order & pre-save HELP US STRANGER here: theraconteurs.lnk.to Director: Yasuhiko ShimizuDirector of Photography: Shunya AraiProducer: Takashi SugaiStylist: Tomohiko ...
Thanos
5 days, 21 hours ago
Views: 476 • Comments: 0 • Rating: 0
Tweets: 2 • Share to Facebook
Shares: 0
Comments: 0
: 0
‘The Maldives Mystery’ Resolved This is a response to the Academic Agent's "Climate Change -- The Maldives Mystery." I am currently on assignment and won't be able to list sources for at least another week. My apologies for the delay. This is also ...
Thanos
6 days, 4 hours ago
Views: 447 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Lil Nas X - Old Town Road (Official Movie) Ft. Billy Ray Cyrus Official video for Lil Nas X’s Billboard #1 hit, “Old Town Road (Remix)” featuring Billy Ray Cyrus. Special guest appearances from Chris Rock, Haha Davis, Rico Nasty, Diplo, Jozzy, Young Kio, and Vince Staples. Listen & Download “Old Town ...
Thanos
6 days, 4 hours ago
Views: 526 • Comments: 0 • Rating: 0
Tweets: 3 • Share to Facebook
Shares: 0
Comments: 0
: 0
Down on the PromenadeProvided to YouTube by CDBaby Down On the Promenade · Marc Monroe Copasetic ℗ 2013 Mark Kelton Released on: 2013-04-23 Auto-generated by YouTube.
Thanos
1 week, 2 days ago
Views: 688 • Comments: 1 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Dido - Take You Home (Official Video) The official video for Take You Home, taken from Dido's new album, Still On My Mind. Buy now: dido.lnk.to Follow DidoOfficial site - didomusic.comFacebook - facebook.com Instagram - instagram.comTwitter - @didoofficial Jordan Rossi (Video Producer), John RankinWaddell (Video Director) ...
Thanos
1 week, 2 days ago
Views: 675 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Norah Jones - Begin Again (Live on the Today Show)‘Begin Again’ comes from Norah Jones’s latest compilation of the same name.Listen to the full compilation here: norahjones.lnk.to See Norah live: norahjones.lnk.to Connect with Norah:norahjones.comfacebook.com@norahjonesinstagram.com #NorahJones #BeginAgain vevo.ly
Thanos
1 week, 2 days ago
Views: 717 • Comments: 0 • Rating: 0
Tweets: 2 • Share to Facebook
Shares: 0
Comments: 0
: 0