Today I am going to show you how to easily install social media icons on a WordPress blog without having to edit the code. I know that editing html to install social media icons on a WordPress blog or any blog can get a bit scary so not to worry there is always an easier way and that is what we will cover today! When you add social media icons to your blog sidebar you give readers a great way to connect with you on all your other sites, it’s a great way to spread the word about your blog and a great way for readers to spread the word about your blog for you. If you don’t already have social media icons installed on your blog it is definitely something you should look into!
Would you rather watch our YouTube video on this tutorial? Click here to watch “How to Install Social Media Icons on Blogger” via YouTube
I do believe that social media icons are something that every blog should include but I also understand that installing them yourself can be intimidating so that is why I want to show you how to install social media icons on a WordPress blog the easiest way possible! It will only take a few minutes and it will be very simple just follow the directions below:
Step 1: Find and upload the social media icons you want to install
Before I show you how to install social media icons on a WordPress blog you will need to find the social media icons that you would like to install on your blog. We have some cute social media icons at our Etsy store that you can check out or you can search the web just make sure you have the rights to use the icons before you grab them.
If you ordered one of our premade / self install WordPress themes your theme included icons which can be found in your theme download files.
Once you find the social media icons you want to install download them to your computer and take note of where you downloaded them so you can easily find the file later.
Step 2: Log into your WordPress blog and create a new post
VERY IMPORTANT: DO NOT publish this post, ever, just save it as a draft.
Step 3: Upload the social media icons you want to use to your new post
Click on the “add media” icon to upload your icons
Choose all the icons that you want to use. Once they upload make sure settings are at: alignment:none link to:none size:full (If you feel comfortable you could link each icon at this point and skip step 6, if not continue as stated)
Then click add to post
Step 4: Fix icon spacing (if you are using longer icons, rectangular icons, or icons that should be stacked instead of side by side skip this step)
Click to be in the text view (tab in upper right hand corner) and just click backspace to close the space so that it looks like the 2nd picture below
Step 5: Center your icons
This step is not required but I like everything to be centered in my sidebar so that it looks nice and organized
Just select all the images in preview mode. To select all you click “ctrl A” on your keyboard or “command A “on mac – for this step do not use your mouse/cursor and roll over to select all as it sometimes will re-stack the images and you will have to start over so instead click “ctrl A” or “Command A”..
Once they are all blue just click the center align button
Step 6: Link your icons
////////Help with image URL’s for linking your social media icons///////
You will need the url (web address – http://……) for each corresponding social site. Make sure you grab the address of your profile page and not the social site home address. So use the url of the page you want readers to land on when they click that social media icon from your blog. You want readers click the icon and land on your actual social page so for example when readers click on my Facebook icon I want them to end up on:
https://www.facebook.com/BlogaholicDesigns not just facebook.com
So this is the url I would use in step 6!
REPEAT this step for each social media icons you want to use in your sidebar.
Be sure you “save as draft” remember do not publish this post.
Now switch over to text view and grab (copy) all of the code.
Once all the code is copied (and you have saved the post as a draft) head over to your “Widgets” panel
Drag over a text box to the area in the sidebar that you want your social media icons to appear
Paste the code as shown
You are all set! Head over to your blog to view you new icons!
ADDING AN EMAIL ICON
If you plan on using an email icon and you don’t want to mess with the code I suggest linking the icon to a contact page. You could set up a contact page and either list your contact info there or if you use Jetpack you can create a contact form then all you have to do is link the icon to that page.
If you would rather have the email open automatically when a reader clicks on the email icon you will have to edit the code but it’s not too bad. Just upload it with the other icons and for the time being link the email icon to your home page then you will go in and change the code as shown below. The top image has another link in place for the email icon, change it to look like the second image so it says: “mailto:youremailaddress.com”
Like this tutorial? We would love to have you share how to install social media icons on a WordPress blog with others, just click any of the sharing links below!