In this tutorial, you will learn how to add social share buttons into your 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 keeping your social media buttons on your website can be a time drain and it's all boring development work. 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, pretty much everyone has tended to use Add This. It's free. It works, so why not?
For any reader new to Add This it does everything you would expect, it's free, 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 that page 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, have a read of this.
When I started off building CMS solutions my preference was to make everything in the site configurable within the CMS. If you know some of the configurations will never change then I tend to think it's OK to hardcode some config within a config file. As long as you have a good Ci/Cd pipeline where you can release to prod easily to update that config. If by some small miracle it ever needs to change, then it will probably make your life easier
The choice is yours though. Enjoy!