Blog | Tutorials | Lightweight Social Share Buttons February 01, 2017
Social share buttons are commonplace on a range of websites. Many social networks provide embed code to build them quickly, however these solutions load a number of additional requests and resources. This increases the load time for your pages.
Social networks also provide a share URL as an alternative to the embedded buttons. Linking to these with a few <a> tags is much more lightweight than the embedded solution. They can also be styled to match your branding. Here are the buttons and everything you need to recreate them for your site:
Here are the base styles for the buttons shown above:
Here’s a collated list of provided share URLs and relevant options. It’s better to only use relevant share buttons rather than bombard the visitor with every choice.
Options are provided for developers to customise the share experience. Previews are often generated automatically from the URL provided. The url query parameter is required on all share URLs except email:
subject is the subject line of the pre-populated email
body is the body text content of the pre-populated email
The previews that are automatically generated rely heavily on the Open Graph tags and well structured content. Facebook offers this preview tool to test and ensure these are set correctly on your sites.
Encode your query parameters on your Jekyll sites with the cgi_escape filter. The uri_escape filter is for entire URLs, so won’t escape some characters (e.g. “?”) and may break your buttons.
Jekyll includes are a great way to reuse SVG icons in your buttons and the rest of a site.
Tracking your share buttons can help you discover how your visitors are interacting with the site and focus your resources more effectively. Track custom events for clicks on your share buttons with Google Analytics using the following code:
Be sure to let us know in the comments if you’ve got any tips or feedback on the topic!