How to add social buttons to Magento Product page


By default, there’s no social sharing button in Magento product page. How to add these buttons to your product page of your theme so that customer can share the products they love with their friends on social networks? Today we will learn method to add these buttons to product page of Magento with 3 popular social networks: Facebook, Twitter and Google Plus.

First, take a look at the picture below, we’re going to make that trick:

magento product demo page with social button

First we need to know where Product page template files are located in Magento folder:

As you can see, view.phptml is the file we’re looking for

1. Adding Facebook like or Share button to product page

To add Facebook like/share button, go to

facebook developer page button code

Next, click on Get Code to get your like button code
get code facebook like button
Now you can paste plugin code to where you want the button to appear on your product page. To make it like the demo picture, paste the code here:
add facebook like code to magento viewphml file

Save file and refresh your page to see the change

2. Add Tweet button to product page

For twitter, we have Tweet button, to add it to product page just do the same as like button.

First go to this url to create Tweet/follow button and get code

create tweet button for magento

After creating your button, copy the code and insert to view.phtml file


Now save file and refresh your page.

3. Add Google+ button to Magento product page

G+ button allows user to recommend their favorite content to Google Plus network

To generate the button you can go to

g plus button code for magento


Example code

Next, insert the code to view.phpml file to make it appear on your Magento product page




Social network is one of the most strong channel to boost your store’s brand awareness and it can bring valuable traffic. If you don’t have these buttons on your Magento site, then do it today.

Hope you find the tutorial helpful, feel free to let me know if you have any questions.

Rate this post


About Author

Daniel is a Magento developer with 5 years of experience with customizing Magento extensions, Magento templates. He's main author at Magento explorer


  1. Never try to edit the core files that will later create difficulties for you when any update occurs. Make your own custom module. Then go and override add to cart file after that go to facebook and get the code for like button then integrate it in add to cart file and do the same for other social media accounts.

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

    <input type="number"
    value="getProductDefaultQty() * 1 ?>"

    class="input-text qty"
    data-validate="escapeHtml(json_encode($block->getQuantityValidators())) ?>"

    <button type="submit"
    class="action primary tocart"

    getChildHtml('', true) ?>

    isRedirectToCartEnabled()) : ?>

    "radioCheckboxClosest": ".nested"

    "#product_addtocart_form": {
    "Magento_Catalog/js/validate-product": {}

Leave A Reply