Implement your own social share buttons

In this post I’m going to show you how you can roll out your own (simple) implementation of social share buttons.
There might be some packages out there which will help you setup social share buttons with more flexibility, but most of them are not up to date or a little bit buggy.

At the end of this post we’ll have a simple Implementation which makes it possible to share our current page via Facebook, Twitter and Google Plus:

Step 1: Spacebars-Helpers

At first we need to define our Spacebars-Helpers which will produce the share-Links and which we can reuse in our views (note this uses the old Facebook sharer. It’s recommended to switch to the new sharing-Dialog but when you want to use this you need an AppId from Facebook).

UI.registerHelper('shareOnFacebookLink', function() {<br />
  return 'https://www.facebook.com/sharer/sharer.php?&u=' + window.location.href;<br />
});</p>
<p>UI.registerHelper('shareOnTwitterLink', function() {<br />
  return 'https://twitter.com/intent/tweet?url=' + window.location.href + '&text=' + document.title;<br />
});</p>
<p>UI.registerHelper('shareOnGooglePlusLink', function() {<br />
  return 'https://plus.google.com/share?url=' + window.location.href;<br />
});<br />

Step 2: Add Fontawesome

Add the fontawesome package to get the social share icons.

meteor add fortawesome:fontawesome<br />

Step 3: Add CSS-Styles

This CSS-Styles will style the share buttons.

.btn.btn-facebook {<br />
  border-radius: 4px;<br />
  color: #FFFFFF;<br />
  background: #3B5998;<br />
}<br />
.btn.btn-facebook:hover,<br />
.btn.btn-facebook:focus {<br />
  color: #FFFFFF;<br />
}<br />
.btn.btn-twitter {<br />
  border-radius: 4px;<br />
  color: #FFFFFF;<br />
  background: #4099FF;<br />
}<br />
.btn.btn-twitter:hover,<br />
.btn.btn-twitter:focus {<br />
  color: #FFFFFF;<br />
}<br />
.btn.btn-google-plus {<br />
  border-radius: 4px;<br />
  color: #FFFFFF;<br />
  background: #D34836;<br />
}<br />
.btn.btn-google-plus:hover,<br />
.btn.btn-google-plus:focus {<br />
  color: #FFFFFF;<br />
}<br />

Step 4: Add the HTML with Spacebars-Helpers in your view

Simply add this HTML with the Spacebars-Helpers in your view so that the share-Buttons are displayed.

<a href="{{shareOnFacebookLink}}" target="_blank" class="btn btn-facebook"><br />
  <i class="fa fa-facebook"></i><br />
</a><br />
<a href="{{shareOnTwitterLink}}" target="_blank" class="btn btn-twitter"><br />
  <i class="fa fa-twitter"></i><br />
</a><br />
<a href="{{shareOnGooglePlusLink}}" target="_blank" class="btn btn-google-plus"><br />
  <i class="fa fa-google-plus"></i><br />
</a><br />

Finished!

That’s it. you now have some very basic social share buttons in your Meteor application! There are many ways to improve this (e.g. add a button to pin your page on Pinterest), but for now it should be sufficient.
You may also consider to upgrade to a package later on.
I hope that this tutorial has helped you a little bit while setting up your own social share buttons.

Addon: Open share-Dialog in browser when using a Cordova app

If you use the social share buttons in your Cordova app and you don’t want the share-Dialog to be opened in your Cordova app then you can use this code which forces the app to open the share-Dialog in the smartphones browser:

Template.post.onRendered(function() {<br />
  if (Meteor.isCordova) {<br />
    return $('.cordova-share-links').on('click', function(e) {<br />
      e.preventDefault();<br />
      window.open($(this).attr('href'), '_system');<br />
      return false;<br />
    });<br />
  }<br />
});<br />