Social media is a very big part of our lives today. We use it to share our content as well as content we like and want others the see. It is how content gets shared and spread.

To make sharing of content on your website easier for users, I’m gonna talk about social media buttons, specifically share buttons.

Why use Share Buttons

If you create a website, a blog or any kind of content on the Internet you most likely want to grow an audience. Social media and sharing content on social media is a big part of growing an audience. Looking at popular content creation/social media sites we see sharing options implemented. For example, Twitter has retweets and YouTube has a share option for a lot of different platforms. Clicking only a button makes sharing content a lot easier and more convenient.

What if your content is on your own website, like a blog? Then it is your job to make sure sharing your content is as easy and convenient as on other platforms. This is why I am gonna talk about share buttons today.

How do Share Buttons work

Now how can you create these share buttons? If we take a look at YouTube’s share option, we can see a lot of buttons for different platforms that the video can be shared on. The most common ones are for example Reddit, Email, Facebook, Twitter, LinkedIn and then some more. Generally clicking on one of these share buttons will redirect us to the platform. This redirect happens because of a link, that contains information about the content that should be shared.

Let’s take a look at an easy example: To share a blog-post link on Twitter, the redirect URL would look something link this: https://twitter.com/intent/tweet?url=https://mayadevbe.me/posts/host_hugo_on_github/ We can look at the link as a template that the platform created and we only have to fill in the information about the content that should be shared. In this case, I just put a link to one of my blog posts in the url ‘field’. In context with Twitter, it is also interesting to mention twitter cards, that make links to your website appear in a nice card and therefore sharing your content look nicer.

Check out my Blog!https://t.co/0yxEvkpos0

— MayADevBe (@MayADevBe) February 15, 2021

To find these templates, we can either click on existing share buttons on websites and look at the URL we are redirected to or we find the documentation of the platform and see how these URLs are intended to be created.

Share through Email

Using redirect links works well with social media platforms that are generally accessed on the internet through one specific URL. Sharing content through emails is a little different. A link could look something like this: mailto:?&body=https://mayadevbe.me/posts/host_hugo_on_github/

How to create Share Buttons

To create a share button, next to knowing the redirection URL, you also need to create a button. If you do not want to look up all the URLs and figure out designs, you might want to check out sharingbuttons.io which is a GitHub project that generates HTML+CSS for different share buttons.

If you use Hugo for your website, you might want to check out the share button add on for Hugo. This is what I use for my blog. I only changed the Twitter link because it didn’t work for me.

If you want to create your own buttons, I recommend you to check out another GitHub project called feathericons, which supplies a big amount of icons, including social media icons.

Other Social Media Buttons

Finally, share buttons are not the only type of social media buttons that you might want to integrate into your website. Another example would be a follow button for your social media accounts. Check out this blog post to see some more options.

Conclusion

I gave you an overview of what share buttons are and why you should integrate them into your website. I also introduced sharingbuttons.io as a good starting point to see some redirection URL links that could be used for the share buttons. I hope this post was helpful to you. If so, feel free to use the share buttons on this site to let other people know about my content. If you have any question or critique you can reach me on Twitter or by email.