Datafeedr Support Forums

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

Eric June 19th, 2012 09:13 AM

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

nzcid June 19th, 2012 04:16 PM

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.

Eric June 19th, 2012 04:19 PM

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.

nzcid June 19th, 2012 04:24 PM

Quote:

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

1800HART June 19th, 2012 05:26 PM

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/

Eric June 19th, 2012 06:28 PM

Hi
Quote:

Originally Posted by 1800HART (Post 32769)

Neither 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

1800HART June 19th, 2012 07:41 PM

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

// testing being only on http://hartmarket.com root store only.

Eric June 19th, 2012 08:44 PM

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

1800HART June 19th, 2012 08:58 PM

Quote:

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

ayorofrance June 20th, 2012 05:12 AM

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!

1800HART June 20th, 2012 06:16 AM

Quote:

Originally Posted by ayorofrance (Post 32782)
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 :D)

nzcid June 20th, 2012 06:24 AM

Quote:

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

(although, my extensive testing amounts to 1 try :D)

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.

ayorofrance June 20th, 2012 06:42 AM

Quote:

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

Eric June 20th, 2012 07:43 AM

Hi
Quote:

Originally Posted by 1800HART (Post 32778)
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 (Post 32782)
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

Eric June 20th, 2012 12:49 PM

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.

1800HART June 20th, 2012 10:57 PM

Quote:

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

1800HART June 20th, 2012 11:07 PM

Quote:

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

andrewjg June 21st, 2012 03:51 AM

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

nzcid June 21st, 2012 06:27 AM

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.


Eric June 21st, 2012 08:17 AM

Hi
Quote:

Originally Posted by 1800HART (Post 32824)
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 (Post 32830)
<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 (Post 32836)
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


All times are GMT -5. The time now is 06:53 PM.

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