Create Social Share Links With jQuery And Open Graph - Shape Share
File Size: | 148 KB |
---|---|
Views Total: | 2020 |
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 & 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.