Social media sharing in AngularJS

April 12, 2014

I developed this directive to make social media sharing in AngularJS easy. At the time of this article, this directive supports Twitter, Facebook and LinkedIn.

This is ideal for content-first sites like blogs, news, magazine or portfolio sites.

This solution is simple and makes use of each of the above-mentioned social media networks’ ability to share content by providing URL parameters.

To add a share link to your Angular application, simply create an element with the required attributes:

<div
    share-square="true" 
    share-links="Facebook, Twitter, LinkedIn, Google-Plus" 
    share-title="Article Title">
</div>
 This solution is unobtrusive and does not require your application to be registered in your social media developer accounts.

It can be easily downloaded and installed using Bower.

It requires Font Awesome to display the icons and you can choose between the two currently available icon styles (with square or without).

The share link below is an example of this directive in action.

For more information, check out the repository and a demo on Github.