Add a Facebook like button to your Magento product view pages

  • Home /
  • Blog /
  • 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):

    H&O is expert in het oplossen van complexe Magento vraagstukken, maatwerk grafisch ontwerp en het bouwen van custom Magento modules.

    Als je op zoek bent naar een partner die je kan helpen met het beantwoorden van moeilijke Magento vragen, een maatwerk productimport voor je ontwikkeld of een custom Magento module voor je schrijft die jouw assortiment met een andere webshop koppelt, dan ben je aan het juiste adres. H&O heeft zich sinds 2007 verdiept in de techniek en ontwikkelingen van het e-commerce CMS, speelt een actieve rol in de community, heeft verschillende modules uitgebracht en heeft voor klanten uiteenlopende technische modules ontwikkeld. Ons kantoor is gevestigd in Roelofarendsveen, direct naast de A4 én slechts op 15 minuten afstand van Amsterdam. Neem contact met ons op en kom eens langs, dan bespreken we jouw vraagstuk!

    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.

    • 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?

    • Matrassen

      (nov 28)
      Reply to this comment

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

      Groetjes

    • 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?

    • 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

    • Ines Baeta Neves

      (nov 11)
      Reply to this comment

      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

        (nov 11)
        Reply to this comment

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

    • Richard Nijboer

      (nov 26)
      Reply to this comment

      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

      (dec 01)
      Reply to this comment

      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

      • Arne

        (dec 11)
        Reply to this comment

        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.

        • Richard Nijboer

          (dec 12)
          Reply to this comment

          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

    • Peter

      (mar 09)
      Reply to this comment

      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

    • Bas

      (apr 03)
      Reply to this comment

      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

        (apr 08)
        Reply to this comment

        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

    Reageren

    Topics
    Recent Comments

    • Thanks for your contribution, Cyril :)

      View comment 23 mei by Erwin Otten

    • In magento 1.7 i got solution with this :
      1. in the Model file. (/app/code/core/Mage/Catalog/Model/Observer.php)

      Function Name: _addCategoriesToMenu
           $categoryData       = array(
                            'name' => $category->getName(),
                            'id' => $nodeId,
                            'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
                            'is_active' => $this->_isActiveMenuCategory($category),
      // Add thumbnail 
                            'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getThumbnail()
                  ); 

      2.  in the Html folder. (app/code/core/Mage/Page/Block/Html/Topmenu.php)

      Function Name: _getHtml   
                        if (!$childLevel == 0){
                    $url       = false;
                    if (      $image = $child->getData('thumbnail')) {
                    $urls       = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
                          $html .= '<img src="'.$urls.'" />';
                          }
                  }
      just after       : "   $html .= '<a href="' . $child->getUrl() . '"><span>'
                      .       $this->escapeHtml($child->getName()) . '</span></a>'; " (near ligne 115) 
      View comment 23 mei by Cyril

    • Guys, if you are having issues with permissions, you have to access https://accounts.google.com/DisplayUnlockCaptcha first, with whatever account you are trying to login with.
      Once you do this, the module should start working

      View comment 09 apr by Blair

    • 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

      View comment 08 apr by Erwin Otten

    • Its Great!! Thanks!!

      View comment 06 apr by Surendra Vikram Singh

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

      View comment 03 apr by Bas
    Latest blog posts
    Op zoek naar een professionele en ervaren Magento specialist?
    Één partner voor ontwerp, techniek en onderhoud? Bekijk onze onderhoudsabonnementen.

    H&O
    Veenderveld 16
    2371 TV
    Roelofarendsveen
    info@h-o.nl
    www.h-o.nl
    071 744 0084


    Contact

    Bel mij terug

    Vul uw telefoonnummer in en we bellen u zo spoedig mogelijk terug.

    Contactgegevens

    H&O
    Veenderveld 20
    2371 TV
    Roelofarendsveen
    info@h-o.nl
    www.h-o.nl
    071 744 0084
    KvK Rijnland nr. 28119089
    BTW nr. NL818554071B01

    Nieuwe projecten

    Wilt u weten wat H&O kan betekenen voor uw Magento project? Stuur ons een mailtje:

    Paul Hachmang

    p.hachmang@h-o.nl

    Erwin Otten

    e.otten@h-o.nl

    Contactformulier