How to add Social Links Magento

One nice thing you should add to your Magento site is the Social Links.

Let your customers promote your products on twitter, facebook and more.


You can grab his code and paste it to your site

Your own code

This one is my favorite option. You can code the social links by your own.

Let's digg into this second option:

First of all Set template path hints to yes and you'll see wich file you'll have to edit. It just depens in your theme and where you want to place the code.

System -> Configuration -> Advanced -> Developer

I wanted to place my social links in the product detail page. I found my view.phtml.

It's very easy. We just need to know wich format the social network needs (facebook, twitter...).

I'm using 2 functions from magento:

Store URL

<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>
Code language: HTML, XML (xml)

Product Name (if needed)

<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
Code language: HTML, XML (xml)


3 examples using Facebook, Twitter and Delicious.

<a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>< ?=substr($_SERVER['REQUEST_URI'], 1)?>"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?/>frontend/base/theme156/images/facebook.jpg" alt="" /></a>
Code language: HTML, XML (xml)
<a href="<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>+< ?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>< ?=substr($_SERVER['REQUEST_URI'], 1)?>"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?/>frontend/base/theme156/images/twitter.jpg" alt="" /></a>
Code language: HTML, XML (xml)
<a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>< ?=substr($_SERVER['REQUEST_URI'], 1)?>&title=< ?php echo str_replace(" ", "+", $_helper->productAttribute($_product, $_product->getName(), 'name'));?>"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?/>frontend/base/theme156/images/delicious.jpg" alt="" /></a>
Code language: HTML, XML (xml)

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

  • hello

    I would like to add Twitter and Facebook like buttons to the product pages, and also add a tiny Twitter and Facebook icon to the Footer links. In the footer links I have a link that points to Twitter but I need an icon to the left of it as well.

    I followed your tutorial, and went to
    System -> Configuration -> Advanced -> Developer

    and I could not find “Set template path hints” and then change it to yes.

    It is what my magento ver has in
    System -> Configuration -> Advanced -> Developer
    Developer client restrictions
    Translate Inline
    Log Settings
    Java Scritpt Settings
    CSS Settings

    I would appreciate your support
    Thank you

  • Quicoto

    I have found the “set template path hints” to and when I changed it into:Yes, the whole store went crazy.

    I have added the code :

    <a href="<a href="$_product" rel="nofollow ugc">$_product</a>, $_product->getName(), 'name') ?>+"><img src="frontend/base/theme156/images/twitter.jpg" alt="" />
    Code language: HTML, XML (xml)

    the view.phtml, and it does not work. The product page stops working when I insert it.
    I pasted in the end of the data in that file.

    What Can I do to have it work?


    • Maybe you’re pasting the code “outside” the product loop.

      What means it can not retrieve the $_product info.

      Try to paste this code just right after where it prints the Product Title.

  • Quicoto

    thanks for your answers, I inserted the code into a few places in the view.phtml file, but it blocks the product every time.

    do you perhaps have the exact portion of the code that needs to proceed the insertion of the twitter code?

    Quicoto, I saw this part in the twitter code:
    “frontend/base/theme156/images/twitter.jpg” – here is theme156, I assume that I should insert a path where the twitter image is stored in the specific theme that I am using?

    I do appreciate your support very much

    • This is so weird 😕

      The code should work near the product name.

      A working code could be (same as posted above):

      <a href="<a href="" rel="nofollow ugc"></a>;?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>+<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>< ?=substr($_SERVER['REQUEST_URI'], 1)?>"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?/>frontend/YOUR_OWN_THEME/images/twitter.jpg" alt="" /></a>
      Code language: HTML, XML (xml)

      And yes, you need to change the folders / theme according to yours 😉


  • nope:(

    here is how the code looks in the view.phtml file:
    div class=”product-shop”>

    productAttribute($_product, $_product->getName(), ‘name’) ?>

    canEmailToFriend()): ?>

    I insterted the code for twitter just after in this sequence:

    $_product->getName(), ‘name’) ?>

    and I keep receiving the same error:

    Parse error: syntax error, unexpected ‘?’ in /home/backlink/public_html/app/design/frontend/default/f001/template/catalog/product/view.phtml on line 54

    I inserted the code with twitter into a few possible places in this particular part of code in view.phtml file, but no success yet:)


  • yes, just one more question:
    in Your code, there are two or three places where you wrote:
    (Mage_Core_Model_Store::URL_TYPE_WEB) – does the URL_TYPE_WEB means that I should put there the url of my store? sorry, if it is a bit naive.

    thank You!

  • Что подарить мужчине?. Подарите Кейс с 30 парами хлопковых носков наилучшего качества это то, что дейсвтительно нужно и пригодится всегда

  • Hi your article was very informative and worked for me in magento 1.7. But i want to display socialmedia button links just below the top links “My AccountMy WishlistMy CartCheckoutLog In”. Any idea how to accomplish this.

    cheers – Dimestation

    • Hi there,

      It works exactly the same way.

      First of all turn on the Magento Path Hints to see where are the files you need to change:

      Then just add the code in those files 😉

      Let me know if this helps,


      • Hi Rick

        This is what I did

        1) created a static block “header_links”

        <a title="Follow to Twitter" href="" rel="nofollow">Follow to Twitter</a> <a title="Follow to Facebook" href="" rel="nofollow">Follow to Facebook</a> <a title="Follow to LinkedIn" href="#" rel="nofollow">Follow to LinkedIn</a> <a title="Follow to WordPress" href="#" rel="nofollow">Follow to WordPress</a> <a title="Follow to Youtube" href="#" rel="nofollow">Follow to Youtube</a> <a title="RSS" href="#" rel="nofollow">RSS</a>
        Code language: HTML, XML (xml)

        2) added following lines
        below in /app/design/frontend/default/mytheme/layout/page.xml

        2) made a copy of links.phtml and named it header_links.phtml

        3) added the following lines

        getLayout()->createBlock(‘cms/block’)->setBlockId(‘header_links’)->toHtml(); ?>

        app/design/frontend/default/mytheme/template/page/html/header.phtml below getChildHtml(‘topLinks’) ?>

        But I am not getting any results. The same static block works in my footer.phtml. Not sure what I am missing.


    • Do you have the Magento Cache turned on?

      If it works in the footer but not there… maybe you’ve placed the code in the wrong place.

      Did you turn on the Path Hints?


  • Don’t try to edit the core files that will later create difficulties for you when any update occurs. Make your own custom module.

    ( function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); = id; js.src = ''; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"> getProduct(); ?> isSaleable()): ?> shouldRenderQuantity()): ?> <span></span> <input type="number" name="qty" id="qty" value="getProductDefaultQty() * 1 ?>" title="" class="input-text qty" data-validate="escapeHtml(json_encode($block->getQuantityValidators())) ?>" /> <button type="submit" title="" class="action primary tocart" id="product-addtocart-button"> <span></span> getChildHtml('', true) ?> isRedirectToCartEnabled()) : ?> { "#product_addtocart_form": { "Magento_Catalog/product/view/validation": { "radioCheckboxClosest": ".nested" } } } { "#product_addtocart_form": { "Magento_Catalog/js/validate-product": {} } }
    Code language: HTML, XML (xml)


Leave a Reply

Add <code> Some Code </code> if you need to.