Social Tools

Add Social Media Buttons to Your Sidebar or Footer

This guide will walk you through how to add a horizontal line of social media buttons to your sidebar or footer, using whatever icons you prefer.

Note: Some of the instructions from this guide are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.:

We offer two ways of adding social media icons to your website or blog. If you prefer a simple way to add icons for the most popular social networks, take a look at our social media icons widget.

If you want to add icons for less popular social networks, or want more control over how the icons appear, you can learn how to do so in this guide.


You can do this in two simple steps:

  1. Find the social media icons you would like to use on the internet, download them, and then upload them to your blog’s Media Library. We have a selection of icons for use here.
  2. Add a Text Widget to your sidebar or footer. Using HTML, add the icons to the Text Widget, and link them to your social media services.

Alternately, you can use the Gravatar profile widget that has them built in.

Need more detail? Read on.

Many themes offer social media buttons in the header or footer area, but others do not. Even if your theme does have this feature, you might want a different placement for your buttons, or you might want to use different icons that match your header.

It’s easy to put your own icons in a neat line in your sidebar or footer using the Text Widget and a bit of HTML.

Step 1. Find some social media icons that you like, and upload them to your Media Library.

Note: Some of the instructions from this guide are referring to the WP Admin dashboard. You can get to this dashboard by adding /wp-admin to the end of your site’s url (e.g.:

You might already have some icons you would like to use, but if not, just Google “free social media icons.” There are lots, but make sure you’re not violating any copyright. Once you’ve found some that you like, download them to your computer.

Then, go to Media → Add New in your WP Admin dashboard and upload all of the icons to your blog.

↑ Table of Contents ↑

Step 2. Add a Text widget and format your buttons using HTML.

Go to your Customizer → Widgets in your homepage, find the Text Widget, and drag it into your sidebar or footer.

Add a title to your widget if you like, and then add some HTML that is similar to the following:


Replace the bracketed bits with your specific information. Remove the brackets themselves, but leave the quotation marks and everything else. For the full links, paste the link that you want the button to point to. Make sure each link begins with http:// or https://. For example, for your Twitter page, the link would be:

For the image URLs, find the Twitter icon in your Media Library and click “Edit.” Then, copy the entire File URL here:


Repeat with all of the links and image URLs. If you’d like to add or remove services, or display them in a different order, just edit the code as necessary. You might need to tinker with the width and height values to make all of your icons display neatly in your sidebar. We’ve provided 35×35 above as an example, but you can replace that with any values you like.

When you are all finished, your Text Widget will look similar to this:

Text widget

Save it, and check out your pretty new social media buttons!


↑ Table of Contents ↑

Other Examples and Sample Images

If you are having trouble finding social media icons on the web and would like some examples to use, you can find more on this site.

To use these icons in your widget, first create a blank Text Widget from the Customizer  Widgets page.

Next, copy the block of code from the Social Media Widgets page for the icon style that you prefer:

Finally, edit the code to remove links to any services you do not plan to use, and add others if you prefer. You will need to change the links to include your information, otherwise they will not link to your site:

For this example, you would change [full link to your Twitter] to be a link like this for your site instead:

Do this for the remaining Social Media links so that each site points to your page, and Save the widget.

Not quite what you're looking for?

Get Help