Notification texts go here Contact Us About Us!

Ultimate Guide on How to Add Social Media Icon in Blogger

In this digital dispensation it is often very difficult to come across a website or blog without social media handles icons.

Good day readers of TechBrainaic guess you're doing great? In this article I will be sharing with you the Ultimate step by step guide on how to add social media icon in Blogger in 2020, make sure you read to the end and follow every Steps.

Add Social Media Icon in Blogger
Blogger Social Media Icon

In this digital dispensation it is often very difficult to come across a website or blog without social media handles icons. Popular website or blog often have at least four to five social media accounts connected to it.

Benefits of Having Social Media Handles Icon in Blogger

  • Getting visitors from search engine might sometimes seem difficult especially for newbies in the blogging sphere, By connecting your blog/website with your social medias account you can easily and cheaply drive massive traffic to your Blog Pages and as well social media platforms help to build and promote your brand.
  • With the help of social media you can easily build and promote your brand.
  • With social media-blog connection you can easily interact and receive feedback from your blog readers thereby increasing your blog popularity and building up the trust followers have in you.

Bloggers using Google Blogger/Blogspot platform might experience difficulties in adding social media icons to their Blog.

But for WordPress and other CMS users it's a lot more easier.

Although most of the new Blogger templates already have social media icons installed, in case you are using an old Blogger theme then you might not have them. 

How to Integrate WhatsApp Chat Widget on Blogger

How to Add Custom Permalink on Blogger for Better SEO 

How to Create a Sitemap on Blogger and Submit it to Google and Bing

Incase you're still using an old template and don’t know how to add social media icons in Blogger, then follow the simple and complete steps given in this tutorial.

Before we proceed into the full course of this tutorial, I would like to make this clear that you don't have to be an expert in coding or Blogger Webmaster guru before you can add social media icons to your Blogger Blog.

I have written this article in a simple and easy to understand format, with each steps clearly and pictorially stated and explained on how to add social media icons in Blogger.

I will be sharing all the information related to icons as well as social media icons and the HTML code for social media icons on Blogger in this tutorial. Just ensure to read to the end and follow of the guidelines mentioned.

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 Twitter”, one can easily use the Twitter icon instead. 

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 customize as per the need with the help of CSS.

Font Awesome
Font Awesome

Benefits of using Font Awesome

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

 Font awesome icons are available in vector format which means they won't impact page speed.

  1. Huge repository of icons
  2. There are more than 1000 icons available freely, they do have a pro plan.
  3. You can further customize the icons as font awesome supports CSS.
By now you may have understood, why i am 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?

Note: before editing your blog template it's always advisable to take a backup so that you can easily restore it incase there's an error.

1. Log into your Blogger Dashboard

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

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

JS
<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.

HTML
  <div style="font-size: 2rem ;text-align:center">

  <a href="YOUR-URL" title="Facebook" target="_blank" rel="nofollow"><i

  class="fa-brands fa-facebook"></i></a>

  <a href="YOUR-URL" title="Twitter" target="_blank" rel="nofollow"><i

  class="fa-brands fa-twitter"></i></a>

  <a href="YOUR-URL" title="Pinterest" target="_blank"

  rel="nofollow"><i class="fa-brands

  fa-pinterest"></i></a>

  <a href="YOUR-URL" title="Instagram" target="_blank"

  rel="nofollow"><i class="fa-brands

  fa-instagram"></i></a>

  <a href="YOUR-URL" title="Youtube" target="_blank" rel="nofollow"><i

  class="fa-brands fa-youtube"></i></a>

</div>
5. Now replace "YOUR-URL" 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 example. I want to add a Telegram icon, I will search for Telegram and copy the code and integrate it with the below HTML code
<a href="YOUR-URL" title="Replace with Icon Name" target="_blank" rel="nofollow">Add Font Awesome code here></a>
You can further customize 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.

Final words

Incase you are one of those who still don't use social media platforms or haven't added their social media profiles to their blog or website, then you should quickly add it. It will not only improve your Blog traffic but will also boost your Blog Search Engine Ranking Authority.




Hope I was able to make you understand how to easily add social media icons in Blogger. And if you still have any issues related to this post, feal free to ask me in the comments, I would be happy to answer!

Join Our Telegram Channel to receive notification about our daily updates. Thank you! 💕

That's All

 Thanks for reading our blog

Have a great day ahead!😍

© TechBrainaic 
 All right reserved

About the Author

A Young Nigeria Blogger Who Love Sharing His Knowledge And Idea With Others❤️

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Avoid sharing any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.