How To Add Social Media Icons In Blogger

In today's digital era, it is just not possible to find any blog or website without social media accounts. Every other website or blog you visit will surely have at least one or two social media handles and to increase their social media followers they will surely have social media icons in their blog or website.

Many bloggers face difficulty in driving traffic from search engines, so they try to bring traffic from social media platforms. Social media platforms not only help them to increase the traffic but also help them to build a brand.

Technically, a website or a blog cannot exist without creating a social media handle. So one needs to add their social media profiles on the website as well.  

For people using WordPress or any other CMS, it becomes very easy to then add social media icons.  but for people using Google Blogger/  Blogspot, face difficulties in adding social media icons to their blog.

Most of the new Blogger templates already have social media icons installed, in case you are using an old Blogger template then you might not have them. I would suggest you all to have a look at the latest landing page Blogger template collection.

So if you are one of those, using old templates and don’t know how to add social media icons in Blogger, then follow the steps given in this article.

Before moving ahead, let me tell you that you don't need to have coding knowledge or you don't need to be a pro in Blogger to add social media icons. 

I have written down all the steps with images to add social media icons in Blogger in the simplest and noob-friendly way.

I will be sharing all the information related to icons as well as social media icons and the HTML code for social media icons Blogger in this blog. If you are not interested in reading all this you can jump directly to the solution.

What are icons in a website?

Generally,  an icon is a picture or a symbol that serves as a representation of some sort of content on the website or blog. The most popular icon extensions are PNG and SVG.

The content written in a blog, many times sounds boring and the user might lose focus if too much text is provided.

For this reason,  using icons to describe different functions or features is a good and effective approach.  

Not only does it help to make the content more attractive but users can understand it easily with a visual explanation.  

For example, instead of writing down, “Share on Facebook”, I will use the Facebook icon. 

What is Font Awesome?

Font Awesome provides you with a used repository of icons that are highly customizable.  One can easily increase or decrease the size, can change the colour,  can change the shape, or can customise as per the need with the help of CSS.

Benefits of using Font Awesome

 There are several benefits of using font awesome, some of them are mentioned below.

• Huge repository of icons 
• Font awesome icons are available in vector format which means they won't impact page speed.
• There are more than 1000 icons available freely,  they do have a pro plan
• You can further customize the icons as font awesome supports CSS.

By now you may have understood, why am I talking about font awesome. So we will use Font Awesome v6 to add social media icons in blogger.

How to add social media icon in blogger?

1. Log into your Blogger

2. Select "Theme" and click on "Dropdown icon beside Customize" then Click on "EDIT HTML".

3. Add the below script just before </head> tag.

<script src="https://kit.fontawesome.com/2a22590b5b.js" crossorigin="anonymous"></script>

4. Go to "Layout" and click on "Add A Gadget" in the right sidebar area and select "HTML/ Javascript" and paste the below code.

<div style="font-size: 2rem ;text-align:center">
  <a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i
  class="fa-brands fa-facebook"></i></a>
  <a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i
  class="fa-brands fa-twitter"></i></a>
  <a href="URL-HERE" title="Pinterest" target="_blank"
  rel="nofollow"><i class="fa-brands
  fa-pinterest"></i></a>
  <a href="URL-HERE" title="Instagram" target="_blank"
  rel="nofollow"><i class="fa-brands
  fa-instagram"></i></a>
  <a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i
  class="fa-brands fa-youtube"></i></a>
</div>

5. Now replace "URL-HERE" with your social media profile URLs.

6. Once done, click on save and you are ready to rock.

In case, if you want to add any extra icons, visit this page and search for the icon which you want to add. For eg. I want to add a WhatsApp icon, I will search for WhatsApp and copy the code and integrate it with the below HTML code.

<a href="URL-HERE" title="Replace with Icon Name" target="_blank" rel="nofollow">Add Font Awesome code here></a>

You can further customise the Font Awesome icons using CSS but for that, you need to have some basic knowledge of using CSS you can refer to this guide to know more.

Video Tutorial

Conclusion