How to Add Font Awesome Social Icons in Blogger

It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Facebook, Instagram or Pinterest, or all of those for that matter, what's become increasingly clear is that social media helps increase your online presence.

Gone are the days when you used to rely on good old search engine results alone. These days, maybe you don't rank well in results for your keyword on Google or any other search engine, but you can launch a social media campaign that can hopefully give you the results that you want.

Essentially, your site and social media need to co-exist. One cannot live without the other, if you want another way of putting it. Social media is one of the best drivers of traffic on the internet, and if you want to increase your chances of being seen, then you have got to get an account on one or more platforms as long as it fits with your brand's identity.

Spreading Awareness of Your Social Media Presence

Once you've set up your social media accounts, you don't just leave it there to be discovered. Sure, you can make use of hashtags and communicate with industry leaders, but that's not enough to bring awareness to your customers. To let them know you have a presence on Facebook, Twitter, Instagram, Vine or Pinterest, you have to make use of the real estate on your website.

How exactly do you do that, you ask? Well, by means of social icons.

Social icons are those little images you see that represent a symbol associated with a particular social network. For example, social icons for Twitter usually feature a blue bird. If not that, then a lowercase letter T.

The presence of these images remind your viewers that they have other ways of being up to date with whatever you put out. Social media use is pretty high these days thanks to the immediacy of the medium as well as the fun factor. And more likely than not, your audience would want to know whether you're on any social network.

If you're on the Blogger platform, you can add these social media representations through Font Awesome social icons.

What is Font Awesome?

Font Awesome "gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS". In essence, it functions as a toolkit where you get access to more than 500 icons for use on your site - free of charge.

Now, if you've used social media icons before, you know that there are non-vector varieties. But those offered by Font Awesome are scalable vector icons, and in the long run, they are the better option for your site.

Why is that the case?

Well, a very good reason would be that images take time to load. Yes, these images are tiny but the point still stands. Plus, images tend to lose their quality as computer resolution increases. In other words, if you want your icons to load faster and have a nice, crisp and clean look, then you're better off with using the collection of Font Awesome. Also, the chance to customize your icons accordingly is definitely an attractive factor too.

Why you should start using Font Awesome?

Of the many providers out there, why stick with Font Awesome?

• Large collection of icons. You'll not only find social media icons here, but other traditional icons as well.
• CSS support. With CSS, you can adjust the icons according to what suits your site best. You can tinker with the colors, size, shadows and other components. This is something sorely lacking with non-vector images because you're stuck with the icon you chose.
• Speed. Vector images are lightweight and therefore load faster.
• Free. You don't have to pay a single thing when you use Font Awesome.

So now you know the importance of icons on your site, it's time to learn how to add Font Awesome icons in Blogger.

Adding Font Awesome Social Icons in Blogger

The adding of icons to your Blogger isn't rocket science. In fact, the process is pretty straightforward.
Here's what you have to do:

Add Font Awesome Stylesheet into Blogger

Follow the steps below to get Font Awesome working with your blog:
1. Download Font Awesome from the official page.
2. Copy the entire font-awesome directory into your project.
3. Open your Blogger dashboard, go to Template and press the Edit HTML button. Find the tag then add this line of code referencing the location of your font-awesome.min.css stylesheet.

Or if you'd prefer the easiest method, add this line just below the tag:

4. Start playing with Font Awesome!

Using the Font Awesome Icons

After you get the steps in the previous section done, you're now ready to use Font Awesome in your blog. The first thing you need to do is add the social icons links to the HTML and delete the icons that you don't need anymore. This is a sample HTML that you can add:

In the above HTML code, we can see 8 separate social icons which can be recognized by looking at the link title attribute. For example, the first one is for Facebook.

To use the social icons, paste your URL where it says URL-HERE for each social icon you want to include. Put the link between the quotes and make sure to not remove any of the quotation marks.

If you want to remove a social icon, just delete that line of code starting with "".

Now, keep in mind that Font Awesome works anywhere with the tag as it was designed to work with inline elements. Although you can use , official documentation prefers the option for brevity.

Font Awesome icons can be placed anywhere using the CSS prefix fa together with the name of the icon. For a list of social media icon names, you can refer to the official website of Font Awesome.

Let's say that you want to display a Youtube icon so you can link it to your official account on the platform. Find the Youtube icon on the list and click on it:

That will bring you to a page for Youtube where you will see this code:

To include the icon within the list, copy any line starting with " from the code above, paste where you want it to appear and replace the code starting with "" with that of your chosen icon.

Finally, after adding the icon, the list will look like this:

Note: don't forget to change the title and add your URL between the quotes.

Once you've finished editing the icons, insert the code into a HTML/Javascript gadget by going to "Layout" and click on the "Add a gadget" link. If you're using WordPress, paste it in a Text widget.

Customize the Font Awesome Icons Using CSS

Suppose you want to make the icons a lot bigger than they currently are. That task is made simple with the use of CSS. Here's a sample code:

#fawesomeicons a {
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

To change the font size, increase or decrease the 16px value. Below are the values (30px) for the container's width and height which should always match. Increasing/decreasing these values, will increase/decrease the size of the container where is the font.

Here are some different styles for the font awesome social icons. In the CSS, look for the #background-color, #border-color, #font-color and #hover-color text so that you can know here to put the color codes. You can use this tool to generate the color code: Color Code Generator. If you don't know how to add CSS, follow this tutorial.

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: #font-color;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

Now, what if we want to change the background or font color of a specific icon? First, we need to identify the icon class which is just after the

#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}

Here, we can change the background and color for the Facebook icon but we can do it for any icon you want. For example, let's add another rule for the twitter icon:

#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
 #fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}

To make the fonts bigger, we can add the CSS code like this:

#fawesomeicons {
text-align: center;
}
#fawesomeicons a .fa{
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
}
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
 #fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}

To apply, copy the code above and add the CSS rule with the icon class that you wish to change.

Important: When adding the class for your icon, always put a dot (.) in front of it as you can see in the example above, otherwise it won't work.

And that's it! Hopefully, this tutorial helped you to add Font Awesome social icons in Blogger. If you're still in trouble adding them, please take a look at Examples page.

Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.

In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating Facebook on Blogger. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.

Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.

Sharing site content using a Facebook Like Box is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. Adding a Facebook Like Box to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.

When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.

Click here for a DEMO

How to Add the Facebook Popup Like Box Widget

1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side
2. Once the popup window is open, select the HTML/JavaScript gadget from the list:

3. Copy and paste the following code inside the empty box:

Powered by Helplogger

4. Press the 'Save' button to add the widget to your blog. That's it!

Customization

• After adding the code, replace the address in blue https://www.facebook.com/pages/Helplogger/120574614736021 with your site's facebook page URL.

• The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:

.delay(5000)

• By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

• If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

ADD THE FACEBOOK WIDGET CODE HERE

After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.

Share Blog Posts in Social Media using AddThis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post to see the AddThis sharing buttons.

This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!

Getting the AddThis share buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button.

The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button.

Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option.

Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.

Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it.

The code provided will look like this:

Now that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard and go to Template, then click on the Edit HTML button on the right:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.

Step 3. Type the following line inside the search box and try to find the second occurrence of it - hit Enter:

Step 4. Just above this line, add the code for the AddThis social sharing buttons.

Note: If you want to add at the beginning of your posts, add the code below the second:

How to add more AddThis buttons

To add more buttons, simply choose the button for that social network and add the code just before the