Sharerbox
Free minimalist and lightweight JavaScript-based social-media sharer for websites.
Version:
Description
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.
Support:
Integration:
-
Download SharerBox's JavaScript File and store it on your server.
-
Load the script asynchronously within 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.Example:
<script>
window.onload = function(){
sharerboxIcons( /* list your preferred social-networks here, else options are set to default */ );
sharerSetup( /* Behavior options go here, else options are set to default */ );
};
</script>
- Save Changes and reload your site.
- All done, sharerbox will now be enabled on your site.
Options:
Icons
- Social-Networks:
'site1, site2, site3'A list of social-network names separated by spaces of commas.
Setting Icons
You can specify which social-network icons will be displayed by going to the sharerboxIcons() function inside the code snippet pasted within your <body> tag and typing a string list of supported social-network items separated by spaces or commas, the full list must be wrapped around quotation marks.
Example:
sharerboxIcons('site1, site2, site3, site...');
OR:
sharerboxIcons('site1 site2 site3 site...');
Additionally, you can customize the size of the buttons by adding an additional numeric parameter representing a given number of pixels (accepted size ranges: 25-100 pixels):
sharerboxIcons('site1, site2, site3, site...', 45);
(if this function is leaved blank sharerbox will display it's default buttons).
Behavior Settings
- 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 in the screen. - Color:
'color name'(Black by default).; Selects a color for the toggle button. - Visibility:
'visible','yes'ortrue; Enables the icon bar default visibility (hiddenby default). - Description:
'quoted text'; Creates a predefined message or website description for social-networks.
Setting Behavior
To customize Sharerbox overall behavior enter these options into the sharerSetup() function located inside the code snippet pasted on your page's <body> tag, each argument must be written as a quoted word ('word'), each quoted word separated from each other by commas.
Example:
sharerSetup('tab', 'right', 'black', 'visible', 'Custom description');
(if these options are leaved blank SharerBox will run with it's default behavior).
Example
Full Example:
<script>
window.onload = function(){
// Buttons list: 'site1, site2, site3'
// Buttons size: number
sharerboxIcons('facebook, twitter, whatsapp, reddit', 45);
// Setup arguments: Behavior, Position, Color, Visibility, Description
sharerSetup('pop-up', 'left', 'black', true, 'custom message or description goes here (optional)');
};
</script>
Author
Juan Astudillo
6 Feb 12, 2022
3 May 18, 2022
202 Dec 22, 2022
4 May 3, 2022
14 Jan 3, 2023
28 Dec 16, 2022
25 Nov 9, 2022
8 Aug 5, 2022
4 Dec 8, 2022
38 Sep 18, 2022