Advertisement
Creative Coding

How to Add Social Media Icons to Your Sidebar, Without Using a Plugin

by

Social media should be a critical part of your website in that you can share your website articles with your followers and interact with them through your social media channels. You should consider putting social media icons on your website so visitors can learn more about you and follow, like or friend you on these social media outlets.

It is simple to add social media icons with a plugin. But this tutorial will show you how to add social media icons the customized way. Adding these icons in this way is critical if you are creating your own icons for your website. Plus, customizing your website without using a plugin is a satisfying experience!


Step 1 Getting Social Media Sharing Icons

There are 3 options for getting social media icons. The first is to create your own. You can do this by going to sites like, Goodies to find the logos directly from the company. Read the terms of service on how you can and cannot use their logos. Now that you have the official logo, you can create your own dimensions, background and more. Get creative and match the icon to your website style. This is where you get to show off your creativity!

The second way is to find free social media icons. There are plenty of places that give away these icons for free for your website or blog, but always read the terms of service since many of these free icons giveaways are only for use on personal blogs.

The third place to find great social media icons are websites that sell premium icons. The benefit of purchasing your social media icons is that you are using a premium icon set. Premium icon sets not only look great and it will save you a lot of time from creating them yourself. If you want your website to stand apart from others, spend a little money and buy premium icons, rather than finding the free icon sets that everyone else is using.


Step 2 Determine the Size of Your Sidebar

It is important to know the size of your sidebar so you aren't adding social media sharing buttons that are too large for your needs. If your sidebar is only 300px wide, it doesn't make sense to add icons that are 512px. The best way to do this is by using a measuring extension for your browser.

Once you know the size of your sidebar, you can calculate the number of social media sharing icons and determine how large each one of them needs to be in order to fit.


Step 3 Saving as a .PNG or .JPG File

You may have to use a photo editor to save the icon for the web. It's important that if your icon has any transparency, that you export it as a .PNG file. If your icon does not have any transparency, you can use a .JPG file.


Step 4 Upload the Icons to Your Website

Create a new blog post and upload your social media sharing icons using the media uploader. Yes, it really is that simple!


Step 5 Add Links to Each Icon

Once your icons are added to your blog post, it's critical that you assign an external website link to each icon. Click the, "insert/edit link" button, to add links to each of your social media sharing buttons. This will make each icon, "clickable", and once clicked will take the visitor to your social media pages where they can learn more about you and follow you.


Step 6 Copy the HTML Code for These Icons

Many people never stray from the visual editor within WordPress, but you may quickly find that it's easy to customize your website once you know a little HTML. Select the "HTML" tab in your post editor. Copy ALL the code that is associated with these social media icons. Feel free to save it to a text editor so you don't lose the HTML code.


Step 7 Create a Sidebar Widget and Paste Your HTML Code

This is the final step to the process. Simply drag a new widget, titled, "Text or Arbitrary HTML" to the sidebar of your choice. Then, paste in the HTML code into the text widget. Lastly, click the "save" button to save your changes.

That's it! All your hard work is done. Your website will stand out from all the others now that you have your own custom social media icons on your website. Now you can promote your social media channel through your website and let the traffic from one direct traffic to the other.

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Business
    App Training
    How to Create an Email Newsletter with AweberAweber email newsletter
    AWeber is one of the top-ranked email newsletter tools, known for its high deliverability rates. Setting up a new email newsletter with AWeber is a little less friendly than some other email newsletter tools out there, but, in exchange, you have a lot more flexibility and opportunities to customize the emails you publish. This tutorial will focus on getting your first email list up and running, along with equipping you with the necessary know-how to send out both standalone emails and automated emails (known as auto-responders). While AWeber has plenty more features, these are the basics you need to know for any email list you operate.Read More…
  • Business
    Communication
    How to Setup Your Authority Blog With the WordPress Canvas Theme4 authority blog wordpress
    Many would-be bloggers are intimidated into inaction by the perception that creating and running a blog is too technically challenging. If you count yourself amongst that group then this post is for you. In reality, the fact that you are currently reading this almost certainly qualifies you to create a website. You need little more than a basic level of computer literacy in order to learn what is necessary to create and maintain your very own blog. Gone are the days when you needed to get your hands dirty with code such as HTML and CSS in order to create your own corner on the web -- although such skills are certainly still useful in many applications, they are no longer a necessity. When it comes to creating a blog, all you need is a good idea and a few hours of your time (or even less) to get up and running. Furthermore, with an enormous selection of highly customizable theme frameworks to choose from, you can create a professional-looking website in short time with relative ease. The next three posts in this series on creating a successful authority blog will focus on the nuts and bolts of creating your very own blog, and this post will focus specifically on how to create a unique design for your website. Let's get started!Read More…