Add a Facebook like button to your Magento product view pages

Add a Facebook like button to your Magento product view pages

Ever wondered how to add a facebook like button to product view pages in Magento? Are you tired of installing Modules using the extensive ways of the Magento Connect managers? Do you NOT want to invest in expensive Magento Widgets? Here is how to add a facebook like button to your product detail pages in minutes!

Add the following code to your template:

/app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml

Here is an example of the 2 minute implementation (screenshot is in dutch):

Paul Hachmang

Paul Hachmang is a Back-end Developer from Roelofarendsveen (The Netherlands) and co-founder of H&O. His weapons of choice include PHP, MySQL, HTML, Javascript, ExpressionEngine, Magento and a good cup of coffee. Contact Paul Hachmang

Comments

Edward

(mar 25)
Reply to this comment

Is is not:

/app/design/frontend/default/yourtemplate/catalog/product/view.phtml

but:

/app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml

But, thank you very much for the code.

Paul Hachmang

(mar 25)
Reply to this comment

Thx Edward, I’ve corrected my mistake!

alice

(mei 14)
Reply to this comment

thank you very much for the code. it’s fine.
it’s /app/design/frontend/default/yourtemplate/template/catalog/product/view.phtml
Marloes

(jun 30)
Reply to this comment

Thnx Paul! Really easy to implement and it works great! Is there a way to change the position of the “like”?
Guru

(jul 07)
Reply to this comment

Its Always advisable to use an module.
there is a 3 in one module available for Social sharing. i.e. Google+1 Button, Facebook LIke and Twitter Share.

you can check it at magento connect
http://www.magentocommerce.com/magento-connect/Modulesoft/extension/7258/google_1_plus_button_with_facebook_and_tweet

Hope the information is helpful
outsourceurdesign

(jul 13)
Reply to this comment

thanks! its really helpfull
pascal welten

(nov 24)
Reply to this comment

Top!
Bedankt. Werkt perfect. Kan je me ook vertellen hoe ik deze op mijn homepage gebruik?

NFCtagwriter

(dec 15)
Reply to this comment

Ik zou ook graag willen weten hoe die button op de homepage te gebruiken is!! Thx alvast.

Matrassen

(nov 28)
Reply to this comment

Bedankt voor de tutorial, ik ga het proberen werkende te krijgen!

Groetjes

Erwin Otten

(nov 28)
Reply to this comment

Geen dank, succes!

matrassen

(nov 28)
Reply to this comment

het is gelukt, super!
xander

(jan 16)
Reply to this comment

Dear Paul and/or Erwin,
I’ve tried it as well and it works, great! I only wish you could see also the right picture of the product you are liking. is that a simple change? Or did i place the code at the wrong spot? Hope to hear from you guys and thanks so far!
(answer may also be in dutch :o))

Erwin Otten

(jan 17)
Reply to this comment

Hi Xander! I don’t think this is possible with the like button, or am I wrong? At least it’s not something configurable in the embed.

Stefan

(mar 06)
Reply to this comment

Hi Erwin,
When i like a product it will show my footer image istead of the product image. How can i solve this? Thanks!
Magento Manchester

(apr 05)
Reply to this comment

Very useful little snippet. No need to install a facebook like plugin now for $49(!) Cheers!
Bart

(apr 25)
Reply to this comment

Hi, Bedankt voor je koppeling. Bij mij werkt het perfect. Echter verdwijnt mijn product. I don’ like. :) (oftewel de like button verschijnt, maar het product verdwijnt.
Wat gaat hier mis?
Dank je

Erwin Otten

(apr 27)
Reply to this comment

Hoi Bart. Da’s vreemd! Ik denk dat je niet de oorzaak moet zoeken in het bovenstaande stukje html (kan weinig fout aan gaan). Wellicht drukt de iframe die je op deze manier op de pagina plaatst bepaalde elementjes weg of heeft het te maken met floats, dat kan ik me wél voorstellen. Of heb je het probleem inmiddels al opgelost?

cash loan 13171

(mei 10)
Reply to this comment

YJkdqu, http://quickcashadvanceloanss.com cash advance ,82752, <a >cash loan</a> ,UdiukuZT, http://quickcashadvanceloanss.com quick cash, ;;),
Upendra jetavat

(mei 16)
Reply to this comment

i put this code in product description view.phtml file 87 num line and it works very nice
pay day loans online

(mei 18)
Reply to this comment

LiQcrX,