Tagged facebook icon

Refresh Twitter and Facebook social icons after an Ajax request

I recently found myself dealing with the following problem: I wanted to lazy-load as much of the social networking components of a site as possible, which meant deferring the load of both the Twitter and Facebook JS until after the document finished rendering. This process was relatively straightforward, but in the course of implementing the buttons I discovered something interesting: when you do an Ajax request to refresh a portion of the page, buttons in there are not dynamically refreshed. This makes sense–there’s nothing to re-run the appropriate JS methods to render them–but it’s not good.

My quest on Google first took me to this forum, where the exact same problem I was having was discussed back in Sept-Oct. Since a new version of the Twitter @anywhere API came out today, and doesn’t include a TweetButton, that wasn’t going to be an option either.

Thankfully, I found this post, which outlined the best workaround I’d seen yet for interacting with Twitter’s widgets.js file. It’s worth a quick aside here: the problem is created because the @anywhere API, which has all named functions, does not have a method to create a TweetButton. That is handled instead within widgets.js, which is all wrapped in one big anonymous function. There’s a render() method hiding pitifully inside, but it took someone with JS skills beyond mine to coax it out of hiding.

Both of the examples in the previous link work great, and can be cut-and-paste. In my case, however, I didn’t want to mess with the actual $.get request, which was happening in a completely different script file, and was written years ago. Thankfully, a few quick tweaks resulted in this:

$('.topic-term-link').ajaxComplete(function(){
   //re-render the facebook icons (in a div with id of 'content')     
   FB.XFBML.parse(document.getElementById('content'));

  //re-render twitter icons by calling the render() method on each
  $('#content').find('a.twitter-share-button').each(function(){
     var tweet_button = new twttr.TweetButton( $( this ).get( 0 ) );
     tweet_button.render();
  });
});

Since jQuery lets me bind directly to the ajaxComplete event, I didn’t even need control over the Ajax call, which is good, because it wasn’t an option. Now, maybe Twitter will name the main function in widgets.js and we can just call a single line like for Facebook in the above example.