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 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="//www.facebook.com/plugins/like.php?href=<?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" 
scrolling="no" 
frameborder="0" 
style="border:none; overflow:hidden; width:450px; height:80px;" 
allowTransparency="true">
</iframe>
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 http://developers.facebook.com/docs/.../plugins/like/ under Step 1 - Get Like Button Code.


Eric
  #2  
Old June 19th, 2012, 04:16 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Hey Eric

Great work but what happens when you do not use product detail. I work like Michael. If the customer clicks on the Learn More or whatever button they go straight to the merchants site not to the product detail page.
  #3  
Old June 19th, 2012, 04:19 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

I don't know... since you don't have a product page I'm not sure of a way to create dozens of Like buttons on the same page which would be the case if you were displaying Like buttons on your category pages.
  #4  
Old June 19th, 2012, 04:24 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
I don't know... since you don't have a product page I'm not sure of a way to create dozens of Like buttons on the same page which would be the case if you were displaying Like buttons on your category pages.
No worries - I am sure something will come along
  #5  
Old June 19th, 2012, 05:26 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

THIS IS GREAT!! Now people can "LIKE" products in our store and the link will show up in their facebook timeline.

However, I have encountered problems with showing the image as well as the link. The best I can hypothesize is that only the smaller images are being shown. I've tried about 10 LIKES now, and have noticed that when the image is super large in my store, no image is carried forward to facebook. Try clicking the LIKE button on each product below.

EG

yes the LIKE button works for all images this size - http://software.hartmarket.com/store...7801211963303/

doesn't work - http://hartmarket.com/store/affiliat...7700000390114/

doesn't work - http://beefjerky.hartmarket.com/stor...7700000389751/
__________________
| Shop @ HART Markets | Twitter |
  #6  
Old June 19th, 2012, 06:28 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

HiNeither of these pages are loading for me... They simply time out.

But if it's an issue of the image being too large, try sending the thumbnail to Facebook instead of the image. That can be done by replacing this:

HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
With this:
HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.thumbnail tag='0']" />
Eric
  #7  
Old June 19th, 2012, 07:41 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

just tested that - and, it never worked either with the .thumbnail in the meta ...

// testing being only on http://hartmarket.com root store only.
__________________
| Shop @ HART Markets | Twitter |

Last edited by 1800HART : June 19th, 2012 at 07:52 PM.
  #8  
Old June 19th, 2012, 08:44 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

That's because you aren't hosting the images locally. Try changing the code to just this:

HTML Code:
<meta property="og:image" content=[product.image tag='0']" />
  #9  
Old June 19th, 2012, 08:58 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by Eric View Post
Hi

That's because you aren't hosting the images locally. Try changing the code to just this:

HTML Code:
<meta property="og:image" content=[product.image tag='0']" />
I should be hosting the images locally on this store (?shop=930) as per factory settings

http://hartmarket.com/store/affiliat...7700000390114/

However, the image when you right click shows this one .. ??
http://ecx.images-amazon.com/images/I/41IVDchCSZL.jpg

According to my datafeedr plugin (in tools/directories) images should be here:
/wp-content/blogs.dir/1/files/store/products/images

Should I try your suggestion? This almost looks too weird to not figure out first which could be the issue. Why isn't the image being stored on my server?

// Also, while I'm at it - I did change my RatLvr.com and 2 others that were Domain mapped to NOT store images locally and just use the default - does this v.3.8.4144 fix the locally stored image problem on domain mapped sites? or, just the ability to use the plugin on a mapped domain and we should continue to NOT store images locally?

Thanks
HART
__________________
| Shop @ HART Markets | Twitter |
  #10  
Old June 20th, 2012, 05:12 AM
ayorofrance ayorofrance is offline
 
Join Date: Sep 2010
Posts: 430
Default

Any chance of adding something similar to the category pages?

In my shops the product detail are typically long tail keywords, but the category pages are my main keywords that I want to rank for...

E.g. for adidas shoes it's great to rank for a specific shoe, but the goal is to rank the category page for the term 'adidas shoes'...

Therefore it's important to be able to add social buttons to the category pages too...

Thanks!
__________________
WordPress Security - Is your WordPress secure? Get our FREE checklist and find out.

Easy-Email - Access ALL your email accounts with one login & synchronize automatically on all your computers.
  #11  
Old June 20th, 2012, 06:16 AM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by ayorofrance View Post
Any chance of adding something similar to the category pages?

In my shops the product detail are typically long tail keywords, but the category pages are my main keywords that I want to rank for...

E.g. for adidas shoes it's great to rank for a specific shoe, but the goal is to rank the category page for the term 'adidas shoes'...

Therefore it's important to be able to add social buttons to the category pages too...

Thanks!
this seems to work with category pages:
http://hartmarket.com/store/category...ate-marketing/

(although, my extensive testing amounts to 1 try )
__________________
| Shop @ HART Markets | Twitter |
  #12  
Old June 20th, 2012, 06:24 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by 1800HART View Post
this seems to work with category pages:
http://hartmarket.com/store/category...ate-marketing/

(although, my extensive testing amounts to 1 try )
No button shows up for me when I visited bro.. Correction tried a second time and the button came up.

I think I would be looking for all the socal networking buttons under each product not just on the category. Though as an interim solution iot may be worth having the button at the top of the category pages.

Also your web site takes a too long to load brother. I am sure you would loose visitors with that load time.

Last edited by nzcid : June 20th, 2012 at 06:28 AM.
  #13  
Old June 20th, 2012, 06:42 AM
ayorofrance ayorofrance is offline
 
Join Date: Sep 2010
Posts: 430
Default

Quote:
Originally Posted by nzcid View Post
I think I would be looking for all the socal networking buttons under each product not just on the category.
Would that not be more naturally placed on the product detail page?

I think loading a page with 36 products and, say, 5 social buttons for each product would not only kill your page load, but also scare your users away...

Just looking at article category pages in WordPress with social buttons on ten articles is a real mess...

Well, in my opinion anyways ;-)
__________________
WordPress Security - Is your WordPress secure? Get our FREE checklist and find out.

Easy-Email - Access ALL your email accounts with one login & synchronize automatically on all your computers.
  #14  
Old June 20th, 2012, 07:43 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by 1800HART View Post
I should be hosting the images locally on this store (?shop=930) as per factory settings
We make every attempt to download the image to your server when you have set it to store images locally. However, it's not always possible because some merchants block this type of behavior using image access controls. In these cases, we have to serve the image which is hosted on the merchant's site.

This is (my guess) of what is happening. And it might explain why Facebook can't grab the image, either. For these sites where it's impossible to download the image to your server, I suggest doing this.

OFF TOPIC: Also, your pages aren't loading for me again or they are just very slow loading. I had to wait a few minutes for this page to load: http://hartmarket.com/store/affiliat...7700000390114/

Quote:
Originally Posted by ayorofrance View Post
Any chance of adding something similar to the category pages
I'm assuming you mean just for the page itself and not for every product.

Regarding loading a Like for every product on a category page, I agree with ayorofrance, it would be overkill and what's the point when you do not use product detail anyway... what's the Like button going to link to? A product detail page that doesn't exist or that you do not want to have indexed?

Regarding adding the Like button to the category pages, yes this is possible. It's basically the same steps as outlined in my first post except:

1. You need to make the changes here: The Factory > Your Store > VIEWS > CATEGORY PAGE > Default

2. You need to pass the category image to the page instead of the product image in the <head> elements. Therefore your code will look either like this:
HTML Code:
<meta property="og:image" content=[category.image]" />
or this:
HTML Code:
<meta property="og:image" content=[category.thumbnail]" />
Depending on if you want to show the category image or category thumbnail when the Like button is clicked.

Eric
  #15  
Old June 20th, 2012, 12:49 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

If you want to add a Like button to each product in a Category, you can add the following code between the [product.each] and [product.end] tags in your Product list module:

HTML Code:
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . '/' . $product->site_link); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" 
scrolling="no" 
frameborder="0" 
style="border:none; overflow:hidden; width:450px; height:80px;" 
allowTransparency="true">
</iframe>
If you are having problems with that, you may need to check this line:

Code:
<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . '/' . $product->site_link); ?>
Let's break it down:
  • <?php echo - Open the PHP statement. Don't change.
  • urlencode( - We run the entire URL through a built in PHP URL encoder.
  • 'http://' . - This is the beginning of the URL. If you are using an SSL connection, it should be 'https://' .
  • $_SERVER['HTTP_HOST'] . - This is your site's domain name. If you need to change your domain name, you do that here.
  • '/' . - This is the forward slash / between your domain name and the beginning of the path in the URL.
  • $product->site_link - This is the path to the product page.
  • ) - Close the urlencode( function.
  • ; ?> - Close the PHP statement. Don't change.
  #16  
Old June 20th, 2012, 10:57 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by nzcid View Post
Also your web site takes a too long to load brother. I am sure you would loose visitors with that load time.
Yeah That's my summer project.

I simply have too much on my server and either have to add about 2GB 4GB or 8GB RAM to cover the CPU resources (i currently have 12GB) or, seriously shred all my sites to ease up on the random products, related links, random posts, fancy plugins, cron jobs, and about 10 other things I know that can contribute to the overload of RAM .. and piece meal some domains to separate hostings perhaps.

All proven and guaranteed upgrades do cost money however, and I'm hoping I can fix this without the upgrades.
__________________
| Shop @ HART Markets | Twitter |
  #17  
Old June 20th, 2012, 11:07 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by Eric View Post
HiWe make every attempt to download the image to your server when you have set it to store images locally. However, it's not always possible because some merchants block this type of behavior using image access controls. In these cases, we have to serve the image which is hosted on the merchant's site.

This is (my guess) of what is happening. And it might explain why Facebook can't grab the image, either. For these sites where it's impossible to download the image to your server, I suggest doing this.

OFF TOPIC: Also, your pages aren't loading for me again or they are just very slow loading. I had to wait a few minutes for this page to load: http://hartmarket.com/store/affiliat...7700000390114/
Thanks Eric ... This makes sense to me, and I will just let it go // at least the URL works!

What about for domain mapped URL's .. will it work to download the images to my own server now? What exactly was upgraded in v3.8 regarding domain mapping?

HART
__________________
| Shop @ HART Markets | Twitter |

Last edited by 1800HART : June 20th, 2012 at 11:09 PM.
  #18  
Old June 21st, 2012, 03:51 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

I followed the instructions but when I clicked on a product to load the product detail page, the page that loads is completely blank. Nothing at all appears! Big white screen.

I've put everything back so the store works again for now. But I'd like to make it work.

Store: http://store.cheap-computing.com/store
ID: 38131

This is what I put into a new Text module:

<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo datafeedr_tools()->current_url(true); ?>&amp;send=false&amp;layout=standard&amp;width=45 0&amp;show_faces=true&amp;action=like&amp;colorsch eme=light&amp;font&amp;height=80"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>

This is what I put into the head element:

<title>[product.name] | [category.name] | </title>
<meta name="description" content="[product.description]" />
<meta name="keywords" content="<?php echo str_replace(' ', ',', $product->name); ?>,<?php echo str_replace(' ', ',', $category->name); ?>" />
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']?>[product.image tag='0']" />

What is going wrong?

Thanks
  #19  
Old June 21st, 2012, 06:27 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Shop 35251

If I use either of these codes you put up it breaks the theme and I placed it in the view head elements. Something wrong with the code as when I place it in that field the end of the code turns read indicating an error.

Other part works great for the category and they now have the facebook like button with its little message - great work.



<meta property="og:image" content=[category.image]" />

<meta property="og:image" content=[category.thumbnail]" />.


Never mind found the error, there is a " missing before "[

Now the issue is the image it sent to FB is wrong - I have a category image but it appears to have used one from the products list - not sure.


Last edited by nzcid : June 21st, 2012 at 06:36 AM.
  #20  
Old June 21st, 2012, 08:17 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by 1800HART View Post
What about for domain mapped URL's .. will it work to download the images to my own server now? What exactly was upgraded in v3.8 regarding domain mapping?
This thread is about Facebook Like. Please open a new thread for other questions not related to Facebook Like.

Quote:
Originally Posted by andrewjg View Post
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']?>[product.image tag='0']" />
Try changing this to:
HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
Quote:
Originally Posted by nzcid View Post
Now the issue is the image it sent to FB is wrong - I have a category image but it appears to have used one from the products list - not sure.
You'll need to provide a URL to the page in question.

Eric
 


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 in product detail page charlesk Questions 12 June 19th, 2012 09:15 AM
Product Detail Page webmaster Questions 2 September 3rd, 2011 08:17 PM
Back button on Detail page caused problem with sidebar jdrom Problems 0 July 10th, 2011 10:50 PM
Adding a back button to your Product Detail page ayorofrance Tips, Tricks & Tutorials 9 June 2nd, 2011 11:09 AM
Get rid of the tag cloud on the product detail page ericnmon Questions 2 May 23rd, 2011 03:14 PM


All times are GMT -5. The time now is 04:39 AM.


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