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











