WebCodeFun

HTML Tutorial

Add share buttons for social media sites to your webpage

Share buttons for the major social media sites can be placed on your webpage to easily enable visitors to share your content. With meta tags setup, these shares can assist in bringing new visitors to your site.

In this tutorial we look at how to add these buttons to your web page. Meta tags are important for ensuring information is shared as you would like, and we cover that in another tutorial. In this tutorial, we will learn how to add the social media share buttons.

YouTube Video

Coming soon. Read on for the written guide available now.

Written Guide

Facebook - Share Button

Facebook make this easy by providing a share button configurator. Simply choose your design for the button, add some JavaScript for them on your page, then copy and paste the html for the button itself where you would like it situated.

I added some CSS to the button so that it lines up on my page where I want it to, and you can see the share button in the grey overview box at the top of this page, and again at the bottom of this tutorial. Click the share button and see what it looks like! The code for the share button looks like this:

<div class="overview-box__fb-share-button fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

You are also required to add a script to the page. This I have added at the bottom of the page, just before the <body> tag ends.

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v9.0" nonce="XoRpbZIK"></script>

Facebook - Debugger

To view what the page looks like, you need to head over to the Facebook debugger. Here you can enter the URL and make sure that your tags are presenting the information as you desire.

The Facebook debugger is also very important for getting Facebook to clear its cache if you make any changes to the page. Make sure you put it through the debug tool to get Facebook to re-scrape your webpage if you make any changes!

Twitter - Share Button

The share button code for Twitter can be generated using the Twitter tool. Whilst this is useful for a basic share button, it doesn’t really enable us to tweak what we’re sharing as much as we would like.

To do that we have to dig into the Twitter developer documents. Here we can see the various parameters that can be used to modify the button and the information displayed in the tweet. Using this, I make the button large to match the Facebook share button, data-size=”large”, and modify the data-text value for what I would like displayed as provisional text in the tweet.

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-show-count="false" data-text="Check out this tutorial on #html embedding videos on your webpage. Video and written step-by-step guide! #webdev">Tweet</a>

Finally, I put the script that comes with the button to the bottom of my page, just before the <body> tag ends.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter - Debugger

Similar to Facebook, Twitter provides a place for us to test the meta data is being scraped correctly. It is also used to clear the cache and enable changes to be made. Simply put the webpage address into the Twitter debugger.

Need help?

You should now understand how to grab the code for your social media share buttons and be confident placing the code on your website. If anything is unclear or if you have any questions, please do get in touch by contacting me. Thanks for reading.