Social media websites are incredible assets for getting site visitors, however how do you make it simple on your readers to share your content material? By including a Social Sharing Plugin you can also make that course of simpler.
This tiny and easy-to-use jQuery plugin means that you can simply create social sharing buttons for fashionable social media networks proper in your web site or weblog. It offers a good way to extend site visitors, get extra web page views, and enhance subscribers.
How one can use it:
1. Obtain and cargo the socialSharing.js script after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/socialSharing.js"></script>
2. Load the most recent Font Superior Iconic Font for social icons.
<hyperlink rel="stylesheet" href="/path/to/font-awesome/css/all.min.css" />
3. Create an empty DIV container to carry the social sharing buttons.
<div id="demo"></div>
4. Initialize the plugin to generate social sharing buttons on the web page. Accessible social media networks:
- Fb
$('#demo').socialSharingPlugin({
// present URL
urlShare: window.location.href,
// get description from meta description tag
description: $('meta[name=description]').attr('content material'),
// get title from title tag
title: $('title').textual content(),
})
5. Take away & add social sharing buttons.
let urls = {
fb: {
icon: 'fab fa-facebook',
colour: '#4267B2',
url: 'https://www.fb.com/sharer.php?u=[post-url]'
},
twitter: {
icon: 'fab fa-twitter',
colour: '#00acee',
url: 'https://twitter.com/share?url=[post-url]&textual content=[post-title]&through=[via]&hashtags=[hashtags]'
},
pinterest: {
icon: 'fab fa-pinterest',
colour: '#E60023',
url: 'https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=[post-url]&is_video=[is_video]&description=[post-title]'
},
linkedin: {
icon: 'fab fa-linkedin',
colour: '#0072b1',
url: 'https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]'
},
reddit: {
icon: 'fab fa-reddit',
colour: '#FF5700',
url: 'https://reddit.com/submit?url=[post-url]&title=[post-title]'
},
pocket:{
icon: 'fab fa-get-pocket',
colour: '#E60023',
url: 'https://getpocket.com/save?url=[post-url]&title=[post-title]'
},
e-mail:{
icon: 'fas fa-envelope',
colour: '#5522a4',
url: 'mailto:?topic=[post-title]&physique=Take a look at this website: [post-url]'
},
whatsapp:{
icon: 'fab fa-whatsapp',
colour: '#1e7d34',
url: 'https://wa.me/?textual content=[post-title]+[post-url]'
}
};
6. Accessible choices to customise the social sharing buttons.
$('#demo').socialSharingPlugin({
// present URL
urlShare: '',
// goal attribute
btnTarget: '_blank',
// button title
btnTitle: 'Share on',
// web page title
title: '',
// web page description
description: '',
// for Twitter
through:'',
hashtags: '',
// for Pinterest
img: '',
isVideo: 'false',
// button lessons
buttonClass: 'btn btn-light',
// apply default types to the buttons
applyDefaultButtonStyle: true,
})
This superior jQuery plugin is developed by mmlTools. For extra Superior Usages, please test the demo web page or go to the official web site.
