Tech Note: Creating Tweet Buttons Dynamically

LGF • Views: 7,326

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
Season 3 Premiere of VictoriaFor those who are interested Season 3 of Victoria premieres this evening. Please check your local listings for times. Main PBS website:pbs.org
PhillyPretzel
2 days, 18 hours ago
Views: 151 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Ten Reasons Why Gold Will Remain Above $1250 in 2019Fun fact- A healthy economy drops gold lower over time. Read with caution As far as investing goes, I read an indictment of economic policy from Trump in this. After a healthy consolidation period below strong resistance around the $1300 ...
Unshaken Defiance
3 days, 22 hours ago
Views: 227 • Comments: 0 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Season Pass for Victoria Season 3 at AmazonOT I am still surprised that there are people complaining about Victoria Season 3 on Amazon. The 3rd season of Victoria will start on January 13, 2019. I again wrote a review explaining the basic season pass rules and it ...
PhillyPretzel
3 days, 22 hours ago
Views: 210 • Comments: 0 • Rating: 1
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Ghost-Note - Can’t Get Right - Old Growth Sessions @Pickathon 2017 S02E08 Old Growth Series - Season 2 - Episode 8 Outside Magazine presents Ghost-Note in this episode of the Pickathon Old Growth Series. Visit Outside Magazine (outsideonline.com) on the 1st Thursday of every month for a new Old Growth Series ...
Thanos
1 week, 3 days ago
Views: 387 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Clean Bandit - Baby (Feat. Marina & Luis Fonsi) [Official Video]Download or stream now: atlanti.crTaken from our new album "What Is Love?" - out now: atlanti.cr Click here to subscribe: bit.ly Follow us:Website: cleanbandit.co.ukFacebook: facebook.com Twitter: twitter.com Instagram: instagram.comSoundcloud: SoundCloudSpotify: atlre.co.uk
Thanos
1 week, 3 days ago
Views: 439 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
Khruangbin - Maria También (Live on KEXP)kexp.org presents Khruangbin performing "Maria También" live in the KEXP studio. Recorded April 26, 2018. Host: Cheryl WatersAudio Engineers: Tim Iseler & Kevin Suggs Cameras: Alaia D'Alessandro, Scott Holpainen & Justin WilmoreEditor: Justin Wilmore kexp.orgkhruangbin.com
Thanos
1 week, 3 days ago
Views: 562 • Comments: 0 • Rating: 2
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0
kokoroko - abusey junction // we out here Follow - Kokoroko - bit.lyWatch - We Out Here A LDN Story - bit.lyBuy - We Out Here - bit.ly A primer on London’s bright-burning young jazz scene, this new compilation brings together a collection of some of its ...
Thanos
1 week, 3 days ago
Views: 475 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Cyber Phrenology - How Is It a Thing?I'm not a computer maven. So, I apologize in advance if this post is old news for some. It is a shallow water dive into the world of influencing public opinion via memes and social media postings.I came across this ...
qubit2020
1 week, 4 days ago
Views: 406 • Comments: 0 • Rating: 0
Tweets: 0 • Share to Facebook
Shares: 0
Comments: 0
: 0
Become a Better Photographer With This 52-Week Photo ChallengeFrom pros to the most green amateur, this is excellent advice. Now let me add a few (free or almost free) essential apps for your cell phones to help. Most people don't need to buy a camera, they already have ...
Unshaken Defiance
2 weeks ago
Views: 599 • Comments: 1 • Rating: 4
Tweets: 0 • Share to Facebook
Shares: 2
Comments: 0
: 2
German Police: Man Intentionally Drove Into Crowd, Injured 4 BERLIN (AP) — A man has been arrested in Germany after ploughing his car into a crowd of people early Tuesday, injuring at least four in what appears to have been an intentional attack directed at foreigners, police said ...
Thanos
2 weeks, 1 day ago
Views: 456 • Comments: 0 • Rating: 0
Tweets: 1 • Share to Facebook
Shares: 0
Comments: 0
: 0