Developmentables

A blog by the development team of Inventables

Posts tagged rails

Dec 27

AJAX Facebook Like Button

We recently added Facebook “Like” buttons to each of the product pages, but it significantly slowed down the page so we decided to implement the AJAX version of the Facebook Like Button.

Here are the steps to setup the Like button to load asynchronously:

1. Add the Facebook HTML element to the page:

2. Add Javascript to insert and load the Facebook Developer SDK asynchronously:

3. Add Facebook Open Graph meta tags to your pages so your Facebook Fans will receive clean product names and images for the pages they like. This is an example of what we added for each of the products:

4. Test and validate your Open Graph tags via the Facebook Linter 

5. Take a look at your page.  It will load just like normal:

Then magically, the Facebook Like button will appear moments later: