In this tutorial, we’ll explore how to create a HTML and CSS social media sharing snippet, allowing your website visitors to share your website content across social media. With this code, you can integrate social media share buttons into your website in just 10 minutes.

Before we Begin
You’ll need to check the Brand Guidelines for each social button your making, this one for example is Pinterest’s Brand Guidelines.

The first step is to create a share button on your website. Here’s an example:


<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com" target="_blank" rel="noopener">Share on Facebook</a>

This code creates a href link to the Facebook sharing page with the URL of your website using GET parameters.

Similarly, you can create links for other social networks including LinkedIn and Pinterest. Here are some examples:


<a href="https://www.linkedin.com/shareArticle?url=http://example.com" target="_blank" rel="noopener" > Share on LinkedIn &lt;/a>
<a href="https://www.pinterest.com/pin/create/button/?url=http://example.com&description=Check%20out%20this%20cool%20website!" target="_blank" rel="noopener" > Share on Pinterest </a>

The above code, creates links to the sharing pages of each social network, pinterest allows you to add the URL and description of your website.

You can style the share buttons using CSS to make them inline with your website design, (you should always check the brand guidelines for each social media network). Here’s an example:


.share-btn {

color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
display: inline-block;
padding: 10px 20px;
background-color: #3b5998;
}

.share-btn:hover {
background-color: #2d4373;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

The CSS code above adds style to the share links, in this example, a blue background, rounded corners and white text.

Great job! You have now developed a simple social media sharing script using CSS and HTML. This script enables your website visitors to share your business, club or event website content on their social media profiles.