Create Social Share Links With jQuery And Open Graph - Shape Share

Create Social Share Links With jQuery And Open Graph - Shape Share
File Size: 148 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Shape Share is a jQuery plugin to generate plain social share links that open a new new window to share your content in social networks: Facebook, Twitter, Google+ and Pinterest.

More features:

  • Automatic URL shorten based on bitly.com.
  • Custom content to share using Open Graph Meta Tags.
  • Hash tags are supported as well.

How to use it:

1. Set the content you want to share in the Open Graph Meta Tags as these.

<meta property="og:site_name" content="jQuery Script">
<meta property="og:title" content="Free jQuery Plugins">
<meta property="og:description" content="Latest Free jQuery plugins with examples and tutorials for web &amp; mobile developers.">
<meta property="og:type" content="article">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.jqueryscript.net">

2. Create the social share links on the web page.

<a href="#" class="social-share" data-share="twitter">Twitter</a>
<a href="#" class="social-share" data-share="facebook">Facebook</a>
<a href="#" class="social-share" data-share="pinterest">Pinterest</a>
<a href="#" class="social-share" data-share="googleplus">Google+</a>

3. Load jQuery library and the shape.share.js script at the end of the document.

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="shape.share.js"></script>

4. Initialize the social sharing plugin.

$('.social-share').shapeShare({

  // your twitter name
  twitter: {
    account: 'jqueryscript'
  },

  // bitly.com API here
  shortenUrl: {
    enable: true,
    apiKey: 'R_cb9b7614dbd84e4b8aee2a4f25a2fda9',
    login: 'o_65q884feb1'
  }
  
});

5. All default configuration options.

$('.social-share').shapeShare({

  window: 'popup',
  hashtags: '',
  shortenUrl: {
    enable: false,
    login: '',
    apiKey: ''
  },
  popupSize: {
        width: '600',
        height: '500'
  },
  twitter: {
    account: '',
    content: 'title'
  }

});

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