Miguel.nz

Facebook and twitter buttons for ajax content

July 15, 2014

When I load content with ajax I lost, of course, some functions like the “facebook like button” or the “tweet this”. But there’s an easy way to add bind this functions again.

For example, I am adding the following template with mustache:

<article class="aj-article">
	<h3>{{post.title}}</h3>
	<div class="entry-content">{{post.post_content}}</div>
	<div class="social-content">
		<div class="fb-like" data-layout="button_count" send="false" data-href="{{post.permalink}}" data-show-faces="false">
		<a href="https://twitter.com/share" class="twitter-share-button" data-via="vuelvolar">Tweet</a>
	</div>
</article>

So then in the javascript file that you build html or render the mustche we can simply add this:

// Facebook button
FB.XFBML.parse();

// Twitter button
twttr.widgets.load();

Further reading for facebook and twitter.