RSS feed

Re-rendering Facebook, Twitter and ShareThis social buttons when adding new content via AJAX

June 22, 2011

I was working on a WordPress site today with social buttons for each post on archive pages.  The site also has AJAX pagination that appends posts to the page when you click ‘view more’.  The issue I ran into was when new content came in via AJAX, the social buttons in HTML and XFBML weren’t rendering their iframes or complete content.  They were just the placeholders specified in the source.

So here are three snippets to remember for Facebook, Twitter and ShareThis buttons:

Facebook

Facebook is simple.  It’s just a call to its XFBML parser.
FB.XFBML.parse();

ShareThis

Share this is also simple.
stButtons.locateElements();

Twitter

Twitter had a similar method in the past, but in new versions of their code the method was dropped.  So now you just have to reload the Twitter JS.  Not graceful, but it works.

(function(){
  var twitterWidgets = document.createElement(’script’);
  twitterWidgets.type = ‘text/javascript’;
  twitterWidgets.async = true;
  twitterWidgets.src = ‘http://platform.twitter.com/widgets.js’;
  document.getElementsByTagName(’head’)[0].appendChild(twitterWidgets);
})();

I know I’m going to use these again.  So here they are.  Hopefully, this cures someone else’s headache in the future.

Contact Me

sean@seanmccambridge.com

Twitter: @mccambridge

LinkedIn profile

A LOT OF PEOPLE HAVE ASKED about the background photo on this site. It was taken on the beach by Fort Moultrie on the harbor side of Sullivan's Island, SC. The old, wooden sea wall has been there as long as I've lived in Charleston. The beach is a great place to watch the ships and shrimpers come in and has one of the best views of downtown Charleston.