I am very pleased to announce that we have released the Simple Social Icons plugin for WordPress. Simple Social Icons is an easy to use, customizable way to display icons that link visitors to your various social profiles.
With it, you can easily choose which profiles to link to, customize the color and size of your icons, as well as align them to the left or right, all from the widget form (no settings page necessary!).
Many of our themes have used CSS and the Custom Menus function to accomplish this. You can still use this method, and if you do – here’s how you can pull it off.
But Now There’s an Easier Way to Add Social Media Icons
Thanks to the code craftsmanship of Nathan Rice, you can add these icons to your header right section, your sidebar or even your footer widgets with a few clicks.
Here’s a screenshot of the widget admin screen.
The great thing about this plugin is that it will work on any WordPress site – it’s not limited to the Genesis Framework.
So what are you waiting for? Head on over to the WordPress.org plugin repository and download it there.
About Brian Gardner
@Nathan Rice
Great plugin for Simple WordPress Lovers.
Happy to download it from http://wordpress.org/extend/plugins/simple-social-icons
Very nice looking plugin! Looking forward to replacing the other social icon plugin with this. Crossing my fingers that it’s all that!
~Eve
Awesome – if you experience any bugs, let us know. Technically the plugin is in beta, and it would be easy to push out an update with fixes.
Just downloaded and installed it. Super easy, and works very well!
Looks great Ricardo – thanks for giving us such quick feedback!
Great plugin, i’m downloading and using; thanks brian, i like it!
Simple Social Icons and Social Profile Widgets seem to do the same thing and in fact, both are co-authored by Nathan Rice and StudioPress. Does Simple Social Icons supercede Social Profile Widgets?
Happy to see MySpace was dropped, but so was YouTube. Wish the list of social networks and the ordering could be customizable. Otherwise, NICE WIDGET!
Simple Social Icons is our new plugin, so yes – it will supercede the Social Profiles Widget. Here’s a better explanation why.
Brian! You guys rock! I love the feature of being able to style the color of the buttons.
I echo Ed’s wish for YouTube. I really encourage my clients to do more video and it would be so cool to add the YouTube button for them.
Either way, very cool!! Thanks!
We can easily add a YouTube icon. I want to wait a day or two to see if any others are requested (we already updated the plugin to include Email, Dribbble and Stumble Upon. While we ultimately don’t want to overload the widget, I do concur that YouTube is warranted.
Awesome!!! I really can’t tell you how much I appreciate the work you guys do!
It is OUR job to make YOUR job easier.
Hi Brian,
Thanks for the plugin. You guys always provide us with easy to use tools that makes our live easier!!!
I’ve just installed and set it up in one sub-site (I have a multisite installation). My sidebar has a background color, but the icons are in a white background.
How can I customize it in the sub-site CSS file?
Thanks in advance,
Daniel.
Best to ask that question in our community forum – as that is where customization type things are being handled.
Thanks. It wasn’t a problem with the plugin, it was something related to the child-theme. Thanks anyway.
Now this is classy and simple. Well done guys, well done.
Thanks Grant – appreciate it!
Hi Brian,
Thanks exactly what I was looking for but there is a bug when you install it with the eleven40 theme. This theme uses the same css or something and there is a conflict.
The google+ icon is not right as it is not using the built in social icons image already used by eleven40 : /images/social-icons.png
David
I’d have to see it in action – got a link?
I don’t have a live link to show you but here’s a screen shot: http://i41.tinypic.com/11aao1t.jpg
Easiest way around that is to remove the CSS that was used in the eleven40 child theme for social media icons.
Awesome! Awesome! Awesome! One thing that would make it even more awesome for me….an email icon. That is the only extra thing I’ve been adding when I use your instructions you posted months ago. This plugin will make my life so much easier.
Heh, we had one but I didn’t like it. That’s probably the next one I’ll have Rafal make, as I can see most folks wanting to link it to a contact page. Great suggestion Thauna.
I second the request for an email link. That would be great.
Request granted.
Thanks Brian!!!
You can also use my plugin “Genesis Social Profiles Menu” for that – which is working with the default WordPress menu system – and has some more icons in store than the StudioPress plugin from here
http://wordpress.org/extend/plugins/genesis-social-profiles-menu/
But either way will get you socially connected
Nice plugin, David. Hadn’t seen that before.
Have you considered adding a demo or example site to the WP description page with the plugin running ?
The soon-to-be-released Streamline theme update has it running, and once that goes live that’s a great idea to link to it from our plugin page.
The best thing about this plugin is that you can customize the color, border color etc to your liking from the dashboard!
That was exactly the intent – keeping it simple.
How do some plugins, like that one, get that cool header image?
WordPress started allowing developers to do it a couple of months ago – here’s Matt’s announcement post.
Played around with it on my dev site and it’s awesome. I second the request for an email icon.
I don’t know if it breaks the idea of being simple, but it might be nice to have the option to enter text below the icon, similar to StudioPress’s Stay Connected icons.
We have Rafal already working on Email, Dribbble and Stumble Upon icons to be added. Should be added to a plugin update later today or tomorrow. As for the text below the icon, not sure that we’ll do that. It might be hard to do that in a way where most people won’t break the way it looks.
Fair enough. Thanks for the quick turnaround on the other icons!
You betcha Bryan. And great looking site you have there, very well done. Just added it to our Showcase – hopefully that brings in a bit of traffic for you!
Wow! Thanks so much!
Hi
At the moment I’m using “Social Profiles plugin” by Nathan.
Is there an advantage to using “Simple Social Icons” plugin or does the new plugin replace the old one?
Well the style of icons obviously are different. With the Simple Social Icons plugin, we’ll continually be updating it. It gives the ability to customize background colors, border radius and what not. We prefer to have control over the icons we add, so Rafal created them from scratch.
Wow!
That was quick.
Will the old plugin “Social Profiles plugin” be updated to include a Pinterest button?
Nope – that’s one of the problems with that plugin. We used icons that were created by other people, so we are at the mercy of them adding icons such as Pinterest. This is why we took matters into our own hands and had Rafal do our own.
Thanks Brian
I’ll give the new plugin a run out.
Sorry for second comment, meant to ask:
How do you get the twitter icon after “February 22, 2012 by Brian Gardner” at the top of your posts?
Regards
Ancient Chinese secret.
Here’s the code we used to customize the post info for that.
Again – many thanks Brian.
Keith, I think it’s time to step up your game and get a Gravatar.
Just too busy and… I don’t have your boyish good looks.
Daughter is home this weekend, she’ll take a picy.
Thanks for reminder.
Hi Brian,
Just installed it on my Genesis framework with the Going Green child theme. I’m showing black dots between each of the icons — any idea how I can get rid of those? You can see them here: http://www.smartgreenmedia.com
I don’t speak tech, so the simpler the explanation, the better.
Hey Beth – hm, I don’t see black dots. Did you do something to fix it? Or if it’s still there, which browser are you in?
Didn’t fix it. I’m on Firefox 10.0.2 on a Mac, if that matters.
Just checked it on Chrome and the black dots (squares) are not there. It looks great.
Re-opened Firefox and I still see them on that browser.
Go into your theme’s stylesheet and change the line in bold:
#header .widget-area ul li {
list-style-type: none;
margin: 0 0 0 20px;
padding: 0;
}
Perfect — the change in the stylesheet did it.
Thanks a lot!
I see black dots (squares) above the icons in IE 9.
Love this new plugin. I’ve put it up on a site I’ve got in progress. The spacing works in the sidebar but in the footer it’s off.
http://www.innov8tive.eightcrazydesigns.com/
Also, kind of a weird thing… the one in the sidebar I had specific colors and a much higher border radius so they were circles. when I installed the same widget in the footer they styling over rode the one in the sidebar. I don’t need both at the same time, I was just testing spacing…it’s just an FYI
I see the issue – and we’ll push out an update in the next day or so to address it. Ultimately there’s some overriding CSS that needs to be added to the plugin.
keep up the great work!
We pushed out the update – it should be fine now.
There is still a conflict even with the update. The one in the primary sidebar widget is color and radius styled, and I filled in facebook, twitter, pinterest, and rss
The one in the footer is not styled differently from default and I filled in facebook, pinterest and twitter. You can view the results: http://www.innov8tive.eightcrazydesigns.com/
both have default look, and the one in the primary is filling in the ones I left blank with dribble icons
OK Shannon, totally off topic – beautiful site you are working on. Can I ask what photo slider plugin you are using? I like that you have been able to have the transparent banner with text link to the post. Genesis Slider out of the box isn’t quite as customizable as this – for me anyway.
Thanks,
Nanci
It actually is the Genesis Slider!
Can the order of the icons be changed?
Easilly that is.
As of now – no. It’s something we are going to try to work out, though.
Love this! I just swapped it out for a custom sprite that I had at the top of my site and my only negative would be that it didn’t come out sooner!!
It would have saved me a few hours and headaches! Thanks again!
Now you’ve got it for next time, Wade.
Oh yes. This is wonderful, I actually downloaded early early this morning (the advantages of following people on twitter)
It does put the dots on the Balance theme when used in the footer widgets.
Thanks much,
Mike
We updated the plugin, so this shouldn’t be an issue anymore.
Perfect..Worked like a charm
Thanks
Mike
w00t! This is fabulous! Thank you!
Looks brilliant with customised colour on the Minimum theme, but causes my top menu to expand and go on to a second line.
http://www.wmwebdesign.co.uk/blog/
Didn’t do it on my local install
Update did it Brian
Fabulous service.
Great plugin. I just installed the update and it caused some of the icons to go blank, and the icons aren’t matched up with the correct urls. Thanks!
Dave
Can you do a hard refresh? It might be that your machine has cached the previous ones.
I’ve checked our your site and they seem to be matched up ok.
Wow, that must’ve been it. Thanks for your help.
Unrelated to this plugin, does Studiopress have a theme that is pretty customizable for color? I’ve gone through a few one by one, but they all seem to be limited to 4-5 colors. I’m considering switching and am evaluating what to do. Thanks!
As of right now, the Prose theme would be the one – it has built in design settings that give you more control from the backend to change colors, fonts, etc. We are planning on releasing a 1.5 beta version towards the end of the month – something you should consider.
Great – thank you
No StumbleUpon? StumbleUpon is my favorite!
Do an autoupdate on the plugin. We literally just added that (along with Email and Dribbble) 20 minutes ago.
I’m in love, it took seconds to install and set up and gives me exactly what I wanted – nice clean and simple icons that match my theme thanks to your color customization! Now, is there any chance you can tell me how many pixels the icons are rounded by? And is there an easy way to re-use the icons on an about page?
Not sure what you mean by “how many pixels the icons are rounded by”. You can determine the radius yourself – or not have any at all, which would make them square icons.
As for the about page – the only (relatively easy) way to do that is to copy the HTML from the source code and dump that into your page.
Pretty straightforward and easy to use and I like the simplicity.
Thanks for the great plugin!
Artemis
Mission accomplished then.
Which icons are included? Do you have icons for Goodreads, YouTube, and email?
I just updated the plugin page to list the icons that are included. YouTube will probably be the next one we add.
This is by far the best and easiest social media plugin I have used. Hands down – it’s fabulous!
…Do love the plugin Brian,
…curious if you might add the ability to create text to appear as users rollover each icon…
Love this Brian, and everyone at StudioPress. Having a problem with the e-mail URL. I enter the email address of my client – this is for http://ckcpublicrelations.com (footer #2) and when I hit save, the plugin forces a http:// in front of the e-mail and then it doesn’t work.
Am I missing something?
No – you’re not missing anything. I guess we thought folks would use that to go to a Contact page rather than an email address. Normally I don’t like to do mailto: type things b/c bots can scrape source code and get your email address for spam purposes.
Same thing here Nanci
Thanks for asking.
I note Brian’s reply about email scrapers and using contact page URL.
Sounds great! Thanks for the clarification.
This is great. Youtube though would be a good addition.
Not sure if this was mentioned above, but I’d like to see an align center for this plugin. Social Profiles didn’t offer this either, but I finally got around it.
Also, I’m not sure if this is meant to happen, but stacked icons blend together to form a column. Horizontally they’re spaced, vertically they touch. Looking forward to more! Thanks…
Also, I couldn’t figure out what the Icon border radius setting does. I changed this value, but I didn’t see any changes to the icons or the widget.
The border radius make the corners round.
We don’t have an align center option yet on the plugin, but it is at the top of the list for us to work into an update.
Hi Nathan, Its a great plugin thanks,
Just added on my blog. It would be more better if you provide subscribe button with feed-burner options.
Beeautiful & so simple. Thanks so much!!! I’ve already implemented the plugin (along with the sweet new Streamline theme) on my personal blog…a site I’ve been meaning to get up & running for a long time – http://kristelhayes.com
I’d like to join the choir for YouTube request, and add Flickr as a personal request as well. Being able to reorder the icons would be pretty slick too.
I’m sure we’ll get those up soon – at least the YouTube one. (trying to keep the selection to a minimum, so the widget UI doesn’t get too much).
Glad to hear Youtube will be added.
Thank you for adding YouTube!!! The icon’s not working on my site right now (icon background showing, but no logo)…but I’ll check/post to the forum on this.
whoop…it’s working now…never mind & thanks again!!!
Great Plugin. Had social media icons up and working in a minute. Much easier then creating a style sheet and icon set. This is a real time saver. Keep up the great work.
Installed but it does not display all of the icons correctly. I have for the time being deactivated it and will try again in a day or two. (The one on my site currently is form my customization of the Social Profiles Widget. Hope this one works since my customized one has to be updated with every genesis update which is a PITA……..
My guess is that you have a CSS conflict with the code in your style.css file. If you choose to use this plugin, go ahead and remove all of the CSS for the social icons like this:
.sidebar ul li.social-facebook
Hi Brian, none of the icons are showing up for me. When I first installed the plugin and played around with the icon colors the top half of the icons showed up. Now that I’m using a different color it’s just the text showing up, no icon. I’m very new to blogging-could you explain a little more about the line of code you mentioned to Gina? I looked in my stylesheet for that line. Am I supposed to be adding or removing it? Sorry, I’m very lost in all this!
Hey Deb – can you link to the site that you’re having issues with? I’m guessing it’s a CSS conflict.
Sure-http://wholesomehomemaker.com/
Thanks!
Hi Brian – I have been building out an Agentpress site that uses this plugin. It has been going pretty good. I did noticed that the icons on the demo site http://demo.studiopress.com/agentpress/listings/1227-auburn-creek-drive were in full color. I can’t see how to do this, am I missing something?
Thank for your help.
I’m glad your site is going well!
Please post your question regarding the plugin here:
http://www.studiopress.com/support
so that our technical staff can assist you as soon as possible.
Ok – will do.
Simple and easy to setup. However, I get the name of the icon displayed on top of the icon. I’m thinking that should be a tooltip or something? Happens in chrome and firefox. The html has the name in the a tag, not sure why.
Facebook
You can see the issue here: http://trackresults.wpengine.com
Thanks
Please post your question here:
http://www.studiopress.com/support
so that our technical staff can assist you as soon as possible – they can help troubleshoot that for you!