Build your own "share this" component

Note: The Javascript examples in this post are written with jQuery as we still use it at Liquid Light

Codepen just shared a blog post about sharing to dev with a snippet of how to share to Twitter without needing their embed/iframe widget thing and it reminded me of some code we use at Liquid Light instead of ShareThis or the native sharing widgets from social media platforms.

Using your own not only significantly reduces the bloat on your page, but also gives you 100% customisation of how your icons look.

The Links

Each social network formats their sharing links slightly differently (naturally), however, the big three (plus email) are:

  • Twitter: https://twitter.com/intent/tweet?text=SHARINGTEXT&url=URL
  • Facebook: https://www.facebook.com/sharer.php?u=URL
  • LinkedIn: https://www.linkedin.com/shareArticle?url=URL&title=SHARINGTEXT
  • Email: mailto:?subject=SHARINGTEXT&body=SHARINGTEXT - URL

The SHARINGTEXT we use is generally the h1 from the page.

If you were to use this in a template for your blog or webpage, you could use them like so:

<ul class="socialShare">
	<li><a href="https://www.facebook.com/sharer.php?u=URL" class="facebook" title="Share on Facebook"><span>Facebook</span></a></li>
	<li><a href="https://twitter.com/intent/tweet?text=SHARINGTEXT+-+URL" class="twitter" title="Share on Twitter"> <span>Twitter</span></a></li>
	<li><a href="https://www.linkedin.com/shareArticle?url=URL&title=SHARINGTEXT" class="linkedIn" title="Share on LinkedIn"><span>LinkedIn</span></a></li>
</ul>

A little bit of JavaScript

These sharing URLs are designed to be opened in smaller windows, however, so opening on a big screen might make them look a little bit awkward. With a snipped of JavaScript, we can make them appear in smaller "popup" windows, this makes it feel a bit more native with its sharing:

var popupCenter = function (url, title, w, h) {
	var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
	var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

	var width = (window.innerWidth) ? window.innerWidth :
		((document.documentElement.clientWidth) ? document.documentElement.clientWidth : screen.width);
	var height = (window.innerHeight) ? window.innerHeight :
		((document.documentElement.clientHeight) ? document.documentElement.clientHeight : screen.height);

	var left = ((width / 2) - (w / 2)) + dualScreenLeft;
	var top = ((height / 3) - (h / 3)) + dualScreenTop;

	var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

	// Puts focus on the newWindow
	if (window.focus) {
		newWindow.focus();
	}
};

Code from Github

You can then instantiate it with the following:

$('.socialShare a').on('click.socialShare', function(e) {
	e.preventDefault();

	var self = $(this);
	PopupCenter(self.attr('href'), self.find('.text').html(), 600, 450);
});

More JavaScript

If you wanted to abstract the code even further you can move the template building into JS, allowing you (or someone else) to specify the services they require without needing to remember the sharing URLs. This also has the benefit of allowing you to easily update the URLs should they change. This method also means it can be dropped anywhere on any page, without changes to the template to extract the page title and link.

The HTML code

<div class="shareThis" data-services="twitter, facebook, linkedin, email"></div>

The Javascript (jQuery) code

if($('.shareThis').length) {
	var container = $('.shareThis'),
		services = container.data('services').split(',').map(function(elem) {
			return elem.trim().toLowerCase();
		}),
		shareLinks = $('<div />'), // Placeholder content
		shareUrls = {
			facebook: 'https://www.facebook.com/sharer.php?u={{ url }}',
			twitter: 'https://twitter.com/intent/tweet?text={{ title }}&url={{ url }}',
			linkedin: 'https://www.linkedin.com/shareArticle?url={{ url }}&title={{ title }}',
			email: 'mailto:?subject={{ title }}&body={{ title }} - {{ url }}'
		};

	for (var i = 0; i < services.length; i++) {
		var url = (shareUrls[services[i]])
			.replace(/{{ url }}/g, window.location)
			.replace(/{{ title }}/g, encodeURI($('h1').first().text().trim()));

		shareLinks.append(
			'<li>' +
				'<a href="' + url + '" class="' + services[i] + '">' +
					'<span>' + services[i] + '</span>' +
				'</a>' +
			'</li>'
		);
	}

	container.html(
		'<ul class="socialShare">' +
			shareLinks.html() +
		'</ul>'
	);
}

You might also enjoy

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using…

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?…

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and is a developer’s dream, but what advantage does it have for you to put your website “behind” Cloudflare and how…

    Web
Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.