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
  #21  
Old June 21st, 2012, 08:33 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
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.
Also, as per my first post, you must be using version 3.8 or greater of the Datafeedr plugin. You are using 3.7.
  #22  
Old June 21st, 2012, 08:36 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

Same problem:

http://store.cheap-computing.com/sto...5701110795420/
  #23  
Old June 21st, 2012, 08:40 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
Please see my last reply.
  #24  
Old June 21st, 2012, 01:16 PM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

Quote:
Originally Posted by Eric View Post
Also, as per my first post, you must be using version 3.8 or greater of the Datafeedr plugin. You are using 3.7.
D'oh! Amateur mistake! I was sure I had 3.8. Apologies!

Also...

1. Any idea why there is such a big gap between the Like button and the breadcrumb trail?

http://store.cheap-computing.com/sto...7801471608370/

2. I implemented the "category" Facebook Like button and, curiously, it has changed the background colour of the site to black (but it's blue under everything else such as the "product" view): http://store.cheap-computing.com/sto...egory/desktops.

Thanks.

Last edited by andrewjg : June 21st, 2012 at 01:29 PM.
  #25  
Old June 21st, 2012, 04:14 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
HiThis thread is about Facebook Like. Please open a new thread for other questions not related to Facebook Like.

Try changing this to:
HTML Code:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
You'll need to provide a URL to the page in question.

Eric
My mistake Eric

http://www.chinawholesalectronics.co...urity-cameras/

The button shows in all categories so it is not just that one. Image is hosted on my server.
  #26  
Old June 21st, 2012, 04:36 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by andrewjg View Post
D'oh! Amateur mistake! I was sure I had 3.8. Apologies!

Also...

1. Any idea why there is such a big gap between the Like button and the breadcrumb trail?

http://store.cheap-computing.com/sto...7801471608370/

2. I implemented the "category" Facebook Like button and, curiously, it has changed the background colour of the site to black (but it's blue under everything else such as the "product" view): http://store.cheap-computing.com/sto...egory/desktops.

Thanks.
I have been meaning to ask the same thing about that Gap between the like button and the beginning of the products.
  #27  
Old June 21st, 2012, 06:30 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by andrewjg View Post
1. Any idea why there is such a big gap between the Like button and the breadcrumb trail?

http://store.cheap-computing.com/sto...7801471608370/
Quote:
Originally Posted by nzcid View Post
I have been meaning to ask the same thing about that Gap between the like button and the beginning of the products.
Alternatively, you can put this code in your <head>:
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>
And this code in your Text module:
HTML Code:
<div class="fb-like" data-href="<?php echo datafeedr_tools()->current_url(true); ?>" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>
This appears to remove the padding and add additional functionality.

You can use the generator here: http://developers.facebook.com/docs/.../plugins/like/ under "Step 1 - Get Like Button Code". Just make sure to set the data-href to "<?php echo datafeedr_tools()->current_url(true); ?>"

Quote:
Originally Posted by andrewjg View Post
2. I implemented the "category" Facebook Like button and, curiously, it has changed the background colour of the site to black (but it's blue under everything else such as the "product" view): http://store.cheap-computing.com/sto...egory/desktops.
You are missing a double quote in your <head> section:



Quote:
Originally Posted by nzcid View Post
The button shows in all categories so it is not just that one. Image is hosted on my server.
One of my tests worked. I'm guessing you have tested this in a few different categories either before you added the <meta> tag to your <head> or before a category image was added. Unfortunately, Facebook caches things like crazy. So, I believe that it's storing some old image information from your previous tests. I did get it to work with one of your categories and that's what makes me think that it is working correctly but you tested it when it wasn't set up properly and those results have been cached.

Eric
  #28  
Old June 21st, 2012, 08:15 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Alternatively, you can put this code in your <head>:
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>
And this code in your Text module:
HTML Code:
<div class="fb-like" data-href="<?php echo datafeedr_tools()->current_url(true); ?>" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>
This appears to remove the padding and add additional functionality.

You can use the generator here: http://developers.facebook.com/docs/.../plugins/like/ under "Step 1 - Get Like Button Code". Just make sure to set the data-href to "<?php echo datafeedr_tools()->current_url(true); ?>"

You are missing a double quote in your <head> section:



One of my tests worked. I'm guessing you have tested this in a few different categories either before you added the <meta> tag to your <head> or before a category image was added. Unfortunately, Facebook caches things like crazy. So, I believe that it's storing some old image information from your previous tests. I did get it to work with one of your categories and that's what makes me think that it is working correctly but you tested it when it wasn't set up properly and those results have been cached.

Eric
Hey Eric

Okay I will leave things for a while and then test the like button again with Mr FB and see what image it uses.

As far as the other issue - the gap - I am simply not a fan of adding extra code into a theme as when it updates it breaks again. And if you are running multi sites you have to remember to add the code again to all these sites.

I understand Team that not every situation or circumstances can be programmed into a piece of software as it is dependant on outside influences such as Mr FB.

Still I think if you are going to build FB or any other Social Network into the plug-in then it should not require the users to add extra coding into their themes.

Seeing your response I am going to leave it as it is for the reasons given.
  #29  
Old June 21st, 2012, 09:28 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by nzcid View Post
Still I think if you are going to build FB or any other Social Network into the plug-in then it should not require the users to add extra coding into their themes.
You don't have to add extra code into your theme at all. You simply need to add the <div id="fb-root"></div>... line into your <head> elements section within the Factory. It's just an alternative to the way I initially posted about but does not require users to add extra code into their theme.

Eric
  #30  
Old June 22nd, 2012, 03:21 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

Thanks Eric, definitely getting there!

When I click "Like" on a Category page, no image shows in Facebook. And when I click "Like" on a Product page, it uses my header as the image (which is far too wide).

Is it possible to make the code pick one of the product's images off the page and push that to Facebook?

I was going to replace ".image" with ".thumbnail", to see what happens...

Quote:
<meta property="og:image" content="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
...but the new code you provided me doesn't seem to reference ".image":

Quote:
<div class="fb-like" data-href="<?php echo datafeedr_tools()->current_url(true); ?>" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div>
Quote:
<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>
Failing that, on my website (as opposed to my Store which is set up as a sub-domain), I use this code...

Quote:
<meta property="og:image" content="http://www.cheap-computing.com/cheap-computing-fb.jpg" />
...to pull in this image...



...when the Like button is used. And it's the right size for Facebook.

But ideally it would grab a product image instead. Is this possible?

Thanks

Last edited by andrewjg : June 22nd, 2012 at 03:28 AM.
  #31  
Old June 22nd, 2012, 05:30 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
HiYou don't have to add extra code into your theme at all. You simply need to add the <div id="fb-root"></div>... line into your <head> elements section within the Factory. It's just an alternative to the way I initially posted about but does not require users to add extra code into their theme.

Eric
Okay so I added this to the header in the factory

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>
Then added this line to the text file

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

Removed everything else from the text file first though and now we have a like and send button.



http://www.chinawholesalectronics.co...id-os-tablets/

So have I done this correctly as there is a lot going on here

Last edited by nzcid : June 22nd, 2012 at 05:34 AM.
  #32  
Old June 22nd, 2012, 09:20 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by andrewjg View Post
When I click "Like" on a Category page, no image shows in Facebook. And when I click "Like" on a Product page, it uses my header as the image (which is far too wide).
I don't believe you've added the correct <meta> code to your <head> elements.

Quote:
Originally Posted by nzcid View Post
So have I done this correctly as there is a lot going on here
@ALL

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 post here.

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)

These should help clear things up.

Eric
  #33  
Old June 22nd, 2012, 09:32 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

Hi Eric,

I'll give those guides a proper read.

But regarding this:

Quote:
Originally Posted by Eric View Post
I don't believe you've added the correct <meta> code to your <head> elements.
I used the code you provided after I said that the Facebook "Like" button had a large gap underneath it.
  #34  
Old June 22nd, 2012, 09:48 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

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

And "Liking" the Category page also sent no image to Facebook. Changing [category.image] to [category.thumbnail] just made it send my Store's logo to Facebook, which doesn't fit at all.

Last edited by andrewjg : June 22nd, 2012 at 09:50 AM.
  #35  
Old June 22nd, 2012, 10:26 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
I followed the guides you linked to Eric. "Liking" the Product page sent no image to Facebook (I tried with and without http://<?php echo $_SERVER['HTTP_HOST']; ?>).

And "Liking" the Category page also sent no image to Facebook. Changing [category.image] to [category.thumbnail] just made it send my Store's logo to Facebook, which doesn't fit at all.
Can you please post your questions or problems in the thread that this is pertaining to?

http://www.datafeedr.com/forums/showthread.php?t=7168
http://www.datafeedr.com/forums/showthread.php?t=7169

Otherwise, things are going to get really messy really fast.

Thanks,
Eric
  #36  
Old November 14th, 2012, 04:37 PM
e1entervick e1entervick is offline
 
Join Date: Nov 2012
Posts: 2
Default

A non-programming alternative to "Like" buttons is using the AddThis plugin for WP (if using WP) or by pasting the AddThis code in to your page. This would have people the ability to share that individual product/category via multiple social networks.
  #37  
Old November 17th, 2012, 04:08 AM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by e1entervick View Post
A non-programming alternative to "Like" buttons is using the AddThis plugin for WP (if using WP) or by pasting the AddThis code in to your page. This would have people the ability to share that individual product/category via multiple social networks.
Off the shelf wordpress plugins do not always work because you are on one page ... /store ... so when visitors click the share button on the product detail page, all they are doing is sharing the front page of your store. This is a good exercise to first get it to work properly, and self-improvement how it works under the hood, with your coding in the views.
__________________
| Shop @ HART Markets | Twitter |
 


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 06:08 PM.


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