Last week, I shared my first freebie with all of you: 3 sets of social media icons and 3 ribbons in this year’s Pantone color of the year. Thank you so much to everyone who has downloaded them or given me feedback! One of the questions I’ve been getting is how to install the icons so I’ve created this tutorial for those of you who use WordPress. If you use Blogger, Angela at A Typical English Home has a wonderful tutorial on how to add social media buttons if you use Blogger.
And now on to my tutorial for WordPress users…
The first thing you want to do is upload your social media icons to your Media Library. Next, right click the edit button next to each icon you just uploaded and open in a new window. You will need the file URL from this page later, so I like to open them each in a new tab or window so I can easily swap back and forth.
Now, we’ll add the icons to a widget for your sidebar (or any other area you can put a widget). On the dashboard, select Appearance and then select Widgets.
Now, find the Text widget from the list of available widgets on the left side of the page and drag it to the widget area of your choice on the right (for example your sidebar).
We’re going to be using some HTML for our social media buttons, but don’t worry because its pretty simple and I’ll explain what everything means. Below is the HTML for my facebook button.
Let’s talk about what each part means. The most basic way to make a link in HTML is as follows:
<a href="url">link text</a> But what we’re doing here is replacing the link text with a photo by adding the
<img src="file url"/> code where the first example says link text.
<a title="Follow Me on Facebook" href="https://www.facebook.com/stmblhappiness" target="_blank" > is the link to my blog’s facebook page, but you’ll probably notice some extra code in there. The part that says
target="_blank" means that my link will automatically open in a new tab/window. The part that says
title="Follow Me on Facebook" is how you get that text that shows up when you hover your mouse over the link comes from.
<img alt="Facebook" src="http://www.stumblinguponhappiness.com/wp-content/uploads/2014/01/facebook.png" /> is for my facebook social media icon. The url is the file location from the edit media page we talked about earlier. The
alt="Facebook" is the alternate text and is what will show up if the image doesn’t load for some reason. There is a lot more HTML you can use to customize your buttons and links and you can read more about it at W3 Schools, but I’m sticking to the basics here.
To add your social media buttons to your widget, just copy and paste the code above into your text widget and customize it for your facebook profile and your file url.
Then, repeat until you have added all of your social media sites. To make it easier, you can also just copy and paste the code below, which includes the code for Facebook, Twitter, Google+, Pinterest, Bloglovin, RSS, Instagram, and Email.
This is what the finished product will look like (minus the email icon) in my original icon sizes. My icons in my blog sidebar are actually much smaller; they are 34×34 pixels. If you want smaller icons, I highly recommend you resize your icons before uploading them to WordPress. Why? Because re-sizing the icons in the HTML code makes your page load more slowly.