May 5, 2014

How To Install Social Media Icons On Blogger

installing social icons on blogger


If you've visited my Etsy shop already you might have noticed that a part of the shop is dedicated to social media icons. These icons can be installed on any blog or website and when a visitor clicks on one of these icons they will be directed to the blogger's Facebook page, Twitter account, Bloglovin' page, Google+ page etc. In a time where social media rules the world (not always fun, I'll be the first to admit) blogs and websites can't do without these icons anymore.

When I first started a Blogger blog I noticed all these little icons on other people's sites but had no clue how they made them work. By that time I was able to upload an image to my sidebar, but that was about it. How to make images like these icons 'clickable' and direct to the right website was still Abracadabra for me.

We're a little further down the road now and the secrets of making icons work on Blogger have been revealed to me. So why not reveal them to you? I hope my way of explaining is understandable, I'll try to do my best to keep it as practical as possible. Here we go!

STEP 1 - STORE YOUR ICON IMAGES ONLINE

Let's start with this social media icon and assume it's stored somewhere on your computer:



To make such an icon clickable on a site it has to be stored somewhere online. For that I like to use Photobucket (www.photobucket.com). There are similar programs around that do the same, but I stick to Photobucket in this tutorial.

Visit their site and create a free account. Once the account is created you will have the opportunity to choose and upload a picture from your computer (see picture below).

Installing social icons on blogger


Upload the social media icon you want. Now it's also stored on Photobucket online. You can give it a title if you like (see picture below). I picked an Instagram button to install on my site.


how to install social icons on a blog


When you select this picture on Photobucket you will see 4 links appearing on the right. Click on the HTML-link. You will notice that it says 'copied' while you click it.


using photobucket

You have now stored your image on Photobucket and you have copied the storage link. Now on to the next step!

STEP 2 - INSTALL THE ICONS ON YOUR BLOG

Now go to your blog and select the 'Layout' option. You will see the make up of your blog with the sidebar.

the blogger layout option

Now click 'Add Widget' in your sidebar layout and choose the HTML-widget option.

adding a gadget to blogger


With the little '+' icon you actually add the gadget to the top of your sidebar. A small screen will open in which you can now paste the copied link from your Photobucket image.

html code for social icons
 
But we're not there yet. For the icon to work it must lead two ways:
it must refer to the place where it is stored on Photobucket
and it has to point to the site you want to direct your readers to (Facebook, Twitter, Pinterest etc.)

In the image below you see the HTML-code I copied from Photobucket. I have made the part that refers to the image blue. You need that part, so keep it here. The part in front of the blue text has to be altered though, since we don't want our readers to end up in our Photobucket account. I made the part that we are going to cut out and throw away pink.

html code for social icon


Now we need to know the pathway to the site we want to send our readers to. This is something you need to figure out yourself, since I don't have access to any of your accounts/pages. In case of my Instagram page I need to send them to http://www.instagram.com/daphnepopuliers. In the image below I changed the pink text and replaced it with the pathway to my Instagram page, I made that text green for you.

adding social icons to blogger

Now we're done and we have to click on 'save'. Go view your site and try to click on the icon, it should direct you to the site you wanted.

adding an icon to blogger


But that was only one icon. Making an image clickable and leading to a different page can also be done by inserting an Image Widget in the sidebar. The thing with social media icons is that we want them either next to each other to form a row in our sidebar, or (when they're rectangle in shape) we want them placed directly under one another. That is why I use this method. So for installing multiple icons next or under one another, just use the same HTML-widget we used to install one icon. You can paste the HTML-codes for each icon under the previous one (see image below).


As you can see I left a blank line between each icon code. That is just to make it easier to read. The line does not affect how it will look on your blog. Every block of coding is for one icon. The pink text has to be replaced by the link to your social pages, the blue text will show your image link (the one that Photobucket gave you).

The orange text is a little extra that you can add. With adding <center> in front of the coding and </center> behind the coding the icons will all be centered on the row they appear on. So it's just a way to style things. If you leave it out, the icons will be outlined on the left.

Depending on how wide your sidebar is, the icons will be placed next to each other or/and under each other.

THE EMAIL ICON AND RSS FEED ICON

While the links to your Facebook page or Instagram page will be easy to find for you, you might not know how to link correctly to your email address and your blog's RSS Feed. An RSS Feed is basically a way people can easily follow your blog, so it is worth the effort to put this icon up as well. An RSS Feed icons looks like this:


When you want to link to your email address this is the code you should use:

MAILTO:YOUREMAILADDRESS
in my case it would look like this: 'mailto:daphnepopuliers@gmail.com'

When you want to link to your RSS Feed this is the code you should use:

HTTP://BLOGNAME.BLOGSPOT.COM/FEEDS/POSTS/DEFAULT?ALT=RSS 
in my case it would look like this: 'http://thedutchladydesigns.blogspot.com/feed/posts/default?alt=rss'
If your blog has a custom domain name (like mine) you can skip the blogspot part and then it will look like this: 'http://thedutchladydesigns.com/feed/posts/default?alt=rss'


I hope this tutorial helped you out with installing your social icons on your blog. I know there are other ways to do this, after all there are many ways that lead to Rome, not? If you are ready to start uploading your own social icons, I have quite a selection of beautiful icons available in my Etsy shop, so feel free to nose around!


Share if you like:

2 comments

  1. Thankyou for this tutorial!! It was so easy to follow :)

    themansrunway.blogspot.co.uk

    ReplyDelete

© The Dutch Lady Designs | All rights reserved.
Blogger Theme Created by pipdig