Easy Custom Social Share Plugin with jQuery - Sharer

Sharer is a lightweight jQuery plugin which allows you to add custom social share buttons to your website.

Features:

• Supports Facebook, Twitter, Google Plus and Linkedin.
• Custom social media icons using CSS image sprites.
• Auto shorten URLs for Twitter using Google URL shortener API.
• Custom URLs and contents you wish to share.

How to use it:

1. Load the required sharer.css in the header to provide basic social share button styles.

<link href="src/sharer.css" rel="stylesheet">

2. Load jQuery JavaScript library and the sharer.js script at the bottom of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/sharer.js"></script>

3. Create social buttons using A tags and custom the social share settings for each social networking service using Html5 data-* attributes.

• data-media: specify the social media type.
• data-shorten: auto shorten URLs for Twitter, true or false.
• data-title: custom content for Twitter and Linkedin.
• data-summary: custom content for Linkedin.
• href: custom URL you wish to share. Leave blank to share the current URL.

<a class="sharer" data-media="facebook" href="">Facebook</a>
<a class="sharer" data-media="google" href="">Google Plus</a>
<a class="sharer" data-media="twitter" data-shorten="true" data-title="Custom title" href="">Twitter</a>
<a class="sharer" data-media="linkedin" data-title="Custom title" data-summary="More information" href="">Linkedin</a>

4. Call the plugin and override the default options listed below.

$('.sharer').sharer({
// it's required to share on Facebook
fb_app_id: 'YOUR FACEBOOK APP ID HERE',

// it's required to share on Facebook and must be a valid URL for your fb app (app_id)
fb_redir: 'URL TO REDIRECT AFTER SHARE',

// the API key for goo.gl, a shortner service from Google
googl_api_key: null,

// customize the screen name
screen_name: 'sharer',	

// customize window size
window: {
  width: 400,
  height: 500
},

// a callback which is called right after to open sharing window
onshare: null,	
});

Change log:

2014-12-01

• New visual effect for buttons.

---

This awesome jQuery plugin is developed by rogeriotaques. For more Advanced Usages, please check the demo page or visit the official website.