How do you add social media buttons to your website?

I will share my experience in adding social media buttons to my website projects. In my case, I specifically want to add social media sharing buttons because I want my website visitors to share my website link. We often see these buttons on blogs because the owner of the website wants you to share their blog.

There are different ways to do this. Choose a method below that will work for your situation.

Use HTML and CSS code

When I need to do custom web pages or programmable web pages, I copy and paste the following code where I want the social media share buttons to appear.

HTML code:

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
    <link rel="stylesheet" href="styles.css" />
 
    <div class="shareit">
      <!-- facebook -->
      <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="blank" title="facebook"><i class="fa fa-facebook"></i></a>

      <!-- twitter -->
      <a class="twitter" href="https://twitter.com/intent/tweet?text=YOUR_TITLE&url=YOUR_URL" target="blank" title="twitter"><i class="fa fa-twitter"></i></a>

      <!-- linkedin -->
      <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=YOUR_URL&title=YOUR_TITLE" target="blank" title="linkedin"><i class="fa fa-linkedin"></i></a>

      <!-- reddit -->
      <a class="reddit" href="https://www.reddit.com/submit?url=YOUR_URL&title=YOUR_TITLE" target="blank" title="reddit"><i class="fa fa-reddit"></i></a>

      <!-- tumblr -->
      <a class="tumblr" href="https://www.tumblr.com/share/link?url=YOUR_URL&name=YOUR_TITLE&description=YOUR_DESC" target="blank" title="tumblr"><i class="fa fa-tumblr"></i></a>

      <!-- pinterest -->
      <a class="pinterest" href="https://pinterest.com/pin/create/button/?url=YOUR_URL&media=IMAGE_URL&description=YOUR_TITLE" target="blank" title="pinterest"><i class="fa fa-pinterest-p"></i></a>
    </div>

CSS code:

*{
  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;
}

If you use the code above, it is a good idea to test these buttons at least once a month because social media platforms sometimes change their links. Because of this, the function of social media buttons might break.

Use a WordPress plugin

Many websites online are powered by WordPress. If your site is one kf them, you can just install a social media button WordPress plugin.

1. Login to your WordPress admin dashboard.
2. On the sidebar, click Plugins.
3. Click Add New.
4. Search for “social media buttons”
5. Install the one with many installs.
6. Activate the plugin.
7. Play around with settings to match your requirements.

Use a third-party plugin

If you don’t like to code and if you are not using WordPress, there are also free plugins available that you can use. Here are some of the third party plugins I used before: SumoMe, AddThis, and AddToAny. Search for them on Google and you will find the exact instructions on how to use them.

What’s next?

Once you have social media sharing buttons on your site, you might want to further improve your website’s user experience with social media feeds. It will help increase your social media followers, make your visitors stay longer on your site, and eventually get more sales.

You can use SociableKIT to add social media feeds to your we site. It is free and easy to use! Create a social media feed widget here.

That’s it!

There you have it! I hope that’s helpful. If you have a specific case or requirement, let me know. Maybe I did not have your specific situation but I might find a solution for you.