View Single Post
Old June 19th, 2012, 09:13 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
Join Date: Feb 2008
Posts: 16,902
Smile Add Facebook Like Button to Product Detail Page

UPDATE: June 22, 2012

I've written 4 new tutorials for adding the Facebook Like button to specific areas in your store.

Please have a read as they are considerably different than my initial instructions below.

Adding a like button to your store's front page
Adding a like button to your product detail pages
Adding a like button to your category pages
Adding a like button to each product on the category page (ADVANCED)

Here's how to add a Facebook "Like" button to your product details page. This requires that you are using the Datafeedr plugin 3.8 or greater.

1. Go here: The Factory > Your Store > VIEWS > PRODUCT DETAIL > Default

2. Add a Text Module to the view (where you want the Like button to appear. Adding a Text module is optional but for this tutorial, we'll keep it simple).

3. Click the template icon ( ) for the new Text Module.

4. Copy and paste the following code into your Text module:
HTML Code:
<iframe src="//<?php echo datafeedr_tools()->current_url(true); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" 
style="border:none; overflow:hidden; width:450px; height:80px;" 
6. Save.

6. While you are still in the PRODUCT DETAIL view, go to the View menu and click the View <head> Elements link:

7. In the text area that appears, paste the following code at the end of the text area:

HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
8. Save.

9. Go here: WordPress Admin Area > Tools > Datafeedr

10. Click the [Update Settings Only] button.

Now the like button should be appearing on your pages like so:

You can learn more on how to configure the iframe here under Step 1 - Get Like Button Code.