SharerBox

Download

Free, minimalist and lightweight JavaScript-based social-media sharer for websites.

SharerBox logo

SharerBox
Get the latest version

View Repository

GitHub repository
SharerBox

Overview:

SharerBox - Screenshot

  SharerBox is a free, minimalistic and lightweight JavaScript-Based social-media sharebar feature developed to provide fast and easy-to-use social-media sharing integration for small websites by eliminating the need of loading heavy/bulky third-party social APIs, which generally have a negative impact on loading speeds and unauthorizedly recolect private user information.

  Integrating SharerBox directly on your website for sharing social-media instead of external social APIs should significantly reduce loading speeds for visitors connected on slow networks, which will result on improved SEO indexation for your website and enhanced performance, user experience and device portability for your visitors, this specially for users connected from old computers or low-end devices. Plus, since there is no need for implementing obscure social third-party code there is no unauthorized recolection of private user information directly derived from SharerBox use.

  SharerBox is currently a personal development project, but its implementation is intended to be intuitive for unexperienced users as well as very easy to customize for developers.

Support:

Facebook logo

Facebook

Twitter logo

Twitter

WhatsApp logo

WhatsApp

LinkedIn logo

LinkedIn

Reddit logo

Reddit

Pinterest logo

Pinterest

Tumblr logo

Tumblr

Telegram logo

Telegram

Trello logo

Trello

Preview

Social Networks

  Mark All

  Unmark All

- Twitter

- Facebook

- WhatsApp

- LinkedIn

- Reddit

- Tumblr

- Pinterest

- Telegram

- Trello

Behavior

Pop-up Window

New Tab

Position

Left

Right

Visibility

Hidden

Visible

Color:

Size:

Integration

  1. Download SharerBox's script file and store it on your server.

  2. Load the script asynchronously within your webpage's HTML <head> tag using the async attribute.

    Example: </>

    <script type="application/javascript" src="path/to/sharerbox.js" async></script>

  3. Copy and paste this code snippet as it is (or configure it as listed bellow) anywhere within or after your HTML page's <body> tag to execute SharerBox.

    Or alternatively, use your own logic to execute the code.

    Snippet: </>

    <script>
	window.addEventListener('load', function() {
		sharerbox(/* list your preferred social-networks and other options here, if blank options will be set to default */ );
	});
</script>

  4. Save changes and load your site.

  5. All done, SharerBox will now be enabled on your site.

Customization:

Setting options:

  You can customize Sharerbox by passing options as object properties to the sharerbox() function in 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
});

Icon Options

  • socialNetworks: 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
});

Other Options

  • behavior: 'pop-up' (default) or 'new tab'; Sets how the sharer window 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' or true; Changes the icon bar default visibility (hidden by default).

  • message: 'quoted text sting'; 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>