Learn how to add social media share buttons to your website using HTML and CSS. Follow our step-by-step guide to create fixed buttons that stay in one place on the page.
Table of Contents
Social media platforms have become an integral part of our lives, and with their increasing popularity, they have also become an essential tool for businesses and website owners to connect with their audience. One of the ways to increase the visibility and reach of your website's content is to provide social media share buttons. By adding these buttons to your website, you allow visitors to share your content on their social media accounts, which can help drive more traffic to your site and expand your audience.
However, it's not enough to simply add social media share buttons to your website; you also need to ensure that they are easily accessible and always visible to your visitors. This is where fixed social media share buttons come into play. Fixed social media share buttons stay in one place on the page, even when the user scrolls down the page, making it easier for them to share your content at any time.
In this article, we will show you how to add fixed social media share buttons to your website using HTML and CSS. We'll provide you with a step-by-step guide that's easy to follow, even if you have no prior knowledge of HTML or CSS. We'll also provide you with the HTML and CSS code snippets you need to create your fixed social media share buttons, and we'll explain how to customize them to match your website's design.
Why Add Social Media Share Buttons?
Social media share buttons are small icons that enable users to share your content on social media platforms such as Facebook, Twitter, LinkedIn, Pinterest, and more. By adding these buttons to your website, you can encourage your users to share your content with their followers, which can help increase the visibility of your website and drive more traffic to it.
Adding social media share buttons to your website is also beneficial for SEO purposes. When users share your content on social media, it creates backlinks to your website, which can help improve your website's search engine rankings.
Let's start making social media share buttons using HTML and CSS step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our social share buttons.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The below code is an HTML document that contains social share buttons for various platforms such as Facebook, Twitter, LinkedIn, Reddit, Tumblr, and Pinterest.
The HTML document starts with the declaration of the document type using <!DOCTYPE html>. This tells the browser that the document is an HTML5 document.
Next, the <html> element represents the root element of an HTML page and contains all other HTML elements. The lang attribute specifies the language of the document.
The <head> element contains metadata for the document such as the title of the page, character encoding, and viewport configuration. The title element sets the title of the document which is displayed in the browser's title bar. The meta elements provide additional information about the document, such as the character encoding of the page and the viewport configuration.
The link element is used to link to an external resource such as a stylesheet. In this code, it is used to link to the Font Awesome stylesheet and the styles.css stylesheet.
The <body> element contains the content of the HTML document that will be displayed in the browser. In this code, it contains a <div> element with a class of "shareit" that wraps all the social share buttons.
Each social share button is represented by an <a> element with a class corresponding to the social media platform being used. The href attribute specifies the URL of the social media platform's share page, and the target attribute specifies that the page should open in a new browser window or tab. The title attribute provides a tooltip when the user hovers over the button.
Inside each <a> element, there is an <i> element with a class corresponding to the Font Awesome icon for the social media platform. For example, the Facebook share button uses the class fa fa-facebook to display the Facebook icon.
Each social media platform's share page requires different parameters, such as the URL of the page being shared, the title of the page, and a description or image. These parameters are passed through the URLs specified in the href attributes of the <a> elements using placeholders such as YOUR_URL, YOUR_TITLE, and YOUR_DESC.
This is the basic structure of our social share buttons using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the social share buttons is in place, the next step is to add styling to the share buttons using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our social share buttons.
Below is a block of CSS code used for styling a social share buttons. It sets the margin of all elements to 0, meaning there will be no spacing around any element on the page. The body element is set to have a height of 200 viewport heights (vh), meaning it will take up twice the height of the visible area of the webpage.
The .shareit class is used to style a section of the page that contains links to social media sites. It is set to have a fixed position so that it remains in the same place on the screen as the user scrolls. The top property is set to 150px, meaning it will be positioned 150 pixels from the top of the viewport.
The links within the .shareit section are styled to be centered both horizontally and vertically using the display:flex; justify-content:center; and align-items:center; properties. They have a width and height of 50 pixels, and the font size is set to 24 pixels with white text.
The opacity of the links is initially set to 0.75, which means they will be slightly transparent. When the user hovers over a link, the opacity increases to 1, making the link fully visible. Each link is also given a background color corresponding to a different social media site: Facebook, Twitter, LinkedIn, Reddit, Tumblr, and Pinterest.
This will give our social share buttons an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
margin: 0;
}
body{
height: 200vh;
}
.shareit {
position: fixed;
top: 150px;
}
.shareit a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 24px;
color: #fff;
opacity: 0.75;
transition: opacity 0.15s linear;
text-decoration: none;
}
.shareit a:hover {
opacity: 1;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #55acee;
}
.linkedin {
background: #0077b5;
}
.reddit {
background: #FF4500;
}
.tumblr {
background: #000000;
}
.pinterest {
background: #cb2027;
} Final Output:
See the Pen Fixed Social Share Button by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, adding fixed social media share buttons to your website can be a game-changer when it comes to increasing your content's visibility and reach. By making it easier for visitors to share your content on their social media accounts, you can drive more traffic to your website and expand your audience.
In this article, we've provided you with a step-by-step guide on how to add fixed social media share buttons to your website using HTML and CSS. We've explained the HTML and CSS code snippets you need to create your buttons and how to customize them to match your website's design.
We hope this guide has been helpful in creating your fixed social media share buttons. Remember, having these buttons fixed in place can greatly improve the user experience on your website and make it easier for visitors to engage with your content.
If you have any questions or feedback, please feel free to leave a comment below. Thank you for reading, and we wish you all the best in your website endeavors!
For more social media share Links/URLs read our article: Comprehensive List of Social Media Share Links/URLs for Facebook, Twitter, Instagram, and More
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
