Facebook Images Meta Tag vs AddThis

Hi,

I am using the Add This code on my products info page.

When the facebook share option is used the thumbnails for facebook are selected by facebook, however not the right images are selected.

After a little research I have found that there are Meta data that needs to be added to the common header tpl file.

As quoted by facebooks partner page:

In order to make sure that the preview is always correctly populated, you should add the tags shown below to your HTML. An example news story could have the following:

<meta name="title" content="Smith hails 'unique' Wable legacy" />
<meta name="description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

The meta name for title and descriptions are already in place within zencart, so that is okay.

I need to add the product image relative link to code, and this is where I am banning my head against the wall :frusty:

What is the code I need to enter so that zen cart adds the relavate product image being viewed to this code and not just one image like this facebook code explains.

EG: If I am viewing a particular product then the image link needs to be for that particular product not the same image product for the entire site.

<link rel="image_src" href="WHAT GOES HERE" />

Ive looked at the product info tpl and I can see:

($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php');

But that didnt work when I tried using that code.:yuck:

Can anyone point me in the right direction please :rolleyes:

Cheers
Melanie

I'm not using the Add This code like you mentioned, but I just added a FaceBook share link to my product pages.
I wanted the FaceBook Share link to show just under the product image and description. While I'm sure it's not perfect it seems to be working for me.

Note, I have all my product images in the main 'images' folder and the root of my ZenCart store is in the folder '/shop' and not at the root of my site.

In 'templates/your_template/templates/tpl_product_info_display.php; find```php

After that code, add the following code, I'll explain below.

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/shop/" . $products_image_medium; ?>"/>
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://b.static.ak.fbcdn.net/rsrc.php/zAB5S/hash/4273uaqa.gif) no-repeat top left; }</style><a href="http://www.facebook.com/share.php?u=<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . "?" . $_SERVER['QUERY_STRING'];?>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share <strong><?php echo $products_name; ?></strong> on Facebook</a>

If your store is at the root of your site, in the <link> section (for the FB thumbnail) instead of what I used:

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/shop/" . $products_image_medium; ?>"/>

you should be able to use this:

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/" . $products_image_medium; ?>"/>

Below is a screenshot of my product page with the resulting FB window that opens. You can also see I added the product name, in bold, to the FB link text. Hope this helps.

OK, I looked at this again. I found the Add This code (for the little Share bar with multiple social networking sites, right?).

I just put this right above the Add This code:

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/shop/" . $products_image_medium; ?>"/>

Just change the /shop/ part to point to the folder where your images are stored. (Or change to a single / if your shop is the root of your site.) $products_image_medium already has 'images/' in it, so you don't need that.

Then I thought, some of my products don't have an image, which would look boring on FB. So I created a 100x117 image called no_image.jpg and put it in the /images folder. Then, in place of the code mentioned in the last post add this line:

<?php $fb_image = ($products_image_medium) ? $products_image_medium : 'images/no_image.jpg'; ?>
<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/shop/" . $fb_image; ?>"/>

Then if your product has no image, the no_image.jpg will be shown instead.

Im include this code to my shop
But im use SEo mod and I mean it is why I can not include images to post on facebook

When Im try to share - I see picture in popup window... but when I post it - no images

Any idea?

This fix doesn't seem to work for me :(

Well, this did work when I had it in a subdirectory - but then I moved it to a new domain and root, and now it stopped working. "/" or "/images" is a no go.

YES!!! I DID IT! :D

Instead of "/", I wrote "/www/" and that took care of everything!

This method did not work for my site. Still looking for a solution...

Thx,

It work

Actually, if you want to using this with 3rd application, for example, "Add This"

Just copy the "Add This" Code to where position you like.

Then

Add this

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/test04/" . $products_image_medium; ?>"/>

Please change the test04 to other name if your zen cart under subdirectory

If you install Zen Cart on root directory, then change the test04 to /

Would love to know why facebook will not pick up the Zen images, this is going to be a BIG problem as Facebook takes over the web....there has to be something that can be done about this??? Anyone???

Kaboodle picks up the image from Zen Cart, no problem, I find it interesting that it takes a whole lot of extra work to get Facebook to.

Hi everyone,

I can confirm that the suggestion posted earlier in this topic works correctly.

The key for myself was that my images aren't stored in the /medium/ folder, so i had to use the $products_image instead.

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/path_to_images_folder_from_public_root/" . $products_image; ?>"/>

here is the best way to troubleshoot this, guaranteed you'll be able to make it work :)

paste the code directly above your addThis button. with your folder path replacing "path to images folder"

View Source on your page, find the line of code directly above the addthis button. Then see what URL it is trying to pull the image from. If there is no image at that path, correct your path until it works. Once it does. Facebook will pull it just fine.

Hope that helps.

Good luck...

pensive612:

Hi everyone,

I can confirm that the suggestion posted earlier in this topic works correctly.

The key for myself was that my images aren't stored in the /medium/ folder, so i had to use the $products_image instead.

Strange :dontgetit
It works in Firefox 3.6 but not in Opera 11.0 or IE 8.0

Do I have to add some other Meta Tags?

I added a new product and it worked in all three browsers with the new product.
The old products worked in Opera when I deleted the cookies but not in IE.
Strange but at last it works ;)

pensive612:

Hi everyone,

I can confirm that the suggestion posted earlier in this topic works correctly.

The key for myself was that my images aren't stored in the /medium/ folder, so i had to use the $products_image instead.

This worked great. Thank You! :clap:

Code:

<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/path_to_images_folder_from_public_root/" . $products_image; ?>"/>

tried this---actually all suggestions of codes and it will not work for my store. I installed it at another store and it works flawlessly when clicking the like button and sending it to facebook for her store...picture and all---but not mine

I checked viewsource and it shows the correct path which would be market/images/promos

have left the code to say /market/ and viewsource has correct link for the product:

http://fantasiesrealm.com/market/index.php?main_page=product_info&cPath=138_171&products_id=569

it gets sent to my facebook page with all its description but no image to be seen....ideas?

DarkAngel:

tried this---actually all suggestions of codes and it will not work for my store. I installed it at another store and it works flawlessly when clicking the like button and sending it to facebook for her store...picture and all---but not mine

I checked viewsource and it shows the correct path which would be market/images/promos

have left the code to say /market/ and viewsource has correct link for the product:

http://fantasiesrealm.com/market/index.php?main_page=product_info&cPath=138_171&products_id=569

it gets sent to my facebook page with all its description but no image to be seen....ideas?

I'm in the same boat! I've tried multiple combinations with no luck...:frusty:

Test Store product- HERE

mikestaps:

I'm in the same boat! I've tried multiple combinations with no luck...:frusty:

Test Store product- HERE

is yours this same mod? I like your button much better than that "like" thumb I toyed with removing that part---especially since get no image sent---and just leaving the link only that appears above.

DarkAngel:

is yours this same mod? I like your button much better than that "like" thumb I toyed with removing that part---especially since get no image sent---and just leaving the link only that appears above.

This is currently the mod I have installed for testing - http://www.zen-cart.com...=1705.
I am playing with making my own buttons to work with this... But it looks nice for now, if only the pictures would link over!