Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old June 22nd, 2012, 08:43 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default 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.

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
  #2  
Old June 22nd, 2012, 11:05 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

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

Please help.

Thanks

Last edited by andrewjg : June 22nd, 2012 at 11:06 AM.
  #3  
Old June 22nd, 2012, 11:07 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by andrewjg View Post
"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
  #4  
Old June 22nd, 2012, 11:25 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

Cool, it's working now.

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

Thank you Eric
  #5  
Old June 22nd, 2012, 11:27 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #6  
Old June 22nd, 2012, 11:33 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

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

Thanks again.
  #7  
Old June 22nd, 2012, 11:35 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by andrewjg View Post
OK I've updated it. Hopefully I'm all good now?
Works for me now.
  #8  
Old October 15th, 2012, 08:20 AM
Shopnowbuyno Shopnowbuyno is offline
 
Join Date: Sep 2012
Posts: 17
Default

Same here can not get it to work.

http://www.dinnerwaretrends.com/stor...2200278823620/
  #9  
Old October 15th, 2012, 08:25 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by Shopnowbuyno View Post
Looks good to me:
  #10  
Old October 15th, 2012, 09:37 AM
Shopnowbuyno Shopnowbuyno is offline
 
Join Date: Sep 2012
Posts: 17
Default

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.
  #11  
Old October 15th, 2012, 09:41 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Works in Chrome. I liked it and the image showed up on my wall.
  #12  
Old December 5th, 2012, 07:32 AM
ponypraat ponypraat is offline
 
Join Date: Nov 2012
Posts: 188
Default

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
  #13  
Old December 5th, 2012, 08:52 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #14  
Old December 5th, 2012, 10:51 AM
ponypraat ponypraat is offline
 
Join Date: Nov 2012
Posts: 188
Default

Oke, I have changed the header code and added to the functions.php but it is still the same.
  #15  
Old December 5th, 2012, 11:07 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

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

Eric
  #16  
Old December 5th, 2012, 11:29 AM
ponypraat ponypraat is offline
 
Join Date: Nov 2012
Posts: 188
Default

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' );
  #17  
Old December 5th, 2012, 12:48 PM
ponypraat ponypraat is offline
 
Join Date: Nov 2012
Posts: 188
Default

Hey Eric,

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

So anyway, thanks for your help!

Miranda
  #18  
Old April 21st, 2013, 02:14 PM
MediaExpress MediaExpress is offline
 
Join Date: Apr 2013
Posts: 22
Default

Hello,

Images from my store do not apper on facebook posts
Please help - www.totalzone.us
  #19  
Old April 21st, 2013, 02:39 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #20  
Old April 22nd, 2013, 03:14 AM
MediaExpress MediaExpress is offline
 
Join Date: Apr 2013
Posts: 22
Default

Hello Erick,

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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

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


All times are GMT -5. The time now is 11:35 PM.


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