Facebook Like Button - Adding a like button to your product detail pages

Eric · #1 June 22nd, 2012, 08:43 AM

In this tutorial I will show you how to add the Facebook Like button to your product detail pages.

Requirements:

You must be using version 3.8 or greater of the Datafeedr plugin

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

2. Add a new Text Module to the product detail view.

3. Click the theme icon (

) for the new Text Module.

4. Paste the following code into the Text Module:

HTML Code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="<?php echo datafeedr_tools()->current_url(); ?>" data-send="true" data-width="450" data-show-faces="true"></div>

5. Save the Text Module.

6. Go to the View menu. From the drop down list, choose "View <head> Elements".

7. Paste the following code into the <head> element area:

HTML Code:

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

Note that in this example, we are passing the full size image to Facebook. If you wish to pass the thumbnail to Facebook, you should change [product.image tag='0'] to [product.thumbnail tag='0'].

Additionally, if you are not masking the image URLs and you are not hosting them locally (ie. you are displaying product images directly from the merchant's site), you need to remove the following code from the previous snippet:

HTML Code:

http://<?php echo $_SERVER['HTTP_HOST']; ?>

8. Save.

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

10. Click the [Update Settings Only] button.

Now a Facebook Like button should appear on your product detail pages.

You can further configure the Like/Send button by following the tutorial here (under Step 1 - Get Like Button Code): http://developers.facebook.com/docs/.../plugins/like/

Eric

andrewjg · #2 June 22nd, 2012, 11:05 AM

"Liking" the Product page sent no product image to Facebook (I tried with and without http://<?php echo $_SERVER['HTTP_HOST']; ?>).

Please help.

Thanks

Eric · #3 June 22nd, 2012, 11:07 AM

Quote:

Originally Posted by andrewjg

"Liking" the Product page sent no product image to Facebook (I tried with and without http://<?php echo $_SERVER['HTTP_HOST']; ?>).

This is because you are missing a single quote in your <head> area:

It should be:

Code:

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

Eric

andrewjg · #4 June 22nd, 2012, 11:25 AM

Cool, it's working now.

I don't know why that keeps happening as I'm only copying and pasting!

Thank you Eric

Eric · #5 June 22nd, 2012, 11:27 AM

Hi

I'm looking at the source code of your site and it's still not configured properly.

You should be using this:

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

Eric

andrewjg · #6 June 22nd, 2012, 11:33 AM

OK I've updated it. Hopefully I'm all good now?

Thanks again.

Eric · #7 June 22nd, 2012, 11:35 AM

Quote:

Originally Posted by andrewjg

OK I've updated it. Hopefully I'm all good now?

Works for me now.

Shopnowbuyno · #8 October 15th, 2012, 08:20 AM

Same here can not get it to work.

http://www.dinnerwaretrends.com/stor...2200278823620/

Eric · #9 October 15th, 2012, 08:25 AM

Quote:

Originally Posted by Shopnowbuyno

Same here can not get it to work.

http://www.dinnerwaretrends.com/stor...2200278823620/

Looks good to me:

Shopnowbuyno · #10 October 15th, 2012, 09:37 AM

Weird, works in IE but does not work on my computer w/ Firefox, but works in Firefox on my laptop. Cleared cache & cookies on computer. Anyway looks like it works, thanks Eric.

Eric · #11 October 15th, 2012, 09:41 AM

Works in Chrome. I liked it and the image showed up on my wall.

ponypraat · #12 December 5th, 2012, 07:32 AM

Dear Eric,

I did what you described above but I don't get the product send to FB. What have I done wrong?. You can see a product detailpage on: http://www.paardensport-shop.nl/stor...6400194045629/

I have also added a widget to like us and this could be for our homepage, but another photo shows up.

Miranda

Eric · #13 December 5th, 2012, 08:52 AM

Hi,

You need to use this code:

HTML Code:

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

You currently have this:

HTML Code:

<meta property="og:image" content="[product.thumbnail tag='0']" />
<meta property="og:title" content="[product.name]" />

Also, your Yoast SEO plugin should be disabled on your store page. It's causing a conflict. You need to add the following code to your theme's functions.php file:

PHP Code:


			
function dfr_remove_wpseo_canonical( $canonical ) {
    if (is_dfr()) {
        $canonical = false;
    }
    return $canonical;
}
add_filter( 'wpseo_canonical', 'dfr_remove_wpseo_canonical' );

Eric

ponypraat · #14 December 5th, 2012, 10:51 AM

Oke, I have changed the header code and added to the functions.php but it is still the same.

Eric · #15 December 5th, 2012, 11:07 AM

Hi,

Your Yoast stuff is still appearing in your Store pages. Can you paste your functions.php file here?

Eric

ponypraat · #16 December 5th, 2012, 11:29 AM

Here my functions.php

<?php
/* Load the Theme class. */
require_once (get_stylesheet_directory() . '/framework/theme.php');

$theme = new Theme();
$options = include(get_template_directory() . '/framework/info.php');
$options['theme_child_name'] = 'Striking Child';
$options['theme_slug'] = 'striking';

$theme->init($options);

function theme_require_once($file){
$child_file = str_replace(get_template_directory(),get_styleshee t_directory(),$file);
if(file_exists($child_file)){
require_once($child_file);
}else{
require_once($file);
}
}

function theme_enqueue_child_style(){
wp_enqueue_style('theme-child-style', get_stylesheet_directory_uri(). '/style.css',array('theme-style','theme-skin'),false,'all');
}
add_action('wp_print_styles', 'theme_enqueue_child_style');

function theme_child_cufon_fonts($fonts){
$child_fonts = array();
$font_files = glob(THEME_CHILD_FONT_DIR."/*.js");
if(!empty($font_files)){
foreach($font_files as $font_file){
$file_content = file_get_contents($font_file);
if(preg_match('/font-family":"(.*?)"/i',$file_content,$match)){
$file_name = basename($font_file);
$child_fonts[$file_name] = array(
'font_name' => $match[1],
'file_name' => $file_name,
'url' => THEME_CHILD_FONT_URI.'/'.$file_name
);
}
}
}
$fonts = array_merge($fonts, $child_fonts);
return $fonts;
}
add_filter('theme_cufon_fonts', 'theme_child_cufon_fonts');

function theme_child_fontface_fonts($fonts){
$child_fonts = array();
$fontface_dir_files = glob(THEME_CHILD_FONTFACE_DIR.'/*');
if(!empty($fontface_dir_files)){
$font_dirs = array_filter($fontface_dir_files, 'is_dir');
if(!empty($font_dirs)){
foreach($font_dirs as $dir){
$stylesheet = $dir.'/stylesheet.css';
if(file_exists($stylesheet)){
$file_content = file_get_contents($stylesheet);
if( preg_match_all("/@font-face\s*{.*?font-family\s*:\s*('|\")(.*?)\\1.*?}/is", $file_content, $matchs) ){
foreach($matchs[0] as $index => $css){
$font_folder = basename($dir);
$child_fonts[$font_folder.'|'.$matchs[2][$index]] = array(
'folder' => $font_folder,
'name' => $matchs[2][$index],
'css' => $css,
'dir' => THEME_CHILD_FONTFACE_DIR. '/'.$font_folder.'/stylesheet.css',
'url' => THEME_CHILD_FONTFACE_URI. '/'.$font_folder.'/stylesheet.css',
);
}
}
}
}
}
}

$fonts = array_merge($fonts, $child_fonts);
return $fonts;
}
add_filter('theme_fontface_fonts', 'theme_child_fontface_fonts');

/*
You can add your custom functions below
*/

function dfr_get_brands() {
global $wpdb;
$brands = $wpdb->get_results("SELECT brand FROM ".$wpdb->prefix."dfr_shop_products GROUP BY brand");
$html = '<option value="">Zoek op Merk </option>';
foreach ($brands as $brands) {
if (trim($brands->brand) != "") {
$selected = (strip_tags(stripslashes($_GET['brand']))==$brands->brand) ? ' selected="selected"' : '';
$html .= '<option value="'.$brands->brand.'"'.$selected.'>'.$brands->brand.'</option>';
}
}
return $html;
}

function dfr_get_merchants() {
global $wpdb;
$merchants = $wpdb->get_results("SELECT merchant, merchant_id FROM ".$wpdb->prefix."dfr_shop_products GROUP BY merchant");
$html = '<option value="">Select a merchant</option>';
foreach ($merchants as $k => $v) {
if (trim($v->merchant) != "") {
$selected = (strip_tags($_GET['merchant_id'])==$v->merchant_id) ? ' selected="selected"' : '';
$html .= '<option value="'.$v->merchant_id.'"'.$selected.'>'.$v->merchant.'</option>';
}
}
return $html;
}

function dfr_get_networks() {
global $wpdb;
$networks = $wpdb->get_results("SELECT network, net_id FROM ".$wpdb->prefix."dfr_shop_products GROUP BY net_id");
$html = '<option value="">Select a network</option>';
foreach ($networks as $k => $v) {
if ($v->net_id > 0) {
$selected = (strip_tags($_GET['net_id'])==$v->net_id) ? ' selected="selected"' : '';
$html .= '<option value="'.$v->net_id.'"'.$selected.'>'.$v->network.'</option>';
}
}
return $html;
}

function dfr_remove_wpseo_canonical( $canonical ) {
if (is_dfr()) {
$canonical = false;
}
return $canonical;
}
add_filter( 'wpseo_canonical', 'dfr_remove_wpseo_canonical' );

ponypraat · #17 December 5th, 2012, 12:48 PM

Hey Eric,

I didn't change anything after my previous post but it works now!!!

So anyway, thanks for your help!

Miranda

MediaExpress · #18 April 21st, 2013, 02:14 PM

Hello,

Images from my store do not apper on facebook posts

Please help - www.totalzone.us

Eric · #19 April 21st, 2013, 02:39 PM

Hi,

Welcome to the forums!

Can you try switching your Permalink settings to something other than Default. You can do that here: WordPress Admin Area > Settings > Permalinks

Eric

MediaExpress · #20 April 22nd, 2013, 03:14 AM

Hello Erick,

My curent Permalink setting its not a Deault
I Have Custom Structure http://totalzone.us/%category%/%postname%/

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Facebook Like Button - Adding a like button to your store's front page	Eric	Tips, Tricks & Tutorials	2	March 13th, 2014 06:23 PM
Add Facebook Like Button to Product Detail Page	Eric	Tips, Tricks & Tutorials	36	November 17th, 2012 04:08 AM
Facebook "like" button in product detail page	charlesk	Questions	12	June 19th, 2012 09:15 AM
Adding a back button to your Product Detail page	ayorofrance	Tips, Tricks & Tutorials	9	June 2nd, 2011 11:09 AM
Detail Button	doggybiz	Problems	8	January 12th, 2011 12:14 PM