How to Add Fat-Free Social Buttons to Your Pages

Share this article

Sorry Facebook, but adding 270Kb of code to my pages to show a tiny “Like” button seems excessive. As I discussed in my recent post, The Hidden Cost of Social Sharing
, adding Facebook, Twitter, Google+ and LinkedIn buttons can bloat your pages, make sites less responsive and introduce unnecessary security risks. It need not be that way. The majority of social networks offer URL-based sharing buttons which add little weight to the page and do not require third-party JavaScript. They’re not as well publicized but they’re not difficult to use.

Encode Your URL

All these links pass a URL-encoded representation of your page address to the social network. For example, using PHP:
$sURL = urlencode(
			'http' .
			($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://' .
			$_SERVER['HTTP_HOST'] .
			$_SERVER['PHP_SELF']
		);
Depending on the social network, you may also want URL-encoded page titles, descriptions and a list of hashtags (separated by a comma and without the leading hash).

Facebook

Facebook sharing is simple. You supply the URL and Facebook fetches the title, description and thumbnail: URL: https://www.facebook.com/sharer/sharer.php Basic parameters:
u: the page URL
Example:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsitepoint.com%2F
Further resources are available at https://developers.facebook.com/docs/reference/plugins/share-links/

Twitter

To be fair, Twitter has always offered a fully-documented Web Intents system which allows you to tweet page links. URL: https://twitter.com/intent/tweet Basic parameters:
url: the page URL
text: optional text
hashtags: a comma-delimited set of hashtags
Example:
https://twitter.com/intent/tweet?url=http%3A%2F%2Fsitepoint.com%2F&text=SitePoint&hashtags=web,development
Further resources are available at https://dev.twitter.com/docs/intents

Google+

Google sharing links are similar to Facebook: URL: https://plus.google.com/share Basic parameters:
url: the page URL
Example:
https://plus.google.com/share?url=http%3A%2F%2Fsitepoint.com%2F
Further resources are available at https://developers.google.com/+/web/share/

LinkedIn

LinkedIn sharing links are similar to Facebook: URL: http://www.linkedin.com/shareArticle Basic parameters:
mini: must be set to ‘true’
url: the page URL
source: the company/named source (200 characters maximum)
title: article title (200 characters maximum)
summary: a short description (256 characters maximum)
Example:
http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsitepoint.com%2F&title=SitePoint
Further resources are available at https://developer.linkedin.com/documents/share-linkedin

Progressive Pop-ups

The links will work in all browsers. However, they will take you away from the page which is a step too far for the most eager social media manager. Let’s give our social links a class of “share” then add a small self-running JavaScript function to the end of the page which intercepts all clicks and opens them in a small pop-up window. (I agree that pop-ups are evil and this feels like coding in 1999, but it’s what most social buttons do anyway.)
<script>
// create social networking pop-ups
(function() {
	// link selector and pop-up window size
	var Config = {
		Link: "a.share",
		Width: 500,
		Height: 500
	};

	// add handler links
	var slink = document.querySelectorAll(Config.Link);
	for (var a = 0; a < slink.length; a++) {
		slink[a].onclick = PopupHandler;
	}

	// create popup
	function PopupHandler(e) {

		e = (e ? e : window.event);
		var t = (e.target ? e.target : e.srcElement);

		// popup position
		var
			px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
			py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);

		// open popup
		var popup = window.open(t.href, "social", 
			"width="+Config.Width+",height="+Config.Height+
			",left="+px+",top="+py+
			",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
		if (popup) {
			popup.focus();
			if (e.preventDefault) e.preventDefault();
			e.returnValue = false;
		}

		return !!popup;
	}

}());
</script>
The script will work in all browsers including IE8 and above. If it fails, the browser will simply open the social networking page in the main window. View the demonstration page… The result is a few links and an optional script with fewer than 900 characters to handle pop-ups. Who needs 580Kb of social networking code?

What are social media button links and why are they important?

Social media button links are clickable icons that direct users to your social media profiles. They are crucial for businesses and individuals who want to increase their online presence and engagement. By integrating these buttons into your website, you allow visitors to connect with you on various social media platforms, thereby increasing your reach and visibility.

How can I add social media button links to my website?

Adding social media button links to your website involves embedding code snippets that link to your social media profiles. These codes can be generated from the respective social media platforms or through various online tools. Once generated, the code is then inserted into your website’s HTML.

Can I customize the appearance of my social media buttons?

Yes, you can customize the appearance of your social media buttons. Most social media platforms offer a range of styles and sizes for their buttons. Additionally, you can use CSS to further customize the look and feel of your buttons to match your website’s design.

How can I track the performance of my social media buttons?

You can track the performance of your social media buttons using various analytics tools. These tools can provide insights into how many users are clicking on your buttons, which buttons are most popular, and how these clicks are impacting your overall website traffic and engagement.

Are there any best practices for using social media buttons?

Yes, there are several best practices for using social media buttons. These include placing your buttons in a prominent location on your website, limiting the number of buttons to avoid overwhelming your visitors, and regularly updating your buttons to ensure they link to active social media profiles.

Can social media buttons slow down my website?

While social media buttons can potentially slow down your website due to the additional code they require, this is usually minimal. However, it’s always a good idea to monitor your website’s performance and make adjustments as necessary.

What are the benefits of using Fat-Free Framework for social media button links?

Fat-Free Framework is a powerful yet lightweight PHP micro-framework designed for building dynamic and robust web applications. It can be used to create efficient and customizable social media button links. Its simplicity and flexibility make it a popular choice among developers.

How can I ensure my social media buttons are mobile-friendly?

To ensure your social media buttons are mobile-friendly, you should test them on various devices and screen sizes. Additionally, consider using responsive design techniques to ensure your buttons adjust to the screen size of the device they’re being viewed on.

Can I use social media buttons to share content from my website?

Yes, in addition to linking to your social media profiles, social media buttons can also be used to share content from your website. These share buttons allow users to easily share your content on their own social media profiles, further increasing your reach and visibility.

What should I do if my social media buttons are not working?

If your social media buttons are not working, first check to ensure the code has been correctly inserted into your website’s HTML. If the problem persists, consider seeking help from a professional developer or the support team of the respective social media platform.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

facebookGoogle Tutorials & Articleslinkedintwitter
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week