How To Easily Add A Social sharing Button To Your Umbraco Website

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

AddHead 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:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb4f1b8509a3807"></script>

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, like you would for adding global meta-data, for an example of this type of set-up, have a read of this.

Within the first 5 years of my career, I was definitely more of a configure all the things type of person.  In all that time the number of times things like this changed and needed updating was a grand total of 0.  Nowadays I tend to favour being able to have a good Ci/Cd process where deploying is really simple and low risk, so hardcoding isn't really a bit of an issue, as it's easy and low risk to redeploy. After adding the snippet and pushing it live, when you load your page you should now be able to see it. 

 

The choice is yours though.  Enjoy!  

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top