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.
You can do this in two simple steps:
- 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.
- 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 WordPress.com 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.
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 Dashboard and upload all of the icons to your blog.
Step 2. Add a Text widget and format your buttons using HTML.
Go to Appearance->Widgets in your Dashboard, 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:
<div><a href="[full link to your Twitter]"><img title="Twitter" src="[image URL for Twitter icon]" alt="Twitter" width="35" height="35" /></a><a href="[full link to your Pinterest]"><img title="Pinterest" src="[image URL for Pinterest icon]" alt="Pinterest" width="35" height="35" /></a> <a href="[full link to your Facebook page]"><img title="Facebook" src="[image URL for Facebook icon]" alt="Facebook" width="35" height="35" /></a> <a href="mailto:[email address]"><img title="Email" src="[image URL for Email icon]" alt="Email" width="35" height="35" /></a><a href="[full link to your RSS feed]"><img title="RSS" src="[image URL for RSS icon]" alt="RSS" width="35" height="35" /></a></div>
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
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:
Save it, and check out your pretty new social media buttons!
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 Appearance > 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.