How to Add Social Icons to Your Blogger Blog

Do you want to add social media icons to your blog so that readers can find you elsewhere on the web? Here are step-by-step instructions. 


Overview: You will add an "HTML/Java Script" gadget to your sidebar, and these instructions will walk you through writing the HTML code. I'm no HTML expert; if I can do it, so can you. The idea is to link publicly available images of social media icons (which you will host on Photobucket) to your own social media pages. 


Basic Tutorial


Step 1: Find a set of icons you like.


Google "free social media icons" and you'll find great links to free icons. Here are two I like: The Ultimate Roundup of Amazing Free Social Media Icon Packs and 50 Free Social Media Icon Sets. Download the set of icons, which often include different sizes. The buttons I use are 32 x 32 pixels.

Circular set I used to use from Blog Perfume. The new set I use is at BrandiGirlBlog

Step 2: Upload the images you want from the set to a Photobucket account.

• Open a Photobucket account if you don't have one. Set it to public.
• Upload the specific icons you want to use to your account.

Step 3: Write HTML code that will link these images to your social sites.

• Open a separate text file or word document to write your code.

• The code for each icon will follow the format below (in this example, the red link is my Twitter page and the blue link is my Twitter icon on Photobucket). The rest of the steps will show you how to create this code. 

• To get this code, go to your Photobucket account. Go to the image you want on Photobucket (e.g., Twitter icon), click on it, and you will see a box like this on the right part of the page. Click your cursor inside the third box that says "HTML code." This will copy the code, but you will need to tweak it a bit.

click on the third line (HTML code)

• Paste the code into your working document. It will look like this:

• Replace the first link (the one highlighted in red) with your social media link. To get your social media link, go to your site (Facebook Fan page, Twitter profile, etc.) and copy the address from the browser bar. Your finished code for one social icon will look like my Twitter code above.

• Repeat this process for each social icon you want to use. If you have three icons, Facebook, Twitter, and G+, you will have three paragraphs in your code. At the end of this post are instructions for a more sophisticated look and specific instructions for an RSS feed icon.

• Copy the entire finished code. You will be pasting this into your Blogger gadget.

Step 4: Post the code onto your blog.

• In Blogger, go to Layout --> Add a Gadget. I recommend placing the gadget in the upper part of your sidebar.

• Find and select the HTML/Java Script gadget.
• Paste your code into the Content box. You can leave the title blank, or you can add a title like, "Find me on the Internet" or whatever you want to say about your icons. I think most people understand what the icons mean, so I don't use a title.
• Save and you're done. Admire it on your page. (And check to see that the links work).

Advanced Tutorial


1. Code for RSS Link

Before adding an RSS icon, you need to create an RSS feed. (An RSS feed is a way to syndicate your content. Readers subscribe to your feed and your posts show up in their readers of choice).

• To create/find the link for your RSS feed, go to www.feedburner.com. It may ask you to sign in with your Google account. Look for a box that will offer to burn a feed for you instantly. Insert your Blogger address and hit "Next." You will then see a screen like this:

• Pick a name for your feed address, then hit "Next." Feedburner will confirm that your feed address is "http://feed.feedburner.com/nameyoupicked." This is the link you use for your RSS icon (it will go where the red link was in the HTML code). 

2. Create a text that appears when someone hovers over your icon. 


If you hover over the icons on my website, you will get a message like, "Follow me on Twitter" or "Follow me on Pinterest." To get this effect, add the following (purple) text to your HTML code:

Change the label as appropriate for each social media icon.

3. Add spaces between your icons.

If you find the icons look too squished together, you can add some space between each icon by adding the following at the top of your code. Play around with the number of pixels to change the spacing (this code sets it at 3px):

4. Center your icons.

If you want to center your icons, add the blue bolded code in front of your first paragraph (your first set of icons):

Hope this has been helpful. If you're an HTML expert and have an easier way to do this, please let me know. Let me know if you have any questions or issues with these instructions. Thanks!




If you enjoyed this post, you may also like:

• Five Ways to Increase Your Page Views
• 8 Ways to Make Your Blogger Blog Look and Act Like a Website
• Improve your Blog's SEO Title Without Giving Up Your Creativity