Support: 071 744 0084
Contact
071 744 0084
info@h-o.nl
Jos Verhaar - Magento support
Erwin Otten - New business
Paul Hachmang - Techniek

Add a Facebook like button to your Magento product view pages

By Erwin Otten 26 december 2010 Laat een reactie achter Ga naar reacties

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):

Edward

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

Thx Edward, I’ve corrected my mistake!

alice

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

Marloes

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

Guru

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

thanks! its really helpfull

pascal welten

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

NFCtagwriter

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

Matrassen

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

Groetjes

Erwin Otten

Geen dank, succes!

matrassen

het is gelukt, super!

xander

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

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

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

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

Bart

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

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?

Upendra jetavat

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

Ines Baeta Neves

Hi Paul and Erwin, thanks, it works great!
I just have a slight problem. My page works both in English and Portuguese. The like button and coment just appears in Portuguese! Any idea on what the problem is? I am new to magento. Thanks!!

Paul Hachmang

The language of the like button is localized based on the account logged in on Facebook or physical location of the computer.

Richard Nijboer

Bedankt voor de tip. Aangezien ik geen webdesigner ben en probeer Magento te begrijpen by learning while doing. Zou ik toch graag wat meer handreiking willen hebben waar deze code precies te plaatsen!

Richard Nijboer

Goedemiddag, ik ben sinds kort bezig met magento ( learning by doing) en heb de bovenstaande link willen invoegen maar heb eigenlijk geen idee waar. Help is welkom

Richard Nijboer

Beste Arne, ik ben echt een leek en heb dus geen idee waar je het over hebt. Ik log in doe mijn aanpassingen maar de genoemde Div, geen idee waar te vinden. Het zal wel niet moeilijk zijn, maar als niet webdesigner, toch lastig :-D

Arne

Richard, het is maar net waar je wil dat hij getoond wordt. In die DIV zet je dus de bovenstaande code. Je kan hem plaatsen bijvoorbeeld in de DIV (na de opening

<div class="product-name">) zodat hij na de producttitel getoond wordt.

Peter

Hi guys, looks great but there is no code available to add?
Hopefully yo read this quickly and put the code back in the page so I can use it

Paul Hachmang

Hi Peter, because of some changes at GitHub (they host our code snippets/gists) the code fragment was lost, re-added it :)

Bas

De code werkt perfect bij mij op een punt na, ik krijg na het liken het standaard magento plaatje te zien op mijn facebook pagina, ten plaats van het product.. wie kan mij helpen!? deze functie zou een grote toevoeging kunnen zijn aan mijn site. ik hoor het graag :-)

Erwin Otten

Hoi Bas,
Dit kan verschillende oorzaken hebben, maar meestal heeft het te maken met Facebook's caching. Wat je kunt proberen is even de facebook-cache te vernieuwen door de url van je pagina hier in te voeren, facebook update dan de thumbnail die je ziet bij het liken: http://developers.facebook.com/tools/debug

Jibber

Complimenten! Al een tijdje op zoek naar een makkelijke en effectieve oplossing! Bedankt

HJM

Makkelijk in te passen code, maar helaas op een iphone vervormt deze je site. Ik denk dat een &lt;iframe&gt; niet responsive is. Ik denk dat de breedte hier ergens in de code aangepast moet worden. Het zou mooi zijn dat het lettertype verkleind als je de site smaller maakt. Misschien een guru die hier een slimme en nette oplossing voor heeft

Laat een reactie achter