Datafeedr Support Forums

Datafeedr Support Forums (/index.php)
-   Tips, Tricks & Tutorials (/forumdisplay.php?f=66)
-   -   Facebook Like Button - Adding a like button to your product detail pages (/showthread.php?t=7168)

Eric June 22nd, 2012 08:43 AM

Facebook Like Button - Adding a like button to your product detail pages
In this tutorial I will show you how to add the Facebook Like button to your product detail pages.

  • 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); = id;
  js.src = "//";
  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="[]" />

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):


andrewjg 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.


Eric June 22nd, 2012 11:07 AM


Originally Posted by andrewjg (Post 32909)
"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:

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

andrewjg 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 June 22nd, 2012 11:27 AM


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']" />


andrewjg June 22nd, 2012 11:33 AM

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

Thanks again.

Eric June 22nd, 2012 11:35 AM


Originally Posted by andrewjg (Post 32917)
OK I've updated it. Hopefully I'm all good now? :o

Works for me now. :)

Shopnowbuyno October 15th, 2012 08:20 AM

Same here can not get it to work.

Eric October 15th, 2012 08:25 AM


Originally Posted by Shopnowbuyno (Post 36483)

Looks good to me:

Shopnowbuyno 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 October 15th, 2012 09:41 AM

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

ponypraat 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:

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


Eric December 5th, 2012 08:52 AM


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="[]" />

You currently have this:
HTML Code:

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

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;
add_filter'wpseo_canonical''dfr_remove_wpseo_canonical' ); 


ponypraat 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 December 5th, 2012 11:07 AM


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


ponypraat December 5th, 2012 11:29 AM

Here my functions.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';


function theme_require_once($file){
$child_file = str_replace(get_template_directory(),get_styleshee t_directory(),$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");
foreach($font_files as $font_file){
$file_content = file_get_contents($font_file);
$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.'/*');
$font_dirs = array_filter($fontface_dir_files, 'is_dir');
foreach($font_dirs as $dir){
$stylesheet = $dir.'/stylesheet.css';
$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 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!


MediaExpress April 21st, 2013 02:14 PM


Images from my store do not apper on facebook posts :(
Please help -

Eric April 21st, 2013 02:39 PM


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


MediaExpress April 22nd, 2013 03:14 AM

Hello Erick,

My curent Permalink setting its not a Deault
I Have Custom Structure

All times are GMT -5. The time now is 12:51 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.