Setup Sharrre (sharing widget) in 5 minutes

[Macrura]

You can make your custom sharing widgets using sharrre and PW.. doesn't take long!

1.) Download    http://sharrre.com/

2.) put sharrre.php in templates

3.) put jquery.sharrre.min.js in your scripts folder.

4.) add the new template to PW

5.) add new hidden page using that template; call it anything (example 'sharrre')

6.) include the script in your output;

7.) in your custom js file setup your js; make sure to put in the correct urlCurl to your page using the sharrre.php

for example:

/*-----------------------------------------------------------------------------------*/
/*	SHARRRE
/*-----------------------------------------------------------------------------------*/

$('#shareme').sharrre({
	share: {
	twitter: true,
	facebook: true,
	googlePlus: true
	},
	urlCurl: '/sharrre/',
	template: '<div class="box"><div class="left">Share</div><div class="middle"><a href="#" class="facebook">f</a><a href="#" class="twitter">t</a><a href="#" class="googleplus">+1</a></div><div class="right">{total}</div></div>',
	enableHover: false,
	enableTracking: true,
	render: function(api, options){
	$(api.element).on('click', '.twitter', function() {
	api.openPopup('twitter');
	});
	$(api.element).on('click', '.facebook', function() {
	api.openPopup('facebook');
	});
	$(api.element).on('click', '.googleplus', function() {
	api.openPopup('googlePlus');
	});
	}
});

Note: there are other themes - see the website...

grab the CSS that goes with this JS setup:

http://sharrre.com/example2.html

8.) somewhere on your page, put the relevant markup:

<div id="sharrre">
      <div id="shareme" data-url="<?php echo $page->httpUrl?>" data-text="Share this page"></div>
</div>

works for me on 3 sites so far..

- - -

N.B. There is now a comprehensive module for social sharing buttons by Soma which is probably easier to setup and more flexible, though using Sharrre can still have some applications. Also, it is possible that Sharrre is no longer maintained and may not still work without some intervention... not sure as I have not researched this issue..

[adrianmak]

how to add a hidden page ?

[Macrura]

@adrianmak - it would be a standard page set to hidden, on the settings tab;

or it also works to put sharrre.php in the root if you don't want to use pw pages..

[krisj]

Thanks for this - works very nicely indeed! I much prefer this to the module thats available. Seems more solid.

[Macrura]

yeah, it works really well... probably should make this into a module at some point, for wider accessibility

[kurniawan]

Thank you for this, but i want to khow, how to share the article with the image that we set ? Not taken from the detail page. 

Thank You

[Macrura]

do you have open graph tags?

you need to set og:image

https://developers.facebook.com/docs/sharing/best-practices#tags

<!-- Open Graph
================================================== -->
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="page title" />
<meta property="og:description" content="some description" />
<meta property="og:url" content="page URL" />
<meta property="og:site_name" content="Site Name" />
<meta property='og:image' content='url - to - image' />

[gemini]

Very nice feature to add. Simple, fast and very functional. Thank you Mac.

[ingiliz]

Hello guys, Hello Macrura,
I read a lot of information, but I do not know how to link the FB profile with the sharrre widget.
I please someone give me some help.

Look at http://watchesbg.com/smart-chasovnitsi 

Sharre is F - 0, g+ - 0, twiit - 0, Pin it - 0  

Thanks in advance 

[Macrura]

I'm not totally sure if Sharrre still works – it hasn't been updated since 2012 and I think it stopped working on some of my sites so I replaced the sharing buttons and used the MarkupSocialShare; I would double check that everything works and you are able to get the values from Facebook...