Building a social media custom block
The aim of this article is to provide developers with a comprehensive guide on crafting a social media custom block, enabling users to seamlessly share content across various social platforms.
Prerequisites
Workflow
This workflow provides a full list of steps to create a social media share block. Before starting, determine what social media sites you want to add buttons for.
Render a Share Button
To begin, create a block to house your share button(s). Some social media sites offer JavaScript libraries that handle automatically rendering and styling share buttons. Determine if you‘re using a JavaScript library or creating a custom share button. Check if any guidelines exist for using third-party icons before adding them to your page.
Handle Share Event
To begin, create a block to house your share button(s). Some social media sites offer JavaScript libraries that handle automatically rendering and styling share buttons. Determine if you‘re using a JavaScript library or creating a custom share button. Check if any guidelines exist for using third-party icons before adding them to your page.
Add Necessary Meta Tags
Some social sites require specific meta tags in the <head> section, such as og:title, og:url, or og:image. Check the documentation for the social media site and confirm any tag requirements.
To add meta tags to the <head>, you must update your output type file. The output type defines the <head> element and its contents. Add the meta tags to each output that displays the share options. For most, this is the default output type. Some organizations have other output types, such as amp.
Headless/Traditional CMS
Headless customers do not have an output type file. Steps to add meta tags to the <head> differ based on your implementation.
Themes
Themes includes a Share Bar block. You can add additional share options to this block by forking it instead of creating a new block from scratch.
Themes has a standard default output file, which includes the meta tags. Check the default output file to determine if all necessary meta tags needed for your new share option are included. If new meta tags are needed, fork the Themes default output file and add your tags there.
Limitations and Considerations
JavaScript libraries from social media websites are an easy way to automatically create share buttons. As with any JavaScript library, they can add load time to your page. Depending on your use case and the size of the library, it may be beneficial to load only the JavaScript libraries on pages that display the share button or to avoid using third-party libraries altogether and create a custom button instead.
Some share options, like WhatsApp, may make sense to display only on a mobile device.
Ensure you are using the most recent version of third-party documentation. Also, keep up to date on change and deprecation notices from the social media sites.
Not all pages should be shared in the same way. For example, authors do not have a “title.” Instead, you should use their name, byline, or another field in place of the title. Consider all pages you may be sharing, such as videos, galleries, and sections.