I liked these buttons a while ago and always wanted to code it, just did yesterday and here I am sharing it with you, enjoy.
1- Add this to your header: (Make sure you edit the path to the files.)
PHP:
<link href="share.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sharrre-1.3.4.js"></script>
<script type="text/javascript" src="js/share.js"></script>1-a If you got wordpress, add this instead: (Make sure you edit the path to the files.)
PHP:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="<?php bloginfo('template_url'); ?>/sharrre/share.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/sharrre/js/jquery.sharrre-1.3.4.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/sharrre/js/share.js"></script>2- Add this where you want the buttons to show:
PHP:
<!-- Social sharing -->
<div id="social_sharing">
<div id="facebook" data-url="http://www.wjunction.com" data-text="" data-title=""></div>
<div id="twitter" data-url="http://www.wjunction.com" data-text="" data-title=""></div>
<div id="googleplus" data-url="http://www.wjunction.com" data-text="" data-title=""></div>
</div>
<!-- Social Sharing End -->3- Change the data-url to your site, and that's it, enjoy.
4- Edit jquery.sharrre-1.3.4.js, find js/sharrre.php and edit it to the your path. This is needed for the G+ button to work.
Live demo: [X]
Download files: [X]
PSD Source: [X]
PS: You might need (probably not) to edit a few css values to fit into your site, but it shouldn't be that hard, if it is, drop me a reply here.
Regards,
RT
Last edited:
