Tech Note: Creating Tweet Buttons Dynamically

LGF • Views: 8,207

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: 2021-06-05 2:51 pm PDT
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
Cash.app Shop at amazon
as an LGF Associate!
Recent PagesClick to refresh
Train Songs Nine
A hollow voice says Vaccinate the world!
4 days, 16 hours ago
Views: 325 • Comments: 0 • Rating: 0
Tweets: 0 •
Train Songs Eight
A hollow voice says Vaccinate the world!
4 days, 16 hours ago
Views: 366 • Comments: 0 • Rating: 0
Tweets: 0 •
Train Songs Seven
A hollow voice says Vaccinate the world!
4 days, 16 hours ago
Views: 314 • Comments: 0 • Rating: 0
Tweets: 0 •
Train Songs Six
A hollow voice says Vaccinate the world!
4 days, 16 hours ago
Views: 312 • Comments: 0 • Rating: 0
Tweets: 0 •
Train Songs Five
A hollow voice says Vaccinate the world!
1 week, 4 days ago
Views: 639 • Comments: 0 • Rating: 6
Tweets: 0 •
Train Songs Four
A hollow voice says Vaccinate the world!
1 week, 4 days ago
Views: 633 • Comments: 0 • Rating: 4
Tweets: 0 •
Train Songs Three
A hollow voice says Vaccinate the world!
1 week, 4 days ago
Views: 584 • Comments: 0 • Rating: 4
Tweets: 0 •
Snarky Puppy - Trinity (Extended Version) Snarky Puppy never lets you down, they always come out bright and enthusiastically high on the sounds. Snarky Puppy - Trinity (Extended Version)From Snarky Puppy's new album, Empire Central (September 2022, GroundUP Music)Stream/Buy: orcd.co Written by Mark LettieriArranged by ...
Thanos
2 weeks, 3 days ago
Views: 832 • Comments: 0 • Rating: 2
Tweets: 2 •