Free minimalist and lightweight JavaScript-based social-media sharer for websites.
Version:
SharerBox is a free, minimalistic and lightweight JavaScript-Based social-media sharebar feature developed to provide fast and easy out-of-the-box social-media sharing integration for small websites by eliminating the need for loading heavy or bulky third-party social APIs, which usually have a negative impact on loading speeds and unauthorizedly recolect private user information.
Integrating SharerBox directly on your website for social-media sharing instead of external APIs should significantly reduce loading speeds for visitors connected from slow networks, which will result on improved SEO indexation and enhanced user experience and device portability, specially for visitors connected from old computers or low-end devices. Plus, since there is no need for integrating obscure third-party code there is also no unauthorized recolection of private user information derived from using SharerBox.
SharerBox is currently a personal project, but it's integration process is intended to be easy for unexperienced users as well as very easy to customize for developers
-
Download and store Sharerbox's JavaScript File on your server.
-
Asynchronously load the script inside your webpage's HTML
<head>tag using theasyncattribute.Example:
<script type="application/javascript" src="path/to/sharerbox.js" async></script>
-
Copy this code snippet anywhere inside or after your HTML page's
<body>tag.
Or alternatively, use your own logic to execute the code.Example:
<script>
window.addEventListener('load', function() {
sharerbox(/* list your preferred social-networks and other options here, if blank options will be set to default */ );
});
</script>- Save Changes and reload your site.
- All done, sharerbox will be now enabled on your website.
You can customize Sharerbox by passing options as object properties to the sharerbox() function inside your code snippet.
(if no arguments are passed to the function SharerBox behavior will be set to default)
Example:
sharerbox({
propertyA: 'string',
propertyB: 50,
propertyC: true
});-
Social-Networks: A list of supported social-network names passed as a string (separated by spaces or commas) or as an array.
-
iconSize: Sets the size of the icons in pixels. It accepts numeric values (default size: 45 pixels, accepted size ranges: 25 to 100 pixels).
Example:
sharerbox({
// Icon list: 'site1, site2, site3...'
// Icon size: number
socialNetworks: 'site1, site2, site3, site...'),
iconSize: 45
});- Behavior:
'pop-up'(default) or'new tab'; Sets how the sharer menus will be deployed. - Position:
'left'or'right'(default); Sets the position of the sharebar on the screen. - Color:
'color name'(Black by default).; Selects a color for the toggle button. - Visibility:
'visible','yes'ortrue; Changes the icon bar default visibility (hiddenby default). - Description:
'quoted text'; Sets a predefined message or description of your website for people to share on social-networks.
Example:
sharerbox({
// Setup arguments: Behavior, Position, Color, Visibility, Message
behavior: 'popup',
position: 'right',
color: 'black',
visibility: true,
message: 'Write a custom message/description here (optional)'
});Full Example:
<script>
window.addEventListener('load', function(){
sharerbox({
// Icon list: 'site1, site2, site3...'
// Icon size: number
socialNetworks: 'facebook twitter whatsapp linkedin reddit',
iconSize: 45,
// Setup arguments: Behavior, Position, Color, Visibility, Message
behavior: 'popup',
position: 'right',
color: 'black',
visibility: true,
message: 'Write a custom message/description here (optional)'
});
});
</script>(Note: if no arguments are passed to the function SharerBox behavior will be set to default).
Juan Astudillo