PrestaShop social share buttons

Today I want to show you step - by - step how to create social share twitter, pinterest and tumblr buttons. This little and useful widget will apear on each store page. It mean that your customers will be able to share any page they want on their social media profiles. What you will need? Our free html block module .  Just download this free addon and install it in your prestashop store.

Floating social media buttons video

Prepare the floating block for buttons

In this step i want to show you how to add floating block where in the next steps we will add  twitter, pinterest and tumblr share  buttons. As i said before - please install the html block addon . Then open the module configuration page. From the available locations select "top" then paste there this code:

<div style="position: fixed; right: 50px; top: 50px;"> 
  <table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
    <tbody> 
      <tr> 
        // WE WILL CREATE SOCIAL BUTTONS HERE 
      </tr> 
    </tbody> 
  </table> 
</div>

You can of course customize the social share block position. Just manipulate with right:50px; and top:50px; values. (you can increase or decrease them to change the floating block position). Okay, now it's time to create social share buttons.

Twitter share button

Now please copy the code below into the <tr></tr> tags mentioned above. Code below is a Twitter share button with and hoover effect. After mouse over icon will be blue.

<td> 
  <center> 
    <a href="https://twitter.com/share" target="_blank" onclick="javascript:window.open(this.href,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="twitter-share" data-via="CherryRamon" data-related="davidchikm" data-count="none" data-hashtags="CherryRamon"><img src="https://lh3.googleusercontent.com/-r7gbyPyShrA/Uf26ZHgdbDI/AAAAAAAAE3A/OOGxJg7oLkQ/s800/twitter-32.png" title="Tweet it!" /> 
      <script type="text/javascript">
 // <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,
    'script', 'twitter-wjs'); // ]]> 
      </script> 
     </a> 
   </center> 
</td>

 Pinterest share button

Now we will add the pinterest share button. Just copy code below and paste it into the place where you pasted latest twitters share button code.

<td onmouseover="this.style.background="#CB2027"" onmouseout="this.style.background="#000000"" style="background-color: #000000; background-position: initial initial; background-repeat: initial initial;">
  <a href="javascript:void(run_pinmarklet1())">
    <img src="https://lh6.googleusercontent.com/-Pzyp_BnNyLg/Uf26YnKSOKI/AAAAAAAAE20/fqhuZtoWzFQ/s800/pinterest-32.png" title="Pin it!" style="margin: 0; padding: 0; border: none;" />
    <script type="text/javascript">// <![CDATA[
        function run_pinmarklet1() {
          var e=document.createElement('script');
          e.setAttribute('type','text/javascript');
          e.setAttribute('charset','UTF-8');
          e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
          document.body.appendChild(e);
        }
        // ]]>
    </script>
  </a>
</td>

Tumblr share button

Now it's time to the latest button: tumblr share. Copy the code below exactly as you copied codes for twitter and pinterest.

<td onmouseover="this.style.background="#2C4762"" onmouseout="this.style.background="#000000"" style="background-color: #000000; background-position: initial initial; background-repeat: initial initial;">
  <a href="http://www.tumblr.com/share" target="_blank" onclick="javascript:window.open(this.href,
 '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
    <img src="https://lh3.googleusercontent.com/-43ULVt12Q3k/Uf26Y2oizzI/AAAAAAAAE3E/TIcDLXWWYIs/s800/tumblr-32.png" title="Share on Tumblr" />
  </a>
</td>

That's all, now you can save changes. Below i attached whole code, if you aren't sure that you copied it well - just copy whole code, put into the textarea in the html block module and save changes.

<div style="position: fixed; right: 50px; top: 50px;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tbody>
<tr>
<td onmouseover="this.style.background="#00ACED"" onmouseout="this.style.background="#000000"" style="background-color: #000000; background-position: initial initial; background-repeat: initial initial;"><center><a href="https://twitter.com/share" target="_blank" onclick="javascript:window.open(this.href,
 '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="twitter-share" data-via="CherryRamon" data-related="davidchikm" data-count="none" data-hashtags="CherryRamon"><img src="https://lh3.googleusercontent.com/-r7gbyPyShrA/Uf26ZHgdbDI/AAAAAAAAE3A/OOGxJg7oLkQ/s800/twitter-32.png" title="Tweet it!" />
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// ]]></script>
</a></center></td>
<td onmouseover="this.style.background="#CB2027"" onmouseout="this.style.background="#000000"" style="background-color: #000000; background-position: initial initial; background-repeat: initial initial;"><a href="javascript:void(run_pinmarklet1())"><img src="https://lh6.googleusercontent.com/-Pzyp_BnNyLg/Uf26YnKSOKI/AAAAAAAAE20/fqhuZtoWzFQ/s800/pinterest-32.png" title="Pin it!" style="margin: 0; padding: 0; border: none;" />
<script type="text/javascript">// <![CDATA[
function run_pinmarklet1() {
 var e=document.createElement('script');
 e.setAttribute('type','text/javascript');
 e.setAttribute('charset','UTF-8');
 e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
 document.body.appendChild(e);
}
// ]]></script>
</a></td>
<td onmouseover="this.style.background="#2C4762"" onmouseout="this.style.background="#000000"" style="background-color: #000000; background-position: initial initial; background-repeat: initial initial;"><a href="http://www.tumblr.com/share" target="_blank" onclick="javascript:window.open(this.href,
 '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="https://lh3.googleusercontent.com/-43ULVt12Q3k/Uf26Y2oizzI/AAAAAAAAE3E/TIcDLXWWYIs/s800/tumblr-32.png" title="Share on Tumblr" /></a></td>
</tr>
</tbody>
</table>
</div>

If you have got any suggestions or just want to ask something - feel free to continue or start discussion in the comments below. Thanks!