jQuery Social Media Sharing Plugin
Simple Social Media Sharing is a jQuery plugin that allows you to quickly transform an existing div element into a fully functional social media sharing widget.
- Make sure the jQuery library is loaded in the section of your web page.
- Include the simple_social_share.min.js and simple_social_share.min.css files after loading the jQuery library like so:
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="simple_social_share.js"></script>
<link rel="stylesheet" type="text/css" href="simple_social_share.css">
<title>Page Title</title>
- In another script, within the document.ready jQuery function, use a jQuery selector to specify which element you want to change into a social sharing widget by calling the .simpleSocialShare function. Here's an example:
<script type="text/javascript">
$( document ).ready(function() {
$("div.shareThis").simpleSocialShare();
});
</script>
- Make sure your div element that you are transforming into a sharing widget exists in the body.
<body>
<div class="shareThis"></div>
</body>
- url: The page URL to share (defaults to the current page URL if none is specified).
- title: A short title for the content being shared (defaults to the current page title if none is specified).
- description: Description of the content being shared (defaults to the current page meta tag description if none is specified).
- image: Image URL for the content being shared (this setting rarely applies to any social networking sites... by default, Facebook and Twitter use these meta tag properties):
<meta content="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" property="og:image">
<meta content="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" property="twitter:image">
- sites: Specify which social media sites are included in the sharing widget IN ORDER separated by commas (defaults to all - leave the setting empty or blank to use all supported social media sharing sites)
- values:
- whatsapp (shows only if a mobile device is detected)
- examples:
- just facebook, twitter, and email: sites: "facebook,twitter,email"
- values:
- orientation: horizontal or vertical for the button / social media buttons layout.
- shareType:
- values:
- text: Show "Share on:" text before social media buttons (Does not show if orientation is set to vertical)
- button: A toggleable button for showing / hiding your specified social media sharing networks
- none: Shows nothing but the social media sharing buttons
- values:
- triggerButtonActiveState: true or false boolean... if true, the button will be in a clicked state on initialization showing all of the social media buttons
- buttonSide: left or right - Only works with shareType of button... places the share button on the left or right side of the social media icons
- facebookAppId: Your Facebook App Id to customize sharing better on Facebook (default is none).
none
<script type="text/javascript">
$( document ).ready(function() {
// Horizontal layout with toggle button
$("div.shareThis").simpleSocialShare({sites: "email,facebook,google", url: "http://www.google.com", title: "Google", description: "Father of the Internet", image: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", shareType: "button", triggerButtonActiveState: true, buttonSide: "left", orientation: "horizontal"});
// For vertical with no button or text specifying sharing
$("div.shareThis").simpleSocialShare({sites: "twitter,google,facebook", url: "http://www.google.com", title: "Google", description: "Father of the Internet", image: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", shareType: "none", buttonSide: "right", orientation: "vertical"});
});
</script>
- IE 8-11+
- Edge
- Firefox
- Chrome
- Safari
See Simple Share Plugin in Action
