Jump to content
Macrura

Setup Sharrre (sharing widget) in 5 minutes

Recommended Posts

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..

  • Like 6

Share this post


Link to post
Share on other sites

@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..

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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' />

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Peter Knight
      I have HootSuite running for social media management. One thing I like to do is have separate streams running for various CMS I have an interest in. This means I can quickly see all posts mentioning CMS A, CMS B, CMS C etc in a dedicated stream. Makes it easy to follow community topics and product developments etc. But it also makes it easy to gauge social media chatter in relation to a CMS. 
      One thing I've always noticed is how few mentions and tweets PW gets compared to other CMS.
      IMHO we have a very active and enthusiastic community (as evident from the forums) but a relatively quiet community when it comes to Twitter and Facebook.
      I'm guilty of this myself but the same thing occurs to me every time I see those three social media streams lined up side by side.
      Why is it that users of CMS B and CMS A are so vocal on twitter, google plus etc and quick to promote their CMS when PW gets a mention or re-tweet only every second of third day?
      Incidentally, the 2 other CMS I follow are not huge platforms where you'd naturally expect thousands of tweets a day in comparison to ProcessWire.
      Anyway, the above occurred to me again after reading Ryan's roadmap post where there was specific mention of
      This was followed by mention of :
      curiously there was no mention of social media.
      Is there an unintentional prejudice against Twitter, GooglePlus and Facebook etc that we're not aware of?
      Ok, it's an odd question but I thought it'd be worth a check.
      ProcessWire is growing in userbase, the forums are attracting new members weekly, the CMS itself is a work of art, we have wonderful blog updates on a weekly basis and we have Teppo's PW Weekly too.
      That energy and excitement seems to ripple out so far and then stop when it reaches an invisible social media force field...
    • By niutech
      If you want to integrate Google+ Comments in your ProcessWire website, just follow the instructions from an article on Browsing the Net. In summary, insert the following HTML code into your template:
      <script src="https://apis.google.com/js/plusone.js"></script> <g:comments href="<?=$page->httpUrl?>" width="642" first_party_property="BLOGGER" view_type="FILTERED_POSTMOD"></g:comments> Change the width accordingly and in case you have a Google+ profile, link your page with Google+ profile to enable moderation features.
       
×
×
  • Create New...