How to Create Your Own Custom Social Media Icons Widget

WordPress.com’s functionality is awesome for getting a blog up and running quickly, but sometimes simply displaying a row of social media icons on your site can be a challenge. My free theme, Fresh & Clean (now retired), didn’t include any icon placements that i could take advantage of, beyond using the default Twitter feed and Facebook Like Box widgets. Here’s how you can get around this and create a selection of icons customized for your personal social media presence. (This post is directed towards WordPress.com users, as WordPress.org users have access to a multitude of plugins to serve this purpose. However, the method outlined in step #3 below could also be implemented on your WP.org site if you’re feeling frisky.)

Book Worm Laser & Design / Foter.com / CC BY

The 3 Best Methods

  1. Use an appropriate theme.
    The easiest way to implement social media icons is to find a theme, such as Grisaille, that already features them as an option. Just access the theme’s appearance settings and insert the appropriate links to your Facebook, Twitter, etc. The cons? You are limited to the social media buttons offered by that particular theme. Paid themes will usually offer more options than the free ones, but our goal here is to implement this cost-free.
  2. Use the About.me widget.
    The About.me widget allows you to place your About.me profile information, including photo, bio, and links to your social profiles, into your theme’s widgeted sidebar or footer areas. This can create a nice little ‘about the author’ box in your sidebar. This Widgets 301 post has more information about configuring your About.me widget. The cons? It’s one more online profile you need to create in order to make this happen.
  3. Use the text widget.
    The text widget is the option that we’ll concentrate on for the rest of this post, as it allows you the highest level of customization. With a little elbow grease, some free social media icons, and some basic HTML, you can completely customize the selection, size, order, and placement of your icons. We’ll address the code necessary to make this happen in the following sections.

The approach here is to upload the desired icons to your site’s media library, insert the selected icon images into the text widget, then link the images to your social media sites.

The Social Media Icons

social media iconsThere are many sets of free social media icons available for download and subsequent upload to your media library. Here are 40 funky sets of free icons you can choose from to get started. I used the Elegant Themes social media icon set, featuring 42 of the most popular social icons, available for download as 64 pixel x 64 pixel square icons in PNG and PSD file formats.

[Update: Here are 2 more collections of fantastic free icons you can choose from. These 23 icon sets contain stylized, artistic, & retro designs, while these 35 sets feature attractive flat, minimal icons.]

The approach here is to upload the desired icons to your site’s media library, insert the selected icon images into the text widget using the <img> tag, then link the images to your social media sites using the <a> tag. Using this method, you can upload only the icons you want and place them in any order.

Once you’ve downloaded the icons, use the Media > Add New menu option to upload the icons you want to display. Select the first icon from your media library and copy it’s file URL from the upper right side of the screen. This is what we’ll use in the next section to place the icon into the text widget.

The Simple Code

social media text widgetAll we need to make this happen is the file URL of the icon (img src=”…….”) that we copied above, and the link (a href=”…….”) that the icon will send users to when clicked – your Twitter page, Facebook profile, etc.

This graphic shows the contents of my text widget used to display my Twitter, Facebook, other WordPress blog, and LinkedIn icons on this site at the top of my sidebar. The title text, if entered, will appear above your icons.

You can copy and paste the following code into the body of your text widget to display each of your icons. All you’ll need to do then is replace the first URL with the link to your social media page, and the second one with the file URL of your icon from your media library.

<a href="https://twitter.com/yourtwitteraccount"><img src="http://yourwpsite.files.wordpress.com/2013/05/icon-twitter.png" /></a>

Repeat this chunk of code for as many icons as you’d like to display (you can see the code repeated 4 times in my example graphic above), changing the links accordingly.

And you’re done! Access to your full social media presence now awaits your loyal readers.

Tweaking the Code

Here are a couple of extra tweaks you can add to the code afterwards to further customize your icons.

  1. Opening your link in a new browser window.
    Add  target=”_blank” into the code right after the a href=”…” link (as i did in my text widget example graphic above) to pop your link open in a new window. Leaving this code out will open the link in your current browser window.
  2. Resize your icons.
    Add height=”40px” width=”40px” into the code right after the img src=”…” link. Raise or lower the pixel dimensions to display icons larger or smaller than the default size provided. For reference, my social media icons are displaying at 50 pixels square, including a bit of white space.
  3. Check the comments! [update]
    There are several additional alignment suggestions in the comments section below. Note that icons should align horizontally by default, provided your widget area is wide enough to allow it, but a few more solutions to the dreaded ‘vertical alignment’ issue are offered up here.
About these ads

43 thoughts on “How to Create Your Own Custom Social Media Icons Widget

  1. Pingback: How to Create Your Own Custom Social Media Icon...

    • awesome, those look great! nice job. try putting the height and width directly after the img src, keeping them inside the same < brackets, so it would look like this…

      img src="….twitter.png" height="40px" width="40px" />

      hope that helps!

      scott

  2. Hey, this worked so well for me! Do you have any idea how to create a bit of space between the icons? Thank so much!

    • great to hear! try adding this style code after img src=”….twitter.png” style=”margin:0 5px;”. In this example the 0 adds no space above and below the image, and the 5px is added to the left and right sides. Add the style code to each img, adjust the pixel values accordingly and good luck!

      • Hi Scott – thank you so much for this helpful tutorial! I’m not very familiar with HTML, but this easy instructional allowed me to place some icons on my blog. I’m wondering if you could help me figure out why this code won’t work for me. I would like wider margins between the icons, like yours, but when I added the code it didn’t do anything.

        Here’s a copy of my code:

        It’s active on my website so you can see what I mean. Thanks againfor this really helpful tutorial!

      • hi april, looking good so far! the only thing i can see to edit would be adding a space in front of the words style and height. looks like they might all be running together at the moment. hope that helps!

  3. Pingback: How To Add Social Media Icons To Your WordPress Blog | Blondes Love Cupcakes

  4. awesome! thanks for the info!

    one problem though: my icons are not appearing correctly, the image error is showing up in it’s place. any suggestions??

    • glad you liked it! sounds like the path to the icons isn’t quite right. try selecting the icon in your media library and copying its full image url right from there, then pasting it directly back into your widget code. if that doesn’t help you can leave a link to your site here and i can take a look.

  5. Pingback: Manually Adding Social Network Icons To WordPress - eBabble

    • those are cool! nice work. if you put <div align="center" above your icons code and </div below the code they should center up for you. (close out the > brackets on both pieces of code. i just couldn’t get it to display properly in these comments with the second bracket.)

  6. Fantastic post! Been trying to figure out how to do this and today I found you and all your brilliance. Now I have what I want — a row of icons linked to all my social media outlets. Thanks much! (Plus, Vandelay had posted a new set of icons on 7/2, which I really liked.)

  7. Pingback: Friday Faves #2 | The Girl In The Orange

  8. hey there. i did the code exactly and i wanted the social media images to appear from left to right. its in my footer widget if that matters. any advice? i tried stacking the code but it will only load the images into the footer vertically.

    thanks!

    • good day, glad you’re giving it a shot! if you want to provide a link to your site i can take a better look, or a couple of things to quickly check first would be that there are no line breaks in there, or that ‘automatically add paragraphs’ isn’t checked off at the bottom of your text widget.

      • hmm, if your container is large enough they should be aligning horizontally by default, but you could also try adding <div style="float:left;" above your code chunk and </div below it (and close the brackets on the divs) and make sure there are no spaces whatsoever between any of your existing <img codes.

    • Not sure if you ever resolved this. But I JUST figured out a solution after many hours of frustration. I tried EVERYTHING that was suggested, but nothing worked.

      Try adding this to your custom css:

      #footer .widgetBox a img {
      display: inline!important
      }

      It worked perfectly for me! Hope it helps!

      • good to hear! for anyone else trying this fix, the display: inline!important could help you out, just make sure the selectors (# and . ) are applicable to the css for your own widget area. thanks megan!

  9. Hi ! How can I do this for the button “follow me” on my blog ? I can’t find the URL for this. Thanks for the icons and links !

    • hmm, interesting idea. if you log out of your site, then hover over your ‘follow me’ link, the url you want should appear at the bottom of your browser. then you should be able to do the same thing you did with the social buttons, except with a ‘follow me’ graphic instead. haven’t tried it myself but hope that works out!

  10. Hi thanks for this helpful info! I follow all the directions, but how can I change my icons from png to img? The images aren’t showing up as buttons. Thanks for any help.

    • hi carole, glad you’re giving it a try! .png, .jpg or .gif images should all work fine. best thing to do is once you’ve uploaded your icons to your image library, click on each image there and copy the full url for each icon into your <img src=… code. this way you'll have the exact path to each image you want to use and they should show up no matter what graphic type they are. hope that helps!

    • hi sarah, glad it’s working out for you! if you look back up to a couple of my comment replies over the summer i mention how to add some space between icons, as well as a centering solution. give it a shot!

  11. Reblogged this on fluxgain Like and commented:
    Just gone through this exercise for the salesforce chatter like button and noticed this blog which covers the steps for creating customer social buttons.

  12. Thanks a lot!! Your information together with those links attached are very handy~ :) Easy to learn for newbie blogger like me :D

  13. Thanks for this! It was super helpful!! Just what I needed. I did everything like you said and even tried all the things that you suggested to fix the problem I’m having. My icons are also lining up vertically instead of horizontally. I saw that someone else was having this problem, but nothing seems to fix it and I have no idea what to do about it. I’ve been playing with it for a while.

    Here’s my site: http://moksedesign.com/

    • hi megan, site looks great! if you’ve tried all the previous suggestions, give this a shot. they should align inline by default, as long as there is space in your footer to do so (and there are no spaces added in between each piece of bracketed img code). try adding the image height and width to each icon (detailed at the end of the article) and see if that helps to define how much space they should be taking up. if that works then check the comment on adding space between images to adjust to your liking. hope that helps!

  14. Hey, so this was an awesome explanation how to do this. My only issue I’m having is they are showing up vertically. I already made sure there were no spaces and that the “automatically add paragraphs” box wasn’t checked. Any ideas?

    • hi, glad you gave it a shot! seems to be a problem for a few people trying this. scroll up to my comment reply on 08/29/13 and give that a try. there’s also a comment from Megan directly under that from a few weeks back that has a fix that worked for her. hope one of those helps!

  15. Pingback: Credit where credit is due | Confessions of a Popcorn Addict

  16. Pingback: How To Add Social Media Icons To Your Wordpress Blog Tutorial | Blondes Love Cupcakes

Comments are closed.