Today I am going to show you how to install social media icons on Blogger – the easy way! You will not have to directly edit the code and you will not need a 3rd party source like Photobucket or Flickr to host the images for your social media icons. Social media icons are one of the most valuable ways to get readers to connect with us on other areas of the internet. Installing social media icons allows an easy way for blog visitors to follow us on our social sites and connect with us in a way that is convenient for them.
Would you rather watch our YouTube video on this tutorial? Click here to watch “How to Install Social Media Icons on Blogger” via YouTube
The first thing you will need in order to install social media icons on Blogger is to find a set of social media icons that will compliment your current blog design! You can check out our Etsy store for some really cute social media icons but the internet also has tons of free social media icons as well! Once you find icons you like follow the directions below to install your social media icons on Blogger in your sidebar. It looks like a lot of steps but this shouldn’t take more than 10 minutes as long as you have your social icons downloaded to your computer and your social sites open and ready to grab the url!
To start: log into Blogger and create a new post. This post is where you will store your social media icon images.
//////////// IMPORTANT: This post should never be published! Click “save” after editing as this will store the post as a draft so that it does not appear on your blog with your other posts.////////////
When you are done with the post and you have saved it simply exit out of the window or navigate to any other page on your blog. If you accidentally click “publish” you should start again.
Give your post a title that will remind you what it is and remind you not to publish it. I usually put “IMAGES: DO NOT PUBLISH OR DELETE” but you can name it whatever you would like.
Next it is very important that you make sure that you are in the “HTML” preview window. There are 2 tabs at the top of your editing box one says “Compose” the other says “HTML”. Click so that you are on “HTML”. The difference is the compose window will show you the actual images whereas the HTML window will show you the code. If you upload via “compose” it will create spaces and those spaces will be placed into the code which will pretty much make everything a huge mess.
You should now see all the social media icon images you just uploaded (shown below). If you don’t see them click on “Compose” again.
We are now going to add links to our social media icons!
////////Help with image URL’s for linking your social media icons///////
You will need the url (web address – http://……) for each social site you are linking to. Make sure it is the address of your profile page and not the social sites home address. You will want to use the url of the page you want others to land on when they click that button. You don’t want to install social media icons on Blogger or any site unless they can click the icon and land on your actual social page – this is again the purpose for installing icons.
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 will use in step 7!
IMPORTANT: Sometimes you may click on an image and it will turn blue but then when you click “Link” the box will not pop up. Just repeat the process – so click the image again so that it’s blue and then click “link” again.
Next we need to center our icons:
After the icons are centered and linked switch back to “HTML” mode (where you can see all the code).
A box will pop up. Enter the code you copied from step 10 into the box and click “Save”.
If you want a title (“Connect” “Stay Connected”, etc…) you can enter one into the “Title” box – I usually just leave it empty.
Here is how to paste the code you copied: If you copied the code using your mouse just click inside the box and then right click on your mouse and hit “paste”. If you used your keyboard click “ctrl-V” (for Mac “Command-V”).
After saving the above code be sure to hit “Save arrangement” on the main layout page in the upper right hand corner as shown below and then then click “View blog” to see your new icons!
Check your links by clicking on each social media icon! If they all link to the correct spot then you are all set! Congratulations – you successfully installed your social media icons! See it wasn’t so bad, right? Now you know how to install social media icons on Blogger – pretty awesome! If you did encounter any problems feel free to contact us!
Like this post? Tell your friends that they can also learn to install social media icons on Blogger by sharing the post below!