2

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

Growing social media buttons

© 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:

Alice's social sharing buttons

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

Lottie's social sharing buttons

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:

Alice's footer social sharing buttons

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.

Disclaimer: since writing this post I have come across a problem. If you have played with the Social Media Icons widget, and find you don't like the results, it seems you are unable to successfully add image code to a Text widget and have it show up on your sidebar. This is excessively annoying, and has caused much social sharing button stress amongst my readers.

Therefore I suggest you read this post first before taking any action, and depending upon your style of theme and the amount of social sharing buttons you will be using, then make a decision to which method you prefer.

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':

Appearance and widgets

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

Social media icons widget

Click on it to open it up:

Opened Social Media Icon widget

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

Empty Social Media Icon Widget

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:

Filled in Social Media Icons widget

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:

Alice's social sharing buttons

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':

Add New into Media Library

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

Upload New Media menu

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:

Find the social media button on your computer

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

Social media button uploaded successfully

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:

Check it's the right social media button

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

This is 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):

Appearance and widgets

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

Find 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:

Select which sidebar the text widget should go

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':

An open Text widget

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:

Beginning of image code

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:

Save 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:

Add the image's URL to 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:

Finish off the image code

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

Slideshare social media button

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.

Slideshare URL in browser bar

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.

Beginning the link code

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:

Add the link URL

Remember to close the URL with more quotation marks.

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

Joining the code up

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:

Closing the link 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:

Continue social media buttons image code

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:

Image widget

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

Image widget opened

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

Sharing is caring
Check out these fabulous posts!

How blogging and sharing are best friends

Did you enjoy reading this post?

If you would like to be the first to know about my other exciting blogging events and activities, as well as reading a cool infographic created especially for you, sign up here:

Click Here to Leave a Comment Below 2 comments
Would you like more comments on your blog posts?
x