SimpleSocialShare.js

Simple social and email share script without using an iframe.

Plain JS ES6 with babelized ES5 version using Babel JS compiler.

Social networks:

• Facebook
• Twitter
• Google Plus

Email share includes:

• recipient
• CC
• BCC
• subject (optional page title & URL)
• body (optional page title & URL)

How to use

new SimpleSocialShare();

Facebook

const facebookShare = new SimpleSocialShare({
    facebook: '.js-share-facebook'
});

<a href="#" class="js-share-facebook">Share this page on Facebook</a>

Twitter

const twitterShare = new SimpleSocialShare({
    twitter: '.js-share-twitter'
});

<a href="#" class="js-share-twitter">Tweet this page</a>

Google Plus

const googlePlusShare = new SimpleSocialShare({
    googleplus: '.js-share-googleplus'
});

<a href="#" class="js-share-googleplus">Share this page on G+</a>

Email

Using JavaScript:

const emailShare = new SimpleSocialShare({
    email: {
        selector: '.js-share-email',
        recipient: '[email protected]',
        subject: 'This is test email subject',
        cc: '',
        bcc: '',
        body: 'This is test email body text'
    }
});

<a href="#" class="js-share-email">Create new email</a>

Using JavaScript and HTML data attributes:

const emailDataShare = new SimpleSocialShare({
    email: {
        selector: '.js-share-email'
    }
});

<a href="#" class="js-share-email" data-recipient="[email protected]" data-subject="This is test email subject" data-cc="[email protected]" data-bcc="[email protected]" data-body="This is test email body text">Create new email</a>

Add page URL or page title to the email subject or body text:

// JS method
const emailShare = new SimpleSocialShare({
    email: {
        selector: '.js-share-email',
        subject: '{{PAGE.TITLE}}',
        body: 'Check out this link: {{PAGE.URL}}'
    }
});

<!-- HTML DATA ATTRIBUTES --> 
<a href="#" class="js-share-email" data-subject="{{PAGE.TITLE}}" data-body="Check out this link: {{PAGE.URL}}">Create new email</a>

You can also combine page title and page URL:

const emailShare = new SimpleSocialShare({
    email: {
        selector: '.js-share-email',
        subject: '{{PAGE.URL}}',
        body: '{{PAGE.TITLE}} - Check out this link: {{PAGE.URL}}'
    }
});

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.