How to add social sharing buttons on Product Details page in magento template

With the popularity of the social networking, it is becoming more and more common to integrate aspects from social media tools such as Twitter, Facebook, Google plus, etc into e-commerce stores, such as those powered by the Magento platform. Social media can provide a fantastic opportunity for e-commerce store owners to participate and engage with existing and potential customers while increasing the awareness of their products among a wider audience.

 

We will provide one small example to add social sharing buttons for Product Details page. Please look image below.

Open your Product Details template file via directory, seen below.

app
 + design
    + frontend
       + your_package_name  (package)
          + your_theme_name  (theme)
             + template
                + catalog
                   + product
                      + view.phtml

1. Add Facebook like button

The Like button is the quickest way for people to share content with their friends. A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. Go to  to get facebook like button code.

After click Get Code button you need copy plugin code on lightbox and paste it into template file. Look at image below.

Refresh your page.

2. Add Tweet button

The Tweet Button is a small widget which allows users to easily share your website with their followers. This page is for developers and users who wish to build their own Tweet Buttons. Same with Facebook like button, you need add this code below to template file.

<!-- Tweet Button -->
<div class="socialSharing twitterButton">
     <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="MagenMarket"></a>
     <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>

You can go to url  for more details. Look on image below.

Refresh your page.

3. Add Google+ button

Google plus button let visitors recommend your content on Google Search and share it on Google+.

Go to  for details. Seen image below for example.

<!-- Google +1 Button -->
<div class="socialSharing googlePlusOneButton">
     <g:plusone annotation="bubble" width="100" size="medium"></g:plusone>
     <script type="text/javascript">
           (function() {
                 window.___gcfg = {lang: 'en'}; // Define button default language here
                 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                 po.src = 'https://apis.google.com/js/plusone.js';
                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
     </script>
</div>

Refresh your page.