PrestaShop social share buttons

social share prestashop 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!

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim