Share Button

Everyone who has a website should have an easy way for people to follow them on social media sites sites like Facebook, Twitter, LinkedIn and Google+. Many people chose to install a WordPress plugin but it’s relatively simple to add buttons (like the ones at the top of my sidebar) to your WordPress website with HTML code.  (You are engaging with your potential clients and customers on social networking sites aren’t you?)

5 Steps to Add Follow Buttons to your WordPress Sidebar

WordPress plugins are great and they can add a lot of functionality to your website. There are plugins for virtually everything you’re looking to do. One of the disadvantages of using plugins is that using too many of them can slow down the performance of your site. Here’s a fairly simple way to add social media follow buttons to your side bar without having to install a plugin. As always backup your website before you start making changes to your site. (No matter how simple you expect the changes to be it is always a good idea to backup first.)

# 1) If you don’t already have a text editor, download one. Word processing programs can do funky things with your HTML code by inserting formatting code that you can’t see but trust me, it can wreak havoc. My choice for a text editor for a PC is Notepad++. I don’t use Macs myself but I’ve heard good things about TextWrangler. (Both of these programs are free. Feel free to share your favorites in the comment section.)

# 2) Assuming that you don’t already have a set of icons to use, you can search for a set online. Try searching for “social media”. I always search for graphics that are “Allowed for commercial use (No link required)”. Download a set of graphics that are in the size that best meets your needs. (The graphics that are in my sidebar are 32px X 32px and in the png format.) One of my favorite resources for website design elements (Photoshop brushes, wallpapers, textures and background images) is GraphicsFuel. In addition to their premium products, they offer a lot of free downloads. (I receive their newsletter and it’s the site that I downloaded my follow buttons from.)

# 3) Upload your images to the media library of your WordPress site. As with every photo and image that you upload, be sure to optimize your graphics for SEO. This an opportunity to enter keyword rich phrases in the alternate text and description fields. (For example, I entered “Follow Sherryl Perry on Facebook to discuss business strategies for developing your online presence” in the description field of my Facebook image.) Before you hit the update media button, copy (Ctrl + C) and paste (Ctrl + P) the File URL into your text editor.

# 4) This is where you’re going to write the HTML code that will be behind each button. For each button, you’ll need the URL of the page that you want your website visitor to go to and the URL of the graphic. The code behind my Twitter button is (basically) this:

<a href=”https://twitter.com/#!/KeepUpWeb” target=”_blank”>
<img src=”http://keepupwiththeweb.com/wp-content/uploads/twitter_32.png
border=”0″  alt=”” /></a>

The URL after the href is the new page that will open and the URL after the img src is the URL that you copied in step 3. Copy and modify the code for each button that you want to add to your side bar. (The only code that you’ll need to replace are the two URLs.) Select all of the lines of the code and copy it (Ctrl + C).

# 5) Now, you’re ready to add the code to your sidebar. Simply create a new text widget (under Appearance in your Admin panel). Paste (Ctrl + P) the lines of code that you created  in step 4 and save your widget. Check out your new social media buttons in your browser. (If they’re not displaying properly, you may need to refresh your screen and/or clear out your cache.)

That’s it! You should be good to go. I’m a fanatic about backing up. So, I’d backup again because I wouldn’t want to risk losing all my hard work. Hopefully, along with your shiny new buttons, you’ll also get a sense of accomplishment from doing a little coding on your site. Any time you can add functionality to your site without having to add another plugin, you should be pleased with yourself.

Now, over to you. Do you have social media buttons on your site? Do you have a favorite plugin or did you use a text widget? What other sorts of things have you used text widgets for? (If you’d like to hire me to add follow buttons to your blog, please contact me using the contact form on this site.)


TIP: Steve Hippel suggested creating a draft post to generate your code. Insert your images and link them to the appropriate pages. (Don’t forget to click on the “Open link in a new window/tab” box when you’re linking the image.) This will generate the HTML code for you. Preview your post to make sure your buttons are working correctly. Then, switch to the HTML tab and copy the code. Then, you can paste it into your text widget. Thanks for the excellent suggestion Steve!


Share Button

Published by Sherryl Perry

Welcome! If you're looking for help building an Internet presence that fits your needs and works for you, you're in the right place. I blog common sense articles about WordPress, social media and SEO. My goal is to help small business owners and entrepreneurs understand their core business. Together, we can develop and implement business strategies that make sense to you.

Join the Conversation

119 Comments

Your email address will not be published. Required fields are marked *

  1. I Just Installed A New Theme On My WordPress Web. when i click on follow buttons, it redirects to (LINK Removed) and same thing happens to twitter button: (LINK Removed)

    any way to fix it? I instaled ChimpStudio’s Rockit Now Theme. and configured those buttons from chimp theme settings.

    1. If you take a close look at the two links that you included, you’ll notice that each URL is trying to point to two websites at once. For example, one of your URLs has the “www” link to your gamers site followed by the “www” link to your Facebook page. You did the same thing with your Twitter link.

      To fix this, remove the portions of the links that try to direct us to your main site. Then, you’ll be left with one URL that points to Facebook and the other URL will point to Twitter. Good luck!

  2. Well, I tried it, found a great graphic to use, modified the blog to accept widgets per WordPress instructions, and I still don’t see anything. I appreciate the clarity of your instructions and can only assume Error Between Chair and Keyboard. Will walk away and have another look later, I guess. Sadly, I did not build this blog myself and thus don’t understand everything that’s going on in it.

    Thanks, anyway!

    1. Accept Widgets? They’re usually part of a standard build, including the text widget. Even in free WordPress. Under Dashboard, Appearance, Widgets.

      You have to grab a Text Widget and drag it into the sidebar you want it in. It should be obvious where due to the other widget boxes already present, depending on the Theme you use. Will it be below Search or categories, etc. You can rearrange them and tweak settings as required. Just drag and drop.

      With the text box in place, open it up and paste the code in. It can be handy to have another tab open with the blog itself. Hit refresh there to test.

      If this is too geeky, you may find your theme has a Social Media section built in. And there are a ton of plugins that do this for you. Although personally, I much prefer this code because you control it. You’re not setting web beacons on your page without knowing.

      1. It was WordPress that told me I had to enable the widget by pasting some php code into functions.php. This WP build dates back to at least 2008, I think. Anyway, after I did that I was able to open widgets and choose a text widget, put in the code, add the title to the top and save. Wish I could show you a screenshot. I’m afraid this blog just may be too ancient for your instructions to work or, in the customization by the guy who was the original webmaster, something in the configuration is keeping it from working. 🙁

        Thanks, anyway.

    2. Bonnie,

      I’d like to try to help you figure out what’s going on here. What is the domain name of the WordPress site that you’re adding the widget to? (The URL that you left with your comment is timothyhallinan.com and that appears to be a static HTML website.)

      Do you know what version of WordPress you’re on?

        1. Bonnie,

          Sorry I’m just getting back to you but Sunday was Easter and yesterday was a holiday. (Massachusetts celebrates Patriots Day.) When I scanned your site I didn’t recognize “The Blog Cabin” as being your blog.

          David was absolutely correct about text widgets being standard in all WordPress installations. You should not have had to modify your functions.php file at all.

          When you’re on your WP admin panel, go to “Appearance” and then “Widgets”. The theme that you are using is only displaying one sidebar. You currently have two widgets showing in “Sidebar 1”. If for some reason, you don’t see them, (“Categories” and your “RSS “feed button), there’s a toggle switch on the right side of the “Sidebar 1” box to turn on and off the display.

          To the left of the columns for sidebars 1 and 2, you’ll see the “”Available Widgets” column. You should be able to drag and drop the “Text” widget into the “Sidebar 1” column. That is where you will want to post your code. Your code has to be free of any special characters. That’s why I specified that you have to use a text editor for this. If your code has anything such as curly quotation marks, it won’t work.

          I know you tried posting your code in your comment above but WordPress didn’t like it. If you want me to look at it for you, send it to me using the contact form here. Good luck!

  3. Thanks, Sherryl
    After all the futsing about trying to find a plugin that wasnt abandoned, had decent icons, and had a good selection, I ran into your article. The code is straightforward.

    2 things I ran into:
    – The icon site you linked to was buggy for some reason. But i found a simple but massive icon selection at WPZoom.com : 500 social icons ea in png and PSD, multiple sizes, free.
    – When I first pasted the prepared code, some of the icons didnt display. The code looked fine but on closer inspection, a few of the quotes were angled, not straight. Turns out Notepad++ (love a text editor with spell check) dropped most of the italics but messed up a few of the quotes. Once replaced, all was well.
    Thanks again for the article.

    1. Hi David,
      Thanks for letting me know about the IconFinder link. I haven’t updated this post in a while. I just followed the link and that does not appear to be the same site that I originally posted to. At the time that I linked to it, the majority of the icons were free. Now, it looks like it’s something that I’m affiliated with and I’m not. So, I’m going to remove that link.

      I’ve never run into a problem with Notepad++. I use it all the time and it hasn’t failed me yet. That’s unfortunate that you had a problem with it. Code can be very finicky. I’m glad that you were able to figure it out and I appreciate your letting me know that you found my article helpful. I’m very happy to know that this post is still helping people!

      1. Thanks, Sherryl
        Well -I don’t blame Notepad++. The example text is italicized. Most of the quotes were correctly corrected but some of the quotes appeared as open/close rather than straight.

        I have a small program called GetPlainText that I have in Windows Taskbar. Clicking it removes all extra formatting of whatever is in the clipboard before you paste. It makes cut and pasting easier but I didn’t use it in this case.

        Just did a test with and without it – it didn’t catch it either so this is evidently a flaw in Windows clipboard functionality.

        So – anyone copy/pasting the code sample – check the quotes are not angled and it will work like a charm. 😉

      2. PS – WPZoom.com’s icons ask for a link back but don’t require it. I acknowledged the contribution in a place I have for such on my site. Happy to acknowledge work and share sources like that. But I full appreciate that if you have a popular site, you have to be very discriminating about apparent endorsements, ownership, etc.

        (my site is still in development so I’ve not linked it)

        1. Thanks for the tip about GetPlainText David. I appreciate discovering new tools. As for icons, I just edited my article to let people know about Graphics Fuel.com. They’re one of my favorite resources for website design elements (Photoshop brushes, wallpapers, textures, background images etc.). It’s the site that I downloaded my follow buttons from and I like them so much that I subscribe to their newsletter.

          Good luck with your site! Are you on Twitter yet? (I looked for your Twitter ID in your comment but you didn’t leave one.)

          1. Hi Sherryl
            (laughs) Its the same with Twitter – just launched my account in prep for the migration. It’s not hidden behind a placeholder though, so I added it above.

            Thanks for the site tip – will check it out. And subscribe. Quite like your latest comments on GoDaddy.

  4. Pingback: Tips & Advice on How to Blog Smarter | Twitter Chat Recap
  5. Hi there. Great article. Finally some plain sense understanding of WP. I’m following the steps but it’s not working for me. (I blame me, completely! I hate Word Press!)

    Do you need a text editor? Can you just edit the links in Word Pad and them copy them into the sidebar area? I don’t get the icon to display, and the link to DB and Twitter doesn’t work either.

    At least I found out where to put the code. 🙂

    1. Hi Andrea,
      Thanks for the kind words. I apologize for the delay in replying to you. (I was on vacation and am still catching up.)

      You absolutely need a text editor. Programs like Word Pad insert special characters that can wreak havoc in HTML. If you’re still having problems, send me the code that you’re trying (using the contact form here) and I’ll take a look at it for you. Then, I’ll send you back a text file after I’ve tweaked it. Don’t give up yet! I’ve helped a couple of other readers do this. 🙂

  6. Hey
    Is it possible to display the number of followers and likes for twitter and facebook respectively. I don’t want to use any plugin, am using the facebook iframe for now .

    Thanks

    1. Mehrwash
      I quickly researched this and I believe that to add the twitter counter, you would want to add the following code:
      data-show-count=”true”

      The only code that I found to display your Facebook fan count involves modifying your facebook.php code and I was reluctant to share that here without having personally tested it. I’m thinking that adding either of these pieces of information may take a bit of tweaking to format it properly though. Good luck with it.

      BTW – I apologize for taking so long to reply. I’m still catching up from vacation.

    1. You’re very welcome George. I’m glad that you were able to add follow buttons to your website. BTW – Sorry about the delay (of 3 months) replying to your comment. Somehow, it slipped by me.

  7. I currently have 18 plug-ins on my WordPress site, but have not noticed the site seeming slow. I use the Social Sharing Toolkit for my follow buttons, but I mainly like it because it shortens my post URL when people share my posts and it also adds via @JeriWB to the shared post. It doesn’t have an option to add an email button, so I had to use a text box in the sidebar to accomplish that, but it looks lonesome since it’s not all lined up with the other buttons. My current theme is WordPress Twenty Eleven, so follow buttons don’t display on the sidebar of individual blog posts, but they do appear on the sidebar of my main page and of my blog’s scrolling page.

    I would love to be able to hire you to tweak my website, and will see how funds go in the new few months as I get a better idea of how I want to take my site to the next level.

    1. Hi Jeri,
      Is one of the 18 plug-ins that you’re using a caching plugin? If not, that may be something that you should think about adding. As for your email button, I think it looks fine.

      I don’t use the Twenty Eleven theme but I was curious if there was an easy solution to have sidebars on individual post pages (other than creating a child theme and coding). I found a blogger who recommended using the Twenty Eleven Theme Extensions plugin.

      Now, I’m not personally recommending this plugin because I’ve never used it. However, it may be a temporary solution for you until you can do something longer term. If I were you and I was interested, I’d do a little research to see what other bloggers say about it. (If anyone here wants to chime in on this plugin, feel free.) Of course, you would want to backup your site and database first.

      In the future, when you’re ready, you know I’d enjoy working with you. Meanwhile, if you have any questions or ideas that you want to run by me, just shoot me an email.

  8. Great advice as always Sherryl. I do hate being at the mercy of plug-ins as they not only slow it down, but don’t always do what they say they’ll do. Presumably I could add a facebook (like) button to a pinterest page in the same way?

    1. Hi A.K.
      Thanks A.K. It’s always good to hear that you find my posts helpful. I’m not sure I understand exactly what you want to do but the basic concept of adding HTML code in a text widget can be used to accomplish all sorts of things. I wholeheartedly endorse Steve’s suggestion to create a draft post to experiment with your code before testing it on your live site. Also, my tip to use a text editor is very important. Just today, I ran into an issue when I took a shortcut and pasted code directly from Word into an author bio box and it didn’t work. (I should know better! 🙂 )

  9. Agree with you Sherryl Perry, definitely using to many plugins slows things down. My blog used to get Stuck, and then i had to contact my hosting provider. Now i am not using too many plugins. yes i am going to follow above procedure all fives are best.. 🙂 thanks lets change manually. Good day!

    1. Hi Vivek,
      Sorry to hear your site was slowed down. I think a lot of bloggers run into that issue at some point. Good luck installing your follow icons with a text widget. (I have a feeling you’ll be fine.)

  10. Hello! I have tried and tried and cannot seem to get follow buttons on my site.

    Are we to place the same HTML info on your step #4 only with my information? I did exactly how your’s looks only with my photo and twitter website info however it still is not working. When I clicked on the icon on my blog it looked like the generic icon for windows images. Then it brought me to twitter saying site is not recognized. Any help is appreciated.

    Thank you.

    1. Hi John,
      First, have you created a draft post so that you can play with the code without it being visible to your visitors? (That was a tip from Steve Hippel and I added it at the end of my post.) That way, you can tweak your code until it works.

      Yes. The code in step 4 is basically a template. So, for your twitter page, you would go to your Twitter profile page and copy the URL. That’s the URL that you would use in the 1st line of the code (what’s appearing in red.)

      The URL for the second line (of red text) indicates the location of the Twitter icon that you should have uploaded in your Media Library. If you’ve already uploaded an icon, find the image, click “edit” and then scroll down to the field that’s labeled “File URL”. That’s the URL for that line.

      One last thought, are you using a text editor to copy and paste your code? If you’re copying code into a word processor and then pasting it, that could be a problem because some word processors insert special formatting codes.

      1. Hi Sherryl,

        I tried again and still nothing. When i pull up the icon on my website, it is just an X and it pulls up twitter page stating “sorry that page doesnt exist”.

        I downloaded the notepad to help but still receiving the problems.

          1. Hi Sherryl,

            I have tried and tried and I keep having this issue as well. I keep getting an X instead of the PNG file and when I click it says they can’t find the page (tried for twitter, instagram and pinterest). I love that I don’t need a plugin so please help!

            THANKS!

            1. Ryan,
              I apologize for not replying to you sooner. I was away when you left this comment and I am still catching up. It sounds like there may be a problem with the path/URL to your PNG file. Please email me via the contact form on this site and I will try to help you. If you send me the code that you’re trying to use, I may be able to identify the problem and then email it back to you. Code can be unforgiving and if you’re not using a plain text editor that can cause issues too.

              I hope to hear from you.

  11. Thank you for your very useful information. I am a tech novice and have only been using WordPress for a short while. I followed your steps and successfully loaded a Facebook icon with the correct link to our Facebook page. Yay! My trouble is, the F icon only appears on follow up pages on our website and not the Home page. When I add it to the home page it sits off the bottom of the page? Is this within your domain to advise and assist? Thank you Sherryl 🙂

        1. Hi Danielle,
          I apologize for taking so long to get back to you! I just took a peek at your site. I believe that the reason that FB isn’t showing on your home page is because you have it set up in your sidebar and your home page doesn’t use the sidebar template.You should be able to substitute the text that you have on your home page (“Follow us on Facebook! Click here.”) with the code that you have in your sidebar.

          There’s also a problem with the a href= link. You don’t have the correct link to your FB page. So, when I click on your link, I go my FB home page. You need to edit the code and insert the correct link. Good luck! I’m sure you’ll get it.

  12. Thank you for this insanely helpful post. I have been struggling to add a simple “like us on Facebook” to our page for a week. We had the social share but not the “like our page”. The WordPress FB plugins wanted me to create a FB app for my site, which i was willing to do if straightforward but just looking at the instructions for this gave me a headache. We’ll go wild shortly and add a Twitter button too. Thank you!

    1. Hi Kerry,
      I’m happy to hear that I didn’t give you a headache. 🙂 Just to be clear, this post will help you include a “Follow Me on Facebook” button (like the one that I have at the top of the sidebar on this blog). The official “Like us on Facebook” box is pretty cool too. I have that one in my sidebar also. (It’s the boxwith the smiling faces.) That may be the FB app that you were trying to use a plugin for. I wrote a post on how to add that too. You can find it here: http://bit.ly/O3JECG. (Hopefully, that won’t cause you a headache either.)

  13. I tried everything I even copied your exact code just to see and for some reason my twitter logo wont show up and it takes me to a 404 page not found any \suggestions?

    1. Hi Mike,
      It sounds like the problem is with the URL address of your Twitter page. This would be what is after the href. Make sure that the URL is between quotes and that there are no spaces before or after the quotes. If you continue to have problems, use my contact form to send me a copy of your code and I’ll see if I can help you. Good luck! HTML code can be tricky. It is not forgiving.

  14. These widgets makes things easier for a wordpress user without worrying about directly editing the code files that may be frustrating. Notepad ++ is my favorite editor and it support a couple of programming languages to change colors etc.

    1. Hi George,
      Thanks for letting us now that you use Notepad++ too. It is such a handy tool. Sometimes, I have run into problems posting to LinkedIn and I’ve had to copy and paste my post using it.

      Widgets are very handy.

  15. Thanks for the code I have been looking for it from a while but non of them worked and my plugins are also not working, I hope your code will work.

  16. Hi Paul,
    Text widgets are extremely powerful because you can add HTML to them. I built a site for a client who targets both entrepreneurs and small business owners. She has a You Tube channel with different videos for each niche market. By using text widgets and a plugin called Widget Logic, I was able to embed different videos on the landing pages for the different markets. It seems I’m always finding new uses for them.

  17. Hi Sherryl, this is a clearly written post, and while my new theme has a one click option for installing these icons, I will definitely use the link to find a cool icon to represent the social media channels for my blog.

    1. Hi Bethany,
      That’s great that your theme has a one click option for installing the follow icons. That’s great to know. Feel free to let us know what theme you’re using if you get a chance. It might help someone else who is shopping for a theme. Thanks!

  18. Hi Sherryl,

    Thanks for the info.

    Similar to Jeanette, I don’t do my own coding or all site changes. And even though I have a great Web guy, it certainly is helpful (even if I need to delegate) to know about the options & be more self-sufficient in the process.

    Lastly, I have a quick question for you. I thought I signed up for your site updates, but did not receive anything via email…Can you tell me if I am showing up in your list? 🙂

    1. Hi Vanessa,
      I think it’s helpful to know enough code so that you can open a new target window or add a do-not follow tag but it’s definitely not for everyone and I understand that completely.

      I just checked my subscriber list and you’re not there. I wonder what happened. If you try again and there’s an issue, please let me know so that I can troubleshoot it. Thanks!

      1. Thanks for checking Sherryl! I went ahead and signed up for updates again (upper right hand corner opt-in).

        Let me know if you see me & in the mean time I will keep a look out for my email confirmation.

  19. Hi Sherryl, I have been working a lot with Steve on my Locksmith Carshalton website and things have gone really well. Social networking sites is really the last thing that I have to do, and I don’t mind admitted as a newbie I have been putting it off for a while. I think that this article might just give me the push and confidence to dip my toes in and have a go. I do love the way that you have made it accessible for everyone not just computer minded people. Thanks Lee.

    1. Hi Lee,
      Thanks for letting me know that you found me through Steve and that my post may give you the little push that you needed. We were all newbies at blogging at one time. 🙂

  20. Hi Sherryl, first of all thank you for the post. I have many sites powered by WordPress. Usually I use plugins to add follow buttons because it is easy and I don’t know how to add it manually. I recently launched a new WordPress site and I’ll give it a try. If it works, I will never use plugins for this anymore. Wish me luck. 🙂

    1. Good luck Jason. I hope you follow Steve’s tip to write the HTML in a draft post first and then copy and paste it into your text widget after you’re sure it’s working correctly. I’m sure you’ll do fine.

  21. Hi Sherryl ,
    Like always you have rescued a lot of people with such an important aspect which is of great relevance for www presence. I’m sure lot of people will take advantage of this and i’m sure all are waiting for more of these helpful posts from you, atleast I am :).

  22. I also like Steve’s idea of writing HTML drafts – my, that could open up a whole topic in itself. I’m so glad to see some of your readers are comfortable enough to try the code.

    I’ve seen so many errors when people try to write code… one classic is not getting the correct path to the image (where it starts with <img src="http://). A good way to test the path is stick it in your browser to see if it shows up.

    I used AddThis – one mentor suggested that plugin because it has good stats. Though I never check them, so that really doesn't matter much to me.

  23. Hi Sherryl,

    Thanks for the great explanation. I use plugin for sharing social icons but I have used HTML too and it is great and fast if you know how to code it. I hope this post is useful to many bloggers for whom code is a struggle.

    1. Hi Ashvini,
      I use a plugin for my sharing icons too. I often worry that I’m using too many plugins. So, for the simple things, I’m trying to use code. I think there are a few bloggers here who are going to try their hand at HTML. Steve’s tip to practice with a draft post is great advice.

  24. Great information thanks for sharing such useful information with us. I am planning to design one website for my business purpose. Surely I will add social media buttons in my website so that I will get good results to my website.

  25. This is perfect timing and exactly what I needed for the new web site I am working on. Thank you so much!

  26. Love this topic Sherryl! Excellent choice. Even a bit provocative, just like newspaper articles.

    But, as you know, I’m not technical so I will not have a go at it. Will have me sweat and worry to much:-)

    1. You can do it Catarina! I know you can. Keyuri Joshi said the same thing to me months ago when she asked me about adding follow buttons to her site. Actually, I asked her if she still had the email that I had originally sent to her. She sent it back to me and I saved time writing this post by copying and pasting parts from that email. BTW – Keyuri is the person who told me about IconFinder. That is not where I found my buttons.

  27. This is a great and very practical post. Thanks for this contribution to the web.

    Question: How to you stack the icons side by side in the event you are creating four social button?

    1. Hi Yeremi,
      I just stacked the lines of code on top of each other in my sidebar. Eventually, if you add enough, they’ll wrap around to a second line. The reason that I chose the 32px X 32px size is that I wanted them to appear on the same line.

      Adrienne Smith suggested creating a table with your icons and then including that in your HTML code. Tables can be a little trickier to learn but they’re certainly doable. I have to confess though that I have a really old copy of Microsoft FrontPage and if I’m building a complex table, I boot that up, design my table and then copy and paste the code that was generated into WordPress. (I’ve done this for a couple of posts.) Tables are frowned upon by some designers but if It works, I stick with it. 🙂

  28. Sherryl — you lost me about half way through your post. I admire you because your are so conversant in HTML, which I am not. This is an excellent how-to post for your readers who are brave enough to try inserting the social media icons. I have them on my site but I confess I didn’t put them there. When I have a need for HTML I turn to my IT consultant (who I met in LinkedIn’s WordPress Group). But I know I should get better so that I can do the quick fixes myself. Makes me nervous even thinking about it!

    1. Hi Jeannette,
      Since you have such a great relationship with your IT consultant, there may be no need for you to learn HTML unless you really wanted to. Lots of times it makes more sense to outsource tasks that are outside of our skill set and spend our time on what we do best.

      You may want to learn a couple of lines of HTML that do specific tasks. For example, I’ve edited the link I have above for the IconFinder to include the no-follow tag. (WP added the open new window tag.) Those 2 coding tricks come in handy. The code for that link ended up looking like this:
      IconFinder.com.

      1. Hi Sherryl, I’m enjoying keeping up to date with the comments to your post it brightens up my dull email and I’m getting some good ideas from the comments. you say you’ve included, no follow, in your link is this part of your SEO strategy? I ask this as I’m doing a series of SEO posts on my blog and keen to know more.
        Cheers, Pete.

        1. Hi Pete,
          I wish my emails were dull! 🙂 Between replying to comments, commenting and emails, it can be tough getting work done! Thanks for letting me know that you’re getting some good ideas from the comments. It’s always helpful to get input. It’s a good indicator of what’s working here.

          The main reason that I add the no-follow tag is that I don’t want Google to associate my site with another site. (The majority of coupon sites and sites with lots of advertising falls into this category.) When I add the no-follow to a site like Icon-finder, it’s because I really don’t have any relationship to them and their content isn’t that relative to me. (Because I use CommentLuv and the default is do-follow, I think I have enough outgoing links that I just don’t need another.)

          In another comment, I linked to InstantShift.com and I left the do-follow. That’s because I downloaded and used their free icons. So, to me, that’s a thank you to them. (I’m not sure whether or not SEO strategists would agree or disagree with me on how I do this but I’m always open to hearing from other people.)

          BTW – One of my favorite things about the premium version of CommentLuv is that it’s so easy to remove the do-follow tag from an individual comment if I need/want to.

  29. You amaze me. What great advise and guidance in regards to adding these SM buttons to our prospective websites. You are a gem of a resource that I am so glad to have fiund and subscribed to.

  30. Hi Sherryl, I started following your steps to add social media buttons to my site, and got as far as Step 2 (choosing buttons in IconFinder), when I got distracted (like I usually do) and ended up following a link for Add This http://www.addthis.com. They have sets of buttons for following, or sharing and heaps more! All you do is tick which social media buttons you want, eg facebook, twitter, etc you want (a set) and they give you code which you can then just copy/paste into your text widget. It was so easy, even for me! All the same size too! Just thought this might be helpful to some of your readers.

    Have found this post so useful! I’ve downloaded Notepad++, so can start learning some basic HTML – I’m having so much fun learning all this new stuff! 🙂

    1. Thanks for the link Michelle. Adrienne Smith shared this article on Facebook and Suresh Peters posted it there too. (Could that be where your distraction led you?) I haven’t checked it out yet but it sounds like an easy solution for generating the code that you can then post into a text widget. I’m sure there will be people who will prefer to go that route.

      Good luck learning a little HTML. I really believe it can be a bit of a confidence boost. Sometimes people who say they’re not “techie” just haven’t found the right source to learn from yet. I’m glad to hear you’re enjoying learning new stuff!

  31. Hey Sherryl,

    Your social buttons look great. Sometimes I find a couple that I like. They look nice and the same size, but I can’t seem to find the same size or match for one or two that I am looking for. If I can accomplish something without the use of a plugin even better. It can be a challenge or time-consuming to update them all the time.

    1. Hi Ray,
      I searched for an icon set that included all of the sites that I wanted to link to. If anyone is interested in using the same icons that I do, you can download them here from InstantShift.com: http://bit.ly/MRBkF0. They’re free to use and you can use them on a commercial website.

  32. This is a fantastic post, sherryl. I have added the social media buttons in the navigation menu of my site and I’m getting good results.

    Thanks for sharing this post, Sherryl. Have a great weekend.

    -Dev

  33. Sherryl, This is brilliant. I just sweated out trying to find the ideal sharing plugin for The Wonder of Tech and came close but still wasn’t 100% thrilled. What I especially like about your solution is that you can make custom links for each social media site. Who knows? We may all be on so.cl a year from now…

    Thanks for sharing this with us!

    1. You’re welcome Carolyn! I’m glad my timing on this post was helpful to you. I’m looking forward to seeing what you come up with for follow buttons on your site. Have a nice weekend!

  34. Hi Sherryl,

    I just land here via shared link on Facebook. I’m now a WordPress guy too. But I like the way it has been explained 🙂 Some people just know too much and some doesn’t know even a HTML tag. Some people may say this is just a simple thing to them, but they’ve never generous to share with others.

    It’s really generous you’re explaining each of things with tools they can make use of, so anyone can follow and add them in their WordPress platform. Plus it has performance advantage too.

    Keep up your good work… Just wanna stop by and comment 🙂

    Cheers…

    1. Hi Mayura,
      Thanks for coming over from Facebook. It’s always helpful to know how people have found my blog. I appreciate your comments about my sharing. I truly enjoy explaining things that can be perceived as complex in simple terms. I believe it’s very important that as solpreneurs and small business owners, we help each other to succeed. It helps in a small way to level the playing field with bigger businesses. 🙂

  35. I wish I had found this information when I was first trying to figure all of this out Sherryl. I just kind of flew by the seat of my pants.

    I did this same similar thing to create mine. I actually put mine in tables so they would separate the way I wanted.

    Great tips and I’m sharing this one with my friends. They’ll love learning this.

    ~Adrienne

    1. Thanks for sharing this for me Adrienne. I use tables sometimes on my pages but I don’t believe I’ve ever used them in my sidebar before. I like the size of your follow buttons and Susan mentioned that hers are larger than mine too. Maybe I should revisit them.

      I noticed that you have a Pinterest button on your blog. Are people pinning your posts?

      1. My pleasure, good info needs to be shared for sure.

        I do have people pinning my blog so I’m hoping it’s from that. It could be from the pin feature they have installed on their browser, not sure.

  36. Very cool! I did not know about icon finder and I am glad to be able to add it to my list of resources. This is why I think every blogger should know a bit of html and props if you can learn some basic css. I really think it helps to understand the basics of what goes on in the frontend and backend of your website.

    1. I agree Susan. A little HTML can go a long way and so can some CSS. I think it’s also a bit of a confidence builder too. One of the things that I do the most often in HTML is add a rel=nofollow to links when I’m writing my post. Some links, I want Google to follow but others there’s simply no need to.

      Thanks for taking the time to join the conversation!

  37. When I first saw this post I didn’t understand why it would even be necessary to install these buttons without plug-ins, but now I realize the drawback of the plug-ins. Not sure I’ll be doing HTML any time soon, but I do like learning the options and challenging myself to consider new skills.

    Judy Stone-Goldman
    The Reflective Writer
    Personal-Professional Balance Through Writing

    1. That’s how I created the follow buttons on your blog Judy. HTML doesn’t need to be scary. Steve Hippel added a great suggestion about using a draft post to test HTML code. I’ve added his tip to this post. You can also read Steve’s comment below. (His was the very first comment.)

  38. Hi Sheryl,

    This is great advice. I have just added some buttons in my sidebar too. I don’t want to use all those plugins since they’re slowing down my site 🙂

    Have a wonderful weekend.

    1. Hi Jens,
      Like most bloggers, I added plugins for just about everything when I first started. Then, I learned that the text widget can be very easy to use and you can do so much with it. On one of my client sites, I’ve used text widgets to showcase some of their YouTube videos. With the widget-logic plugin, I was able to display different videos on different pages.

      You have a wonderful weekend too! Thanks.

  39. Hi Sherryl, great advice there, I’ve just begun blogging and it took me ages to find a suitable plugin for readers to follow. Thanks for the info on where to go to get the icons, thats another reason I had to go with a plugin. I simply had no icons and therefore felt forced to install a plugin.

    1. Hi Pete,
      One of the plugins that I do use for social media is the “Facebook social plugin” that’s in my sidebar. (Mine displays the profile pics of some of my FB followers.) It’s not actually a plugin in the true sense. You simply go to Facebook, provide the URL of your FB page and select the parameters that you want. It generates the HTML code for you. Then, you can create a text widget and paste the code into it. I noticed a significant increase in the number of followers that I have on Facebook after I added it.

  40. That’s Indeed an awesome way to put follow button WordPress! its not new thing to say that having lots of plugins to the wordpress site/blog makes it too slow in terms of loading. Hence having a way to add follow button without using any plugin is definitely a wise way to make the wordpress more light and fast! Thanks awesome post!

    1. Adrian, Thanks for letting me know that you found my post helpful. I’ve been slowly trying to replace plugins with code. Not only does it help with performance but it also can eliminate potential problems when one plugin conflicts with another. (I’ve had my share of those experiences.)

  41. Like you I use a text widget. I should also say a big thanks to you for showing me how to make sure each one opens up in a new window instead of leaving my website. My icons are bigger than yours. Do you know if there is any research that shows what the optimum size is to get people to act and follow?

    1. Hi Susan,
      Thanks for letting me know that you picked up a tip from my article. Sometimes when I’m writing, I suspect that a lot of the more experienced bloggers here won’t find any value in it. So, it’s good to know that not only did you take the time to read it but it helped you too.

      I don’t recall ever reading anything on what size icons to use. I would prefer larger icons myself but (if I’m remembering right) the 64 x64 icons went to a 2nd line on my blog. I could decrease the size of my content but (since I write rather lengthy posts) I’ve been reluctant to do that. If anyone does know of research that’s been done on this, I hope they post a link to it here.

    1. Hi Michelle,
      HTML can be intimidating. Steve Hippel left a comment (just before you did) suggesting experimenting with your HTML code in a draft post first. That is a great suggestion. That way, you can keep previewing the page until you get it right. No one ever has to see the results until you’re happy with them.

      1. Thanks Sherryl and Steve, that’s a good suggestion. I’m laughing at myself now, cos the first thing when I did when I moved to a self hosted blog (2 or 3 days ago) was to look for plug-ins that I could add! Now it looks like I’ll have to deactivate a few and do it the smart way!

        1. Michelle, We all look for plugins when we’re first getting started. Actually, I still look for plugins especially if it’s a complicated task. Once you understand the power of the text widget, it’s amazing what you can do with it.

          I’m also fond of a plugin called widget-logic. With that plugin, you can control which pages you want the widget to appear on. For example, one of my clients has a page targeting entrepreneurs and a different page for businesses. I use widget-logic to display one of two different videos on each of the pages. The coding for the logic can take a little getting used to but there is another plugin that does the same thing. (I can’t remember the name of it right now. I don’t know if it’s any easier to get the logic right in that plugin.)

  42. Those plug-ins can sure slow things down Sherryl and this is a great way to take more control of your blog layout.
    I have a little something to add for WP users that are a bit worried about writing HTML.
    1- Create a draft post.
    2- Add your icons to the post and create image links from them as you would normally (don’t forget your image titles and alt text).
    3- Switch the WP text editor to HTML mode.
    4- Copy the code and paste it into a text widget.
    This will make sure your code is error free and also make light work of formatting. i.e, center, align left etc.

    1. Steve,
      Thanks so much for adding this! HTML can get tricky. So your suggestion to tweak your code in a draft post is EXCELLENT! (I’m going to add this to my post, with credit to you of course!)