Using AJAX with twitter tweet buttons and facebook like buttons

Posted by Gav on 27 October 2011 | 0 Comments

Tags: facebook, twitter, ajax

Currently working on a website which uses ajax to reload parts of the page and the twitter tweet button and the facebook like button disappear and do not reload after calling an ajax request.

We need to use a simple bit of javascript to force the buttons to re-appear.

Twitter:

twttr.widgets.load()

Facebook:

try{
	FB.XFBML.parse(); 
}catch(ex){}

The following is a jQuery snippet of how the code should be used:

$.ajax({
	url: "reload-content.html",
	cache: false,
	success: function(html){
		$("#results").html(html);    
    	twttr.widgets.load();    
    	try{
			FB.XFBML.parse(); 
    	}catch(ex){}  
  	}
});

The example page where this is being used is http://shop.ecod.com.au/product/split-v-shirt. When clicking a colour, it uses ajax to reload the product area which is where the facebook like and twitter tweet buttons are located.