How to put social media buttons on your blog’s sidebar

© mkhmarketing, Growing Social Media. via Flickr

If you've got a WordPress.com blog, there is now a widget for adding social media buttons on your sidebar.

It's called 'Social Media Icons' (of course!).

I'll show you how to install it, so you can see its shortfalls. On my blog it's not so bad:

But on my friend's blog, well...

You can see her problem. It all depends on the theme you have, and how it has been programmed to cope with this widget.

And anyhow, those icons are just too darn small!

I like my social media buttons a bit bigger, like I have in my footer:

So it is easier to click on them!

After I've shown you about the Social widget, I'll tell you how I added my customised social media buttons as well.

Where's this Social Media Icons Widget then?

It's very simple. Go to Appearance in the left sidebar and mouse over it to bring up the drop-down menu and select 'Widgets':

And in the widget listings (which are alphabetical) search down to find the widget called 'Social Media Icons':

Click on it to open it up:

And once you've checked the correct sidebar is selected, click on the green 'Add Widget' button and it will be placed at the bottom of the sidebar 'bucket' opened ready to be optimised (filled in):

You can see various fields that require your social media profile's usernames. Most of these are the end bit of the URLs (web addresses) when you're logged into your profile.

For example, my Twitter profile's URL is https://twitter.com/alice_elliott, and the 'username' is alice_elliott, which is the bit on the end.

Here's that widget filled in with my usernames:

As I don't have Instagram, GitHub or Vimeo accounts, I can't fill in those fields.

These are the only options available. If you look at my footer, you'll see I also have social media buttons for Google+ and Slideshare (I'm amazed that this widget doesn't have an option for Google+), and this is because I added them myself to my collection.

Once you've filled in the fields that you can, and have clicked on the green 'Save' button, lots of wonderful magic will occur behind the scenes to make those icons link properly to your social media accounts.

And you can go check out your new widget on your sidebar to see if it's satisfactory:

If you think they're too small, they are badly positioned (aligned left rather than centre) or there are icons missing, it's time to create your own social media buttons on your sidebar.

How do I create my own social media buttons?

What you are going to do next is a bit technical (suitable for post-beginners), and you may require a bit of help from a designer.

However, if you are lucky enough to have Photoshop, or are a wizard with Canva, Photobucket and compress.io (which was recommended to me in the comments of my post about making web-ready images), you could create your own social media buttons.

How big they are will depend on the width of your sidebar, and whether your theme automatically creates a space between pictures or not.

Most of this is trial and error, or requires some dexterous activity with a calculator, but you'll soon work out the width of your sidebar and create your images to fit within that space.

Remember to give your social media buttons image files suitable names so you can easily locate them in the future, and store them in a safe place on your computer.

The first thing you need to do is to upload your new social media buttons into your 'Media Library'. Go to the left sidebar and mouse over 'Media' to bring up the drop down menu, and select 'Add New':

You'll be taken to the 'Upload New Media' menu where you will see the 'Select Files' button:

Once you've clicked on the 'Select Files' button, you'll be taken to your computer to find those social media button files you so lovingly created:

Click on the 'Open' button and it will immediately be uploaded into your Media Library:

Now you will want to find this newly uploaded image's URL so you can copy it. Click on the 'Edit' link on the far right to go to its 'Edit Media' page:

And in the right sidebar in the 'Save' menu you'll see the image's URL:

You know that everything that is uploaded into your blog has its own URL or web address.

I want you to either copy this into your computer's memory, or keep this page tab open so you can go back to it later.

Now open up your blog in a new page tab, and in the left sidebar, find Appearance and mouse over it to bring up the drop down menu to select 'Widgets' (as before):

But this time you are going to search for the 'Text' widget:

Which you will upload in the same way as the 'Social Media Icon' widget above, by clicking on it and selecting which sidebar you want it to show on:

And after you've clicked on the green 'Add Widget' button, the 'Text' widget will appear opened up at the bottom of the sidebar 'bucket':

Now we're going to be like proper blog designers and write some code!

This is because 'Text' widgets are empty, unlike the editing field where you write your blog posts. Here there are no editing icons at the top to help you.

Don't worry, I will help you all the way!

We're going to write the code that tells the 'Text' widget to recognise the social media button image.

First, type the code below into your 'Text' widget:

Note the quotation (or speech) marks at the end, and there is a space in between <img and src="

Now you go back to the page tag that shows the image's URL:

And you need to copy it by Control C (or Command C if you're using a Mac).

Then go back to the page tab with your 'Text' widget, and paste in the image's URL into the code:

And – very important – add another set of quotation marks at the end of the image's URL (the red arrow is pointing to it). These quotation marks define the image's URL from the rest of the code.

Then you add the closing code (/>), like adding a full stop to the sentence:

Now if you were to save this 'Text' widget and then go and look at your sidebar, you would see the image aligned left:

But it's all very well having a pretty social media buttons image sitting there, it needs to link to the profile it is associated with.

So open up another page tab, and go to the social media profile in question. At the top in the browser bar you will see the URL or web address. Copy it or keep the page open.

Then go back to the page tab that has the 'Text' widget open.

We're going to add some link code to the image code that's already there.

At the top, type in <a href=" leaving a space between the <a and href="

Then after the quotation (speech) marks, paste in the social media profile URL, which you will have copied from the open tab that contains it:

Remember to close the URL with more quotation marks.

Then we need to connect the link and image codes together with ><

And at the end we need to close the link code with </a> so that the link's details doesn't contaminate any other code:

And there you have it! Simple code that shows an image that is linked to another website.

And now repeat the process with another social media buttons image and link it to its associate social media profile. If you want them side by side, just continue the code like this:

This is the code for the social media buttons in the footer of this website.

You can use this system for any other images you may want to place on your sidebar, especially if they are small and sit side by side.

But if you want a single image on your sidebar, there is the 'Image' widget:

Which when placed in a sidebar 'bucket' and opened, looks like this:

But you will still need to know the URL of your image from your Media Library. And you can only use one image with this widget.

If you want to know what all these extra fields represent, go to the bottom of this blog post for an explanation.

So now you can have fun experimenting with adding images to your sidebar, and then get your friends to comment on your latest blogging expertise!

The following two tabs change content below.

• Bio
• Latest Posts

Alice Elliott

Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

Latest posts by Alice Elliott (see all)

• How to create a blog if you’re a real beginner - 9 January 2016
• Comparing blog post writing pages - 27 August 2015
• Comparing blog post listings pages - 19 August 2015