How to Add Social Media Icons to Sidebar of your Blog

Add Social Media Icons to Sidebar of your Blog without using a plugin. Display links to social media profiles on your blog by adding code to sidebar widget. It is always good to include social media profile links in your blog sidebar, so that blog readers or visitors will get a chance to engage further and helps to share their thoughts easily.

img via

We have worked on this stuff and got two different sets of social media icons, you can add any one of these based on your requirement. Now, lets start with the coding part.

Also Read: How to add nofollow to all External Links in your Blog

Style 1 : Add Social Media Icons to Sidebar of your Blog

You need to edit style.css file in your theme, hence it is recommended to backup your theme.

Add below code to Sidebar Text Widget

• Go to Appearance > Widgets > Text Widget and add below code to it.
• Replace links to social media profile with your own links.

/* Add this code to sidebar text widget in your blog */
<div id="social-profiles">
<a title="Like us on Facebook" alt="facebook" rel="external nofollow" class="social facebook" href="http://www.facebook.com/wpsquare">Facebook</a>
<a title="Follow us on Twitter" alt="twitter" rel="external nofollow" class="social twitter" href="http://twitter.com/wpsquare">Follow Us</a>
<a title="Subscribe to our Feed" alt="feeds" rel="external nofollow" class="social subscribe" href="http://feeds2.feedburner.com/wpsquare">Subscribe</a>
<a title="Contact Us" alt="contact" rel="external nofollow" class="social contact" href="http://www.wpsquare.com/contact/">Contact Us</a>
</div>

Add below Code to Style.css File

• Its time style those icons, which are just added to your blog sidebar.
• Go to Appearance > Editor and add below CSS code to it.
• Also it is recommended to upload the image used in this code to your own server.

/* Add this code to style.css file in your theme folder */
#social-profiles {
float: left;
margin: 5px 0;
}
#social-profiles .social {
background: url("http://i.imgur.com/eedpu.png") no-repeat scroll center top transparent;
border: medium none;
float: left;
height: 20px;
padding: 40px 0 0;
text-align: center;
width: 64px;
}
#social-profiles a.social {
color: #666666;
font-family: Arial,Helvetica,Tahoma,sans-serif;
font-size: 11px;
text-shadow: 1px 1px #FFFFFF;
}
#social-profiles .facebook {
background-position: 0 0;
}
#social-profiles .twitter {
background-position: -64px 0;
}
#social-profiles .subscribe {
background-position: -128px 0;
}
#social-profiles .contact {
background-position: -192px 0;
}

Check Out: How to Backup your WordPress Blog to Google Drive

Style 2 : Add Social Media Icons to Sidebar of your Blog

You need to edit style.css file in your theme, hence it is recommended to backup your theme.

Add below code to Sidebar Text Widget

• Go to Appearance > Widgets > Text Widget and add below code to it.
• Replace links to social media profile with your own links.

/* Add this code to sidebar text widget in your blog */
<ul class="social">
<li><a title="RSS Feed" class="social-feed" href="http://feeds2.feedburner.com/wpsquare/">RSS feed</a></li>
<li><a title="Twitter" class="social-twitter" href="http://twitter.com/wpsquare">Twitter</a></li>
<li><a title="Facebook" class="social-facebook" href="http://www.facebook.com/wpsquare">Facebook</a></li>
<li><a title="Youtube" class="social-youtube" href="http://www.youtube.com/user/wpsquare">YouTube</a></li>
<li class="last"><a title="Google Plus" class="social-gplus" href="https://plus.google.com/106412545300888534854/">Google </a></li>
</ul>

Add below Code to Style.css File

• Now, its time to add some styling to these icons.
• Go to Appearance > Editor and add below CSS code to it.
• Also it is recommended to upload the image used in this code to your own server.

/* Add this code to style.css file in your theme folder */
.social {
background: none repeat scroll 0 0 #FFFFFF;
clear: both;
font-family: georgia;
list-style-type: none;
margin-top: 12px;
overflow: hidden;
padding: 0 0;
}
.social li {
float: left;
margin-right: 10px;
text-align: center;
width: 50px;
}
.social li.last {
margin-right: 0;
}
.social li a {
color: #666666;
font-size: 11px;
line-height: 34px;
opacity: 0.7;
padding-top: 42px;
}
.social li a:hover {
color: #000000;
opacity: 1;
text-decoration: none;
}
.social .social-feed {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-twitter {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -79px transparent;
display: block;
}
.social .social-facebook {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -158px transparent;
display: block;
}
.social .social-youtube {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -237px transparent;
display: block;
}
.social .social-gplus {
background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -316px transparent;
display: block;
margin-right: 0;
}

Also, if you need any other style of icons, let us know by posting a link in the comment section, so that we will get a chance to write an article on it.

You have successfully added social media icons to sidebar of your blog, if you need any help regarding this article, please do drop a comment, we will get back to you very soon.