Datafeedr Support Forums

Datafeedr Support Forums (/index.php)
-   Tips, Tricks & Tutorials (/forumdisplay.php?f=66)
-   -   Add Facebook Like Button to Product Detail Page (/showthread.php?t=7146)

Eric June 21st, 2012 08:33 AM

Quote:

Originally Posted by andrewjg (Post 32830)
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.

andrewjg June 21st, 2012 08:36 AM

Same problem:

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

Eric June 21st, 2012 08:40 AM

Quote:

Originally Posted by andrewjg (Post 32846)

Please see my last reply.

andrewjg June 21st, 2012 01:16 PM

Quote:

Originally Posted by Eric (Post 32845)
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.

nzcid June 21st, 2012 04:14 PM

Quote:

Originally Posted by Eric (Post 32842)
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.

nzcid June 21st, 2012 04:36 PM

Quote:

Originally Posted by andrewjg (Post 32866)
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.

Eric June 21st, 2012 06:30 PM

Quote:

Originally Posted by andrewjg (Post 32866)
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 (Post 32874)
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 (Post 32866)
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 (Post 32873)
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

nzcid June 21st, 2012 08:15 PM

Quote:

Originally Posted by Eric (Post 32879)
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.

Eric June 21st, 2012 09:28 PM

Hi
Quote:

Originally Posted by nzcid (Post 32881)
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

andrewjg June 22nd, 2012 03:21 AM

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

nzcid June 22nd, 2012 05:30 AM

Quote:

Originally Posted by Eric (Post 32882)
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 :)

Eric June 22nd, 2012 09:20 AM

Hi
Quote:

Originally Posted by andrewjg (Post 32883)
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 (Post 32885)
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

andrewjg June 22nd, 2012 09:32 AM

Hi Eric,

I'll give those guides a proper read.

But regarding this:

Quote:

Originally Posted by Eric (Post 32895)
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.

andrewjg June 22nd, 2012 09:48 AM

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.

Eric June 22nd, 2012 10:26 AM

Quote:

Originally Posted by andrewjg (Post 32903)
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?

/showthread.php?t=7168
/showthread.php?t=7169

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

Thanks,
Eric

e1entervick November 14th, 2012 04:37 PM

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.

1800HART November 17th, 2012 04:08 AM

Quote:

Originally Posted by e1entervick (Post 37531)
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.


All times are GMT -5. The time now is 01:03 PM.

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