How to Add Social Media Buttons to WordPress

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.

How to Add Social Media Buttons to your WordPress Blog

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.

How to add Social Media Buttons in WordPress: Upload your Social Media Icons

How to add Social Media Buttons in WordPress: Locating the File URL

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.

How to add Social Media Buttons in WordPress: Finding the Widgets Menu

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).

How to add Social Media Buttons in WordPress: Adding the Text Widget to the 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.

So, <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.

Now, <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.

How to add Social Media Buttons in WordPress: Adding the HTML for the First Button

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.

How to add Social Media Buttons in WordPress: HTML for Buttons in Widget

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.

Facebook Twitter Google+ Pinterest Bloglovin RSS Instagram
But what if you want to include these icons at the bottom of every post too? I use a plugin called WP Post Signature to do this. Simply install the plugin and use the same HTML code from your sidebar widget in the post signature. I hope this tutorial has been helpful to you. Please let me know if you have any questions or have suggestions for future tutorials.


This post has been featured on Cooking for the Seven Dwarves and Velvet Moon Baker.


Did you like this post?
GET NEW POSTS DELIVERED TO YOUR INBOX!

Facebook | Twitter | Google+ | Pinterest | Bloglovin | RSS | Instagram | Email Updates

I link up my posts to several link parties. Visit my link parties page for the full list.

27 Replies to “How to Add Social Media Buttons to WordPress”

    • I don’t see any reason why it wouldn’t work as the file manager and that particular widget are the same on WordPress.com and WordPress.org. Good luck and thanks for stopping by!

  1. Thanks for linking up at Sweet and Savoury Sunday, I’m the new co-host and would love for you to link up this weekend. This is such a useful tutorial, I’ll definitely be giving it a go!

  2. wow this is a really well done tutorial!

    I found your site searching for chalkboard social media icons (thanks!) and clicked on the tutorial just to see how you explained this somewhat complicated process. Amazing approach and execution!

    Andy

  3. Hi there! Great post. I followed the steps but my images aren’t loading when I open the page. It just shows a question mark. Any idea how to fix this? Thanks!

Leave a Reply