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

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

Tutorial Details
  • Program: WordPress
  • Difficulty: Beginning-Intermediate
  • Estimated Completion Time: 10-20 minutes

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.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://webdesignergeeks.com Ajay Patel

    Nice one but whats new in this, all know this one.

    • http://sjoehnck.de/ Sebastian

      Glad i’m not the only one, who thinks the same ;)

    • http://www.paulund.co.uk Paul

      If someone doesn’t know HTML I think they would find this tutorial quite useful.

      • http://www.howbler.com howbler

        Couldn’t agree more!

    • http://wp.envato.com/ Japh Thomson
      Staff

      Thanks for the feedback guys! We do try and provide an educational resource for everyone. Other than intermediate to advanced users, or people born knowing HTML, I think there are a lot of people who would find this useful :)

      • http://webdesignergeeks.com Ajay Patel

        Oh yes, Japh that is too.

      • http://affanruslan.com Affan Ruslan

        Yeah, couldn’t agree more.
        At first, I was like “This is peace of cake!. Nothing new here”. Then I just realized, not everyone knows HTML everywhere, including me. In other words, just because I know how to do it, doesn’t mean everyone else knows.

        ;)

      • http://www.kickamarketing.com Jo Guerra

        I think this tutorial is very helpful, so I shared it on my blog. Thanks so much.

    • http://howtostopstuttering.co/ Steven

      Well, of course it is basic thing for most WordPress users but there are many non tech savvy users who just started their blogs and this might be helpful.

    • Penny

      not all of us are young and computer literate. I appreciate learning how to do these things!

    • Kimberly

      I found it to be VERY useful. Tkx again!

  • http://ahoban.com Sumon @ Ahoban

    Nice and easy. Useful for the people who wants to make a try themselves :D

  • Mike

    Yikes! A little more complicated than it needs to be. You only cover driving traffic to ones social media property. The other side of the coin is to get users to share your articles on their social media properties. On the first point, I’ve found it more advantageous to use the provided tools from Facebook and Twitter both in functionality and style. Google “Facebook Like Box” and “Twitter Follow Button” and set your configurations. The final step in adding a text widget to your sidebar is still the same but use the provided html from Facebook and Twitter. To the second point of enabling users to share your articles on their social media properties, go to http://www.addthis.com, copy the code, past in a sidebar text widget. Badda boom badda bing, your done and it’s free.

    • Xander

      @Mike:
      Addthis tracks your site and uses the statistics. It’s crappy spy-ware.

      @Author:
      Thanks for the info.

      • Mike

        I don’t know. I personally enjoy the statistics I get from AddThis. I like knowing what people are doing with my content just like I enjoy seeing who is visiting my sites with the statistics I get from Google Analytics. “Crappy spyware” is probably more a matter of opinion.

    • Kimberly

      Don’t make things difficult!

  • Pingback: How to Add Social Media Icons to Your Sidebar, Without Using a Plugin | Shadowtek | Hosting and Design Solutions

  • http://bedroomproducersblog.com/ BPB

    a while ago i decided make my own social media links, as opposed to using plugins. the idea behind this was to speed up page loading times and it helped. i used a similar metod to the one described in this tutorial.

    however, i can’t figure out how to show the current number of RSS subscribers, FB like, etc. like in the sidebar on this site for example:

    http://wplift.com/

    any tips?

  • dj

    @japh… I agree with your statement that you (envato) needs to provide tuts at more than just the intermediate level. And I don’t have any problem with basic tuts, after all your video player lets me skip forward or press “stop.” However, I do see a problem (in addition to it being rambling and repetitive) in that the statement was made: “this is how the pro’s do it.” Really, that’s not correct and the author doesn’t acknowledge any of the major limitations of directly altering the root WP theme’s CSS.

    For me, making that kind of statement gives the viewer the right to assume that the technique is considered “best practice,” which it isn’t. This way may be the quickest and the dirtiest and definitely the most easy to explain without putting in a lot of effort. However, the author (or the Envato editor) should have at least added the information that making such CSS changes would be over-ridden any time the WP theme’s files were updated, that there was a more permanent and acceptable method, and, if he needed, that viewers should seek out a different tutorial to find out how to do it more “pro-like.”

    • http://wp.envato.com/ Japh Thomson
      Staff

      Good points, DJ, some things could have been clearer there, I agree.

  • Pingback: Website - Vertical - Menus | Pearltrees

  • http://www.villagranstudio.com Leandro

    Very nice I’ve been using this plugin Share and Follow It works ok I guess but is always better have something that you can customize easily.

    Thanks for sharing.

  • Pingback: The Friday Wrap: Making decisions – Eugen Oprea

  • http://www.yinpan4444.com Pan

    such a great idea! Thanks for sharing~

  • http://psawyer.co.uk Peter Sawyer

    <a href="http://twitter.com/home?status=I am currently reading ” title=”Click to share this post on Twitter”>

    I prefer to add a share button with the php the_permalink statement so it shares the page. You can also add in the account name as well.

    Do a similar thing for Facebook and the others.

  • steve

    Well i’m a complete novice with all this. I just went straight to the socil media sites that produce their own buttons and used their script. The only problem with this is that you have (or at least i find that) there is very little control over how they are organised in my header area and are just stuck on in a list. It doesn’t exactly look as great as i would like it to. Any advice that is not too complicated is definiately welcome.

  • Pingback: Sprucing things up a bit. « SLO Music

  • Pingback: Shaking things up | Serving in SLO

  • http://andor1995.info/ Nagy Andor

    Nice hehe ^^ I personally didn’t though about this.

  • http://wpmineworks.com WP Mineworks

    For the best practice, create a file called share.php and put all your button codes in that file. Then include this file anywhere you like using code snippet:

    This way your files will be more organized and re-usable.

  • Pingback: Social media icons: little thing, big deal | Sewing by Moonlight

  • Pingback: WordPress: Add Social Media Icons to Your Sidebar Without a Plugin - Small Business Marketing Denver | KickAMarketing | Small Business Marketing Denver | KickAMarketing

  • Jenny

    Thanks! This is an easy, great tutorial for newbies like me!

  • http://ExcelAndAccess.Com Christopher

    Just what the doctor ordered. I real time saver, after trying for 2 hours on my own :-(

    Christopher

  • http://www.tutosytips.com johanso

    okay. some people do not know these basic things

  • http://balics.net bali web

    Nice, I will used it for my blog.. thanks :D

  • http://www.geekandblogger.com Pavan Somu

    Simple and useful post.

  • tobs

    This was a good tutorial.But how can we align the social media buttons horizontally in a single line inside the text widget without a plugin,

  • Kimberly

    I for one found this to be the best and most easiest way to do this! Versus some of the other ways. Thank you thank you!!

    I am so grateful for your hard work and believe it or not this newbie definitely appreciates it!

    I was able to center all my icons on the blog post and then clipped the html code and therefore it centered on my sidebar as well. Woohoo!!

    It only took me all day to get this done! But I did it because of your post.

  • Pingback: Five Add-Ons Your Blog Should Have | DePalma Studios Test WordPress Blog

  • http://twitter.com/GalFridayAndrea Your Gal Friday

    Thanks! Worked well, and so easy!