Facebook Images Meta Tag vs AddThis

[missesbeehaven]

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

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.

Can anyone point me in the right direction please

Cheers
Melanie

[BassFace]

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 if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->

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.

[BassFace]

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.

[BassFace]

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.

[maxus]

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?

[khopek]

This fix doesn't seem to work for me

[Unicorn]

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.

[Unicorn]

YES!!! I DID IT!

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

[cuysan]

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

[explorer1979]

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 /