Adding Social Networking Buttons to Magento – Updated
Update: There has been a few updates to the code below, especially the Google Buzz code.
——-
I have been building a magento based site over the past few months for a new project I am working on with Ruth. The end product will be an online food store that sell Australian Gourmet Foods.
I spent a while searching around Google trying to figure out how to add social networking buttons into the products page. I basically wanted people to click “Share on Facebook”, “Tweet This” and more recently “Buzz This” and send the product name, the URL and any other text I wanted.
All you really need to know the two pieces of code below that will grab the product name and URL you need to insert into the URL of the code you are going to be placing on your page. I have already inserted this code into each URL.
- <?php echo $this->htmlEscape($_product->getName()) ?> = This code fetches the product name
- <?php echo $_product->getProductUrl() ?> = This code fetches the Product URL
I have added the below to the view.phtml page, found in templates/catalog/product. You’ll need to decide where you want to add it, so it might take a few times to get it right. Just copy the below code, paste it where you want it displayed on your product page and edit the bits in bold to suit your website.
<a title=”Send this page to Twitter!” href=”http://twitter.com/home?status=Check out the <?php echo $this->htmlEscape($_product->getName()) ?> at <?php echo $_product->getProductUrl() ?> @foodoAU” target=”_blank”><img src=”YOUR BUTTON HERE” alt=”Follow foodoAU on Twitter“/></a>
<a href=”http://www.facebook.com/sharer.php?u=<?php echo $_product->getProductUrl() ?>&t=Check+this+out” target=”_blank” title=”Share on Facebook”><img src=”YOUR BUTTON HERE” alt=”Share on Facebook”></a>
Google Buzz
<a href=”http://www.google.com/buzz/post?url=<?php echo $_product->getProductUrl() ?>&title=<?php echo $this->htmlEscape($_product->getName()) ?>&srcURL=YOUR URL&srcTitle=YOUR SITE NAME” target=”_blank” rel=”nofollow external” title=”Google Buzz This”><img src=”YOUR BUTTON” ” alt=”Google Buzz This!” /></a>
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Nice, clean and easy implementation, good job 🙂
thanks!
If you want to share the exact page you’re on, you need to get the variable for the current url and then call that variable in place of getUrl.
more info here: http://snippi.net/magento-get-current-url
Hi,
I have an ecommerce website with magento and I want to add facebook and twitter buttons to the home page. I have the “link” from facebook I need to add but I have no idea where I’m supposed to input that information to make the button show up on the main page. HELP PLEASE!
Thanks! 🙂
@rick – thanks I will take a look!!
@Terme – did you get this sorted out? If not drop me an e-mail, happy to help.
Thanks
Daniel
I am trying to have those small icons of twitter , facebook on the product pages.
Should I insert this code somewhere, if yes, where?
* htmlEscape($_product->getName()) ?> – Product name
* getProductUrl() ?>- Product URL
and what about the code, that is specific for Twitter, Facebook? Should the code be added just to the end of the view.phtml data?
I have added it there, and the product pages do not work.
Please Help:)
Nici
Hi Nicole,
Copy my examples. Just cut and paste the code where to want the images to display. All you have to do is enter upload your button and enter the code where it says YOUR BUTTON HERE
If you have any issues tweet me!
Thanks
Hi Daniel,
This is exactly what I needed! Thanks. I pasted the code exactly as instructed to view.phtml, but for some reason it adds the url of the page I am on to the beginning of the link.
d
I figured out the problem! When I copy he code above it inserts smart quotes into the code. I needed to replace them with regular quotes. Age old problem with those pesky quotes 🙂 Thanks for the code!!!
Hi there, this is great. Very simple and clean. I’m wondering if you have any experience with using addthis.com? I am trying to implement that code to my product pages in magento and I am having no luck at all following instructions from their site and other places online. Should be pretty simple it seems. But…
I am trying to add their “Toolbox + Facebook Like” module.
Thank you so much. Any help you can provide is SUPER appreciated.
Hello there Daniel!
This is how my view.phtml page looks like
helper(‘catalog/output’);
$_product = $this->getProduct();
?>
var optionsPrice = new Product.OptionsPrice(getJsonConfig() ?>);
getMessagesBlock()->getGroupedHtml() ?>
<form action="getAddToCartUrl($_product) ?>” method=”post” id=”product_addtocart_form”getOptions()): ?> enctype=”multipart/form-data”>
<input type="hidden" name="product" value="getId() ?>” />
getChildHtml(‘media’) ?>
productAttribute($_product, $this->htmlEscape($_product->getName()), ‘name’) ?>
canEmailToFriend()): ?>
<a href="helper(‘catalog/product’)->getEmailToFriendUrl($_product) ?>”>__(‘Email to a Friend’) ?>
getReviewsSummaryHtml($_product, false, true)?>
getChildHtml(‘tierprices’) ?>
getChildHtml(‘alert_urls’) ?>
getChildHtml(‘product_type_data’) ?>
hasOptions()):?>
isSaleable()): ?>
getChildHtml(‘addtocart’) ?>
helper(‘wishlist’)->isAllow() || $_compareUrl=$this->helper(‘catalog/product_compare’)->getAddUrl($_product)): ?>
__(‘OR’) ?>
getChildHtml(‘addto’) ?>
getChildHtml(‘addto’) ?>
getShortDescription()):?>
__(‘Quick Overview’) ?>
productAttribute($_product, nl2br($_product->getShortDescription()), ‘short_description’) ?>
getChildHtml(‘other’);?>
isSaleable() && $this->hasOptions()):?>
getChildChildHtml(‘container1’, ”, true, true) ?>
isSaleable() && $this->hasOptions()):?>
getChildChildHtml(‘container2’, ”, true, true) ?>
//
getChildHtml(‘description’)):?>
__(‘Product Description’) ?>
getChildHtml(‘additional’)):?>
__(‘Additional Information’) ?>
getChildHtml(‘upsell_products’) ?>
getChildHtml(‘product_additional_data’) ?>
Where do i insert your links for facebook, and twitter? and do i need to edit your link as well?
Thank you.
Thanks for this post!! It’s amazing.. I try than one more social modules on magento connect, but dont’ works.. 🙂 Thanks again..
My Google Buzz code throws an “URL contains illegal characters” when it shouldn’t. the URL it gives fills in all spaces with %20 which is what it should, but for some reason, Buzz doesn’t like that.
Please help. When I share at Facebook, the image doesn’t show up.
Which image does not show?
Hello there i don’t understand where exactly i’ve to insert this two lines
htmlEscape($_product->getName()) ?> = This code fetches the product name
getProductUrl() ?> = This code fetches the Product URL
Thanks!!
You don’t have to add those lines. They are already included in the code below.
can this code show statistics on button usage?
I see that app ID can be inserted to see statistics:
http://www.magentocommerce.com/magento-connect/MagePlace/extension/6476/facebook__like__button/ (see demo)
but I’m not sure if it’s hard to implement.
The Facebook link works fine, but I can’t understand why the Twitter link isn’t working properly:
http://www.industriallive.com/baldor-el1410t.html
Anyone have any ideas?…
lengel at industriallive dot com
Hello Daniel.i want to show multiple images of the magento product in facebook share dialod.only base image is coming.plzzzzz help me to solve this problem…….
waiting for ur reply.
thank you,,,,,
Does this work for the Community edition? I am looking for the directory path on my hosted site that has the path given and it does not look like it is. we are using siteground as the hoster and it provides the community edition for us.
Want some assistance to where this code can be placed on the community edition.
Thanks!
This should be the same for CE. You are looking for /app/design/frontend/default/default/template/ if you are using the default theme.
This is where I have located a file called view.phtml
/app/design/frontend/base/default/template/catalog/category
I would guess this is the location and file that needs to be updated to add the functionality?
Thats the one! Let me know how it goes, or drop me an e-mail daniel@danielfelice.com
when i use this product image is not showing up in sharelink
Thanks! Functioning properly
I have a magento store… I was able to load the social media buttons from magento panel but it just shows at product page.. not at the main web site… how can I load the buttons there…. to a template does not have any trace of them?
I need some help about adding the social media buttons to the magento main page… can you help me with that???
highly appreciated
Drop me an e-mail and I’ll see what I can do
How could i add these buttons in my wishlist page for sharing the wishlist url in social networking sites. since i am new to magento please help. Thanks in advance