Add Social Media Icons To Blogger Blog

I was asked a few questions lately about how to integrate social Media Icons to a Blogger blog. I published some "Tutorials" add a Pin It button (Pinterest). Today, I'll explain how to display icons lead to social Media on the side of your blog or bottom of it. To Add this, there are Some steps to take:

I'll show you how in this article.

Step 1: choosing social Media icons :

There are social Media icons of very different styles. If you do not know how to create such icons yourselves, I have chosen for you two sources that offer free icons circular or square format.

Circular icons created by vervex - The pack can be downloaded from Deviant Art (the "Download" link in the right column, top). If these icons seem too small for your blog, you can instead download the Somacro Pack (large icons) and resize them yourself to the desired size.

Square icons created by Twelveskip - They are available in several formats to choose from and you can download on the website of Twelveskip (by clicking on "Download boXXed Icons").

After downloading the file, unzip it (with WinRar PC for example, double-click on the Mac). You will get a variety of icons in .png format. If you touch it, to resize example, consider re-register in .png format because it able to handle the transparency while a .jpg example will put a white background behind the icon, which does not necessarily pretty as the design of your blog.

Then choose the icons you need. For my example, I'll take Twitter, Facebook and Instagram. Your icons must be of the same size. For simplicity, rename them with the name of social media, all lowercase with no spaces as I did here:

Step 2: Put Icons Online :

To store our icons on the web, we're going to put them online somewhere. You can either upload them directly to Blogger or use a site like Tinypic.com, or Photobucket.com ImageShack.us.

Step 3: Upload images to Blogger :

1. Click the "New Article" button as if you wanted to write a new post. You can remove this draft article once the process is complete.

2. Click on the "Image" button as when you insert a picture in your blog.

3. Click "Choose File" and choose your icons on your hard drive. They are then uploaded to your blog, which should look like this:

4. Select the uploaded icons and click the blue "Add selected images". Your images should appear in your draft article as below. Do not try to rearrange them, it's not important.

5. On the left of the bar Blogger tools, you should see a "HTML" button. Click on it and do not panic seeing the code;)

6. What interests us in this code is the address where our images are stored. Copy the address of each icon (without copying quotes around) or leave this page open in a tab for the future.

Now Copy The Links Of Images On A Note, To Insert Them Into Blogger Gadget Later.

Step 4: Add A Gadget :

1. In a new tab, go back to Blogger and go this time in the "Layout" menu (located in the left column).

2. At the place where you want to display your icons, click "Add a Gadget". In my example, we will post them on the side of the blog.

3. Among the options that appear, choose "HTML / Javascript".

Understanding the code to insert

There he will have to work a little. Look at this code:

<a href="Link Of Your Social Media Account" target="_blank" title="Name Of Your Blog (Over) The Name Of Social Media"><img src="Icon Image Link" alt="social Media Name" width="width of the icon" height="height of the icon" /></a>

It is a code that can display a single image and a link to it.

The first part a href to specify where it takes the reader when he clicks on the image.

Part target="_blank" indicates that the link will open in a new tab (it will prevent the visitor leaves your blog for good if he is going to see your Facebook page, for example).

The title section to specify what is the link.

Then the party img src to specify the location where the icon is stored.

Part alt to describe the image (it is used for referencing images and for the visually impaired).

Finally, accurate dimensions, width and height in pixels.

Create your own code

So you have to replace each item with the correct information. Link your profile, you know. The link of the icon, you got in Step 2 of this tutorial. The size of the image, you can find PC flying over the image with the mouse or by right-click> Properties> Details and Mac using the shortcut Cmd + I on the file. In my example, it will be

<a href="http://www.facebook.com/Bloggingchimpblog" target="_blank" title="Blogging Chimp Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkdb6_Pb0G8-E8w1rNhQj6Ydhl04e5jLMbZBWQ8gUowpTQ-Q9QLDRBnPoR7TttUIm3Yzkr40-nxD3ii_lmVHJD03XRBLoYnirVcwnyPmSs9XM3zsMsT-8DiCeiQAZ09J4AXaLWGB9S0fP/s1600/facebook.png" alt="Facebook" width="32px" height="32px" /></a>

- There, my code only shows Facebook. The same for the other two social Media my example and I get this code:

<a href="http://www.facebook.com/BloggingchimpBlog" target="_blank" title="Blogging Chimp Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkdb6_Pb0G8-E8w1rNhQj6Ydhl04e5jLMbZBWQ8gUowpTQ-Q9QLDRBnPoR7TttUIm3Yzkr40-nxD3ii_lmVHJD03XRBLoYnirVcwnyPmSs9XM3zsMsT-8DiCeiQAZ09J4AXaLWGB9S0fP/s1600/facebook.png" alt="Facebook" width="32px" height="32px" /></a>

<a href="http://www.twitter.com/blogging_chimp" target="_blank" title="bloggig chimp Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaoNjPaOtUagHtpIcEfpBF5F2zuscaeLOzdqoSA-KIDxsqwZrWSgbcR1H3josD8LHkXnJ2C9Nc3KHSpHFZrRikYdvc10dN1TVNDgPBuuRkgCfpQOSdE60wiZnQjHNmotzdZHKvhEQ3Qml/s1600/twitter.png" alt="Twitter" width="32px" height="32px" /></a>

<a href="http://www.instagram.com/bloggingchimp" target="_blank" title="blogging chimp Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdg289yt-04I3UL8u4vcF-PlMBCIHBt5CzyemkuNCpIwAXNGGtIQoR2TIdiWiyJJG79eYUgmQ1VDCKBWn0xAghdXKtFEx1A8XpMsxDB6gLf9-PQ-T_wHIuPWJIqja5ZSVuJs5GWLgSo6i/s1600/instagram.png" alt="Instagram" width="32px" height="32px" /></a>

The code you have created should be inserted in the "Content" section of your gadget. You do not have to put a title (unless you want to display something on top of your icons, such as "Follow me on social networks"). It should look like this:

You just have to save the icons will be displayed like this on your blog and flying over them with the mouse, you can click to access the social network of your choice: