In this tutorial, you will learn how to add social share buttons to your Umbraco powered website. When it comes to adding a new feature to your website, you have two options; build it yourself or use something someone else has already developed. As social platforms are constantly innovating and changing their API's, manually implementing your own custom social media type component can be a time drain. Unless you are working with a client or a design that is really anal about how your social buttons need to look, then, in my opinion, there is no point in re-inventing the wheel when so many free off-the-shelf options exist.
Which Third-Party Social Sharing Platform Should I Use With Umbraco?
If you have never used any of the off-the-shelf options, then I suggest that you Add This. Over the past 10 years, when I've been in agencies that have needed to use social sharing buttons, Add This has been the go-to. It's free. It works, so why not? Add This, has everything you would expect, it has options to include all the main social sites like Facebook, Instagram, LinkedIn, Pinterest, Snapchat and Twitter. It's also really quick and easy to get started, so why not?
Getting The Add This Code
Head over to www.addthis.com and follow the install instructions.
Create an account and sign-up with your email. After successfully signing into Add This, you'll get an email sent to your email address. This email contains a link to a video that tells you how to add 'Add This to an HTML website'. After verifying your account, you can get the code you will need to add to your Umbraco website. From the email click on the dashboard link and then click the 'Get Code' button.
On the page that loads, you will see a script that looks similar to this:
This is the snippet you will either have to add within Umbraco or, if you prefer, hard-code into your template.
Where Should I Put This Snippet Within Umbraco?
Where you decide to put it is really up to your personal preference. In one school of thought, the Add This code snippet will likely never change, the ID will always be the same (unless you change accounts) so hard-coding directly into your template will probably do the trick.
If you like the 'configure all the things' approach, my recommendation would be to create a global base document type that all your pages inherit from. In here create a 'Headers' tab, as you would for adding global meta-data, for an example of this type of set-up, This is the snippet you will either have to add within Umbraco or, if you prefer, hard-code into your template.
Where Should I Put This Snippet Within Umbraco?
Where you decide to put this HTML is really up to your personal preference. In one school of thought, the Add This code snippet will likely never change, the ID will always be the same (unless you change accounts) so hard-coding directly into your template will probably do the trick. Another option might be to inject it using Google Tag Manager and avoid doing anything to the site at all!
Assuming you want a little more control, my recommendation would be to create a global base setting page that any controller in your site can access via Umbraco API. In here create a 'Headers' tab, as you would for adding global meta-data, for an example of this type of set-up, have a read of this:
As long as the HTML is injected onto the page the Add This widget will work. Simples, Happy Coding 🤘
