Adding Facebook “Like”, Twitter and Google +1 to Zen Cart™ (How To)
Given the tremendous benefit this could have for your online business and sales, we felt it almost necessary to provide you with these simple, easy to do, cut & paste instructions. By adding some SMO (social media optimization) and network marketing to your Zen Cart™ eCommerce platform, this will allow your customers to share your products with their Facebook® friends, co-workers, and others. It also makes use of Google’s +1. To note, given the code, the following instructions may also likely work with osCommerce as well. Chances are also good the same concept applies to Magento® and other popular shopping carts.
1 Go to http://www.addthis.com/ and choose the button layout/design you prefer. Next, you can either choose to create an addthis account for some tracking tools or not and simply use the code itself. If you decide to use addthis’s tracking tools, be sure to add Facebook’s XML namespace to your page’s HTML node . For this example, we will assume you chose not to use addthis’s tracking, using only Google® Analytics.
- NOTE: The Google +1 feature will be added manually on step 4.
2 Ok. You should now see your copy and paste code, similar to what is below:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e375a3b14d27934308fs89XXXXXXXX"></script>
<!-- AddThis Button END -->
3 To help ensure the social feature uses the appropriate product image, add the first line of code just above the entire snipet of code. This basically calls and refers the image source. The “/images/” folder is specific to Zen Cart, and may vary depending on your installation location. For example, it may also be “/mystore/images/”. Anyhow, you want the path to your product images.
<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/images/" . $products_image; ?>" />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e375a3b14d27934308fs89XXXXXXXX"></script>
<!-- AddThis Button END -->
4 Now, lets add the following line of code in order to add Google +1. Note the “medium” below to match the size of the other icons. Alternatives I believe there is also “small” and “large”.
<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/images/" . $products_image; ?>" />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e375a3b14d27934308fs89XXXXXXX"></script>
<!-- AddThis Button END -->
5 Now to place the finished code into your Zen Cart. Simply find your “tpl_product_info_display.php” file. The usual file location can be found by going to includes/templates/template_default/templates/tpl_product_info_display.php. Exactly where to place the social buttons within your products page is by preference. We suggest trying it out in different areas to see what you like best. Some like it before the product description, some after.
6 Keep a backup copy of your original “tpl_product_info_display.php” file. Upload the new version (FTP), clear cookies/history, refresh, and that’s it. You should now see the buttons. Test. Test. Test. Have fun, enjoy.
If you have any questions or need help, ask below. Be sure to leave a comment if you found this helpful.
Thank you so much! This works perfectly on my site.
You’re very welcome. Glad it helped
Thanks for the comment.
I looked all over to find how to have Facebook show the correct image when someone Liked the product and could not find it. Your code:
<link rel=”image_src” href=”<?php echo “http://” . $_SERVER['HTTP_HOST'] . “/images/” . $products_image; ?>” />
works awesome… Thank you soooo much. It now shows the Zen Cart product image everytime. Perfect!
You’re very welcome. Glad it helped.
Can you give an example for using this method with Magento?
Thanks!
DBB
Hi DBB,
Sure. Visit http://www.navspan.com/ecommerce/addthis-magento.htm. These are instructions for adding AddThis to your Magento. It should also fix the common problem of Facebook using the wrong product image.
Great Halloween costume site! However, I noticed that your product tabs do not work correctly in IE9. Unfortunately, given the high percentage of IE9 users, this could have a big impact on sales. As they are unable to view product information.
Let me know if I can be of any assistance. Hope this helps. Be sure to “Like” us.
Thank you.
Hi there!
Yes, we have a few outstanding issues on the site–weird quirky things like that tabs issue that we cannot seem to address properly.
Feel free to drop me a line if you’re interested in bidding on these issues (which it seems you are)!
Thanks,
DBB
how do you ad this to the site header in zencart?
At last! Someone with real expetirse gives us the answer. Thanks!
Because the above code which claire mentioned also worked for me, i’ve changed all my social media code over to addthis.. thank you very much.
IS there a way to add the fb, twitter icon to products like corecommerce for example has?
I’m sure there is a way. Probably pretty easy. Please provide your website address and specific requirements at http://www.navspan.com/contact-us/free-price-quote. Thank you.
Here you are. This is what i’m looking for. Anyone know how to put this line:
<link rel="image_src" href="” />
to Prestashop? Thank you.
Nice clean simple tutorial. I only have one quibble: at the end, you tell people to save the edited file back to the /template_default/ folder instead of to /includes/templates/your_template_name/templates/tpl_product_info_display.php, which would leave the untouched backup where it belongs in /template_default/.
Hello gjh42,
Glad you liked the article and thanks for the great suggestion! I will go ahead and update the article soon. You are correct, Zen Cart users will often have two locations for the file “tpl_product_info_display.php”. Simply edit the one being used for YOUR template;
/includes/templates/template_default/templates/tpl_product_info_display.php
/includes/templates/YOUR_template_name/templates/tpl_product_info_display.php
Great products btw, especially your “Protection Rune Ring” at http://www.futurelics.com/index.php?main_page=product_info&cPath=81_85&products_id=128. I see several easy things that can be done to improve your overall SEO, etc using Zen Cart. Let me know if I can be of any assistance. These small changes (SEO, etc) can help drive more customers to your products and increase online sales.
Look for another article soon about how to add Pinterest (http://www.pinterest.com) to your Zen Cart. Pinterest is becoming very popular for jewelry products like yours.
Thank you
My Zen Cart had this feature already apart of the shop but when I “like” a product the product’s image doesn’t show up on FB…what I am doing wrong?
I even added this:
<link rel=”image_src” href=”” />
here:
/includes/templates/YOUR_template_name/templates/tpl_product_info_display.php
and tried changing the “/images/” to “mytemplatename/images/”
still, I got nothing but my shopping cart image from the main page Nav.Main Bar.
HELP! I’m sure I must be doing something wrong-can you tell me what it is?
*pulling my hair out*
meant for that to read this:
<link rel=”image_src” href=”” />
Hi Brittany,
I emailed you some possible solutions to showing the correct product image when using the Facebook “Like” button.
Thank you
Hi, I added this awesome plugin into my zencart and love it. I was wondering how to modify it.. I’ll quickly explain: The zencart is in a fanpage tab on facebook (facebook uses iframes). When I post my product to my facebook wall I would like the link back to open up in the zencart on facebook… not in it’s own window, outside of facebook…
I thought this part of the code could be modified but now I’m thinking it’s not this: <link rel="image_src" href="” />
Sorry for being difficult, any insight would be amazing!
Kristen
Great and easy to install. My only problem is that the like button function does not allow comments. Like button, users should have the option to add a comment. How can I get this to function?
I am having the same issue as Kristen. When I share a product it shows the hosting url instead of the fan page url. So when you click the product it opens in its own window instead of going back to the fan page. Also, next to the product title it states ZenCart – Ecommerce…etc. Is there a way to remove that and just have the product title? Any help will be appreciated.
Hello,
Thanks for the tutorial. I do have a problem though. Everything displays and works fine in Firefox, Safari and Opera, but nothing shows up at all in Chrome or IE.
Any help would be welcome.
Regards, Howard
I was curious if you know the workaround for when you are using Image Handler 4 that automatically resizes the small image that is shown so its in a separate area under a different (generated) filename ?