Watch this video to see how to add cool looking Twitter, YouTube and Facebook icons that link to your social media profiles to your WordPress Website sidebar.
Note: If you are using the SmallBiz WordPress Theme you can just drag the Social Media Widget to your sidebar and bypass the rest of this tutorial. See this tutorial in the User Guide for more details.
The steps that show adding widgets to your sidebar in this video will work with any Widget-enabled WordPress Theme.
Here is the code
Just copy this code and paste it into a WordPress Text Widget. Then replace the # in the hrefs with links to your social media profiles like I show in the video:
<br> <p align="center"><a href="#" target="_blank"><img src="./wp-content/themes/smallbiz/images/twitter_link.gif" class="frame" alt="Expand2Web Twitter Feed"/></a></p> <p align="center"><a href="#" target="_blank"><img src="./wp-content/themes/smallbiz/images/youtube_link.gif" class="frame" alt="Expand2Web YouTube Link"/></a></p> <p align="center"><a href="#" target="_blank"><img src="./wp-content/themes/smallbiz/images/facebook_link.gif" class="frame" alt="Expand2Web Facebook Link"/></a></p> <p align="center">I hope you'll join the conversation with us!</p>
A note on the images
Depending on where you have your WordPress installed, the image icons might break when you navigate to sub directories. This is because I can’t predict whether your WordPress install is in the root of your domain or in a sub directory.
But it’s an easy fix though. All you have to do is replace the relative image path:
img src="./wp-content/themes/smallbiz/images/twitter_link.gif
with an absolute one like this:
img src="http://www.localsearchtips.com/smallbizdemo/wp-content/themes/smallbiz/images/twitter_link.gif
Notice how I replaced the . at the beginning of the image path with the complete URL of where your WordPress is installed.
Here are the icons
If you are not using my SmallBiz WordPress Theme then you will need to upload the images to WordPress yourself. I’ve included them below in case you need them. Just right click and Save them to your desktop, then upload to your WordPress media area.
Note: The SmallBiz Theme allows you to set different sidebars per page. This video tutorial shows you how to do that.
Let me know what you think in the comments below – I’d love to hear from you!
If you enjoyed this article, get email updates (it's free).
See my disclosure about advertising and affiliate links
{ 65 comments… read them below or add one }
Next Comments →
Thanks for the code. Appreciate it.
@Berg – you bet! Give us a link to your site if you use this so we can check it out!
Thanks for this tutorial–saved me tons of time trying to figure it out!
I’m using smaller icons and would like them to line up horizontally instead of vertically. How do I do that? My site isn’t completed yet, but I included the url so you can see what I’m talking about.
Thanks again!
I figured out how to get the icons horizontal. Thanks!
@Denise , great – I’m glad you got it working!
Hi Don. Just bought your theme, and I love it! I am still playing around with my site and writing my copy. I have a question about this widget. Do you by chance have a linkedin icon with the appropriate code? Thanks!
@Melissa,
That’s great – thank you!
Good suggestion – I’ve added the LinkedIn icon to the post so you can download it. You can just use the same code as for the other icons but change the image url.
Let me know if you have any trouble getting it to work.
-Don
Dear Don.
Love your help. Could you be more specific on the Linkedin instructions? Where is the image url?
Thank you Gail
Hi Gail
What I did was I copied the code from facebook and deleted the part betweeen the “” that says images and I copied and pasted the image url from the linkedin up above this post. If you right click on the url it gives you the option to copy image url. I hope that helps.
Stan
Exactly – thank you Stan!
Gail just emailed me and told me she’s got it now. Here is her site: http://adviceonadvertisingblog.com/
a little too wide for a two sidebar setup, at least on mine. how can i make this fit?
http://www.thefatandugly.com
Don,
Thanks so much for the tips! The instructions were fairly
straightforward. Really appreciate the help!
All the Best,
Arian
Hi Don,
Watched your YouTube video and it was great. I really appreciate your efforts. I tried pasting the code and I get the links, but only little boxes without the Twitter and Facebook art you show. I’m using Wordpress with the Benevolence theme. Any ideas of what I did wrong? I noticed that after I saved the text that it shortened it. I tried putting in the alternate code, which changed the box to one with a red x to one with an illegible pic. Thanks for any advice!
@robert – it looks like you might need to resize the images to make them fit in your sidebar because it is narrow. There is a free image editor called Aviary you can use to resize the social media icons.
@Arian – my pleasure; thanks for the note!
@Kit – It looks like you are using WordPress.com – you will need a place to host the icons so you should upload them to your WordPress media gallery first. For the code, are you adding it to a widget?
Many, many thanks!!! It turns out that it was the template. Once I changed to a wider columned template (Kubrick), problem solved. So not only did I fix the problem with your generous help, I discovered your great website in doing so. Will visit often. Thanks again! Kit
thanks for sharing this valuable information its really helpful for me.
Don: You made a complication process so easy. Thanks so much! I have a couple of questions, though. Every picture (including the social media icons pics) I have tried to insert on WP won’t show up. It’s just an empty box that is there where the picture should be. This includes whether it’s located in the sidebar or in a post in the middle of the page. What am I doing wrong?
Also, I am wanting to use Flexibility 2 as a theme, but I am struggling to make 2 changes stick. When I go to make the sidebar a dual sub sidebar in the Theme Layout changer, it won’t save, no matter how many times I try to save it. And the same goes for the Theme Lightness Selector. I try to save it to the Lighter setting, but the changes won’t save there either. Which is weird, because all the other changes I have made to my site on the page have “Saved”. How can I fix this?
Thanks very much for your help. It is SOOOOO hard to find someone who knows what they are doing AND who is willing to help AND makes it understandable for a WP newbie dummy like me. You Rock!
-Susanne
http://www.susannegodoy.com (still setting up. Don’t expect much at this point.)
And to do with the images insertion:
What is the correct size for an image to be and how do I resize it? I know you suggested Aviary, but I looked at it and I don’t have a clue how to work it.
Is there a plugin that resizes images to the correct size? Is there a plugin in existence that lets one put images anywhere on the page, even into a theme header?
Sorry to ask so many questions, but hopefully the answers to these questions will be helpful to others as well.
Thanks for the great tutorial! I’m dying to know about how Denise got her icons horizontal… ??
@Becca To make your links horizontal, just make them one paragraph
link link link or you can make them like this with the line separator link | link | link
Cheers!
dang, no html code allowed… – p align center – link link link – / p -
thanks for the article
Hi Don,
Firstly, thanks for the great info on your site, by far the most informative for a numbat like me..hehe
I have followed your tutorial as per the video and saved the 4 x images into the media library and entered the code into the text widget. The links on the blog do work but the images don’t.
http://billatkinson1.wordpress.com/
How do I fix this please? Thanking you in advance
@Kit, @recipe, @becca, @furqon – thanks!
@jon – thank you for sharing your tips
@Suzanne – How are you inserting the images? Are you doing this in the WordPress post editor, on in the WordPress media gallery? As for resizing the images, you can do that in the WordPress post editor now so you shouldn’t need an external tool to do that any more.
@Bill – Double check your image URLs. In the section of this blog post called “A Note on the Images” it shows you how to make sure your image URLs are “absolute” rather than relative. That will fix the problem you are seeing.
Very useful.
It works !
Thanks
YOU ARE THE MAN!!!!
Thank You
Great tutorial video. I have followed your instructions and the place holders appear in the right place on my website but no images. I have uploaded to Media to Wordpress 3.0.1 and attached them but still nothing. Can you please advise? Thanks
Thanks so much for the code! Here is the link: http://lysa-savvyandsocial.com/?p=1
Lysa Saavedra
Hi Don – this was great, I’m an absolute beginner and today was the first time I tried doing something like this. 2 questions if you don’t mind:
My icons take up a bunch of real estate, how can I close the gap between them or may them horizontal? Unlike Denise, I wouldn’t be able to figure this out.
I can’t find the RSS Link widget so people can be automatically updated? I’ve followed the WP help menu and it’s not there.
Thanks again for a great tutorial.
Regards
Justin
Hi Justin,
For your icons, it depends on the graphic images but the first thing to try is to adjust the margins. You’ll need to see what styles are affecting your images. Or add a style like:
margin-top:0px; margin-bottom:0px;and adjust as necessary.To find your RSS feed, if you are using WordPress then it is just your blogname/feed. Here’s the full details: Finding your Feed URL.
ok..still not understanding exactly how this works I pasted this into the code and was able to get the twitter icon to show up. Are you saying that I just need to change the code for all the others using this same code up to the /facebook_link.gif part of the code.
For instance
Changes to
Never mind…LOL I got it now…working just like you said it would…my cut and paste got out of control there!
Great resource thanks.
Q: What if you do not have an account with all of the SM sites? Sure you will want to go to the page you have set up for your business but is there a way to go to the Vistors SM account so they can post your url to their profile/account page?
Like when I go to Facebook it goes straight to my profile page. I can add the site myself or post about it.
Do you understand my logic here?
Hi Kent Web Designer,
Yes, if you don’t have a social media account, then you can just omit the images for the ones you don’t have. The functionality you are talking about is more like a “Like” button or “Share” button that you can add – like I add to my posts. That way if the user Likes it they can share it on their Facebook activity stream. I’ve got a post showing how to set that up here: Pimp Your Blog with Facebook Social Plugins.
Thank you so very much!! Took me alll day, but when I figured it out, I felt like I could do back flips!! Thnx a million!
Exactly what I was looking for. Thanks!
Is there a Linked In icon that can be used? I saw it on another of your clients sites in the portfolio. Thank
George,
The Linkedin icon is in this blog post above. Just right click on it to save it and upload it to your site. This video shows you how to upload your own image into WordPress: Add an Image to WordPress.
Excellent, thanks!
Just a mention that for me I needed to change the code from ./wp-content to ../wp-content and then the images appeared in my sidebar using this code. My wp install is in the root. Thanks.
Hey Don,
Am I correct in assuming I cannot have both an opt in box and the social media widget beneath it on the sidebar. I’ve been playing with it for a while, tried every which way but loose:) to no avail. I come up with one or the other but not both. Thanks
Hi Roger,
You can have as many widgets as you want in the sidebar. I think what is happening, is that the default social media icons you see in the sidebar are just an example. When you add a new widget, they disappear. You’ll want to add your own, with links to your social media sites.
In the latest version of SmallBiz, you’ll see a widget that you can just drag over and you’re done. If you are not using the latest version, or are using a different theme, you can follow the instructions in this post above to create your own customized widget.
Hey I’m a newbie just stop by to learn from those who are doing it. I will implement these into my blog thanks a lot.
Very nice explanation on how to do this! You saved me a lot of time and frustration. I’ll be checking out the rest of your siteThanks Don!
Dude, your the man! I don’t know anything about programming or code, but I got it all to work just dandy! thanks!
Hey Don,
I am currently putting together my wordpress site and I am trying to figure out how to place the social media icons horizontally in the sidebar. I saw another person explain that, but I really couldn’t make sense of it since I am so new to this stuff. Any help would be greatly appreciated. Thanks!
-Eric
Nice guide man. Remember guys, you’ll increase the CTR (click through rate) on your social media icons if you select an appropriate color / size that best fits your website.
Hey,
It was nice to have a video tutorial on my topic.
Thanks
How can I add social media buttons slidebar to my webpage?
Just wanted to say hi and thanks for the guide and the widget icons!
Mech
Thanks Don, That’s a great resource to learn how to add those useful buttons on your blog.
Great tips! Thanks
Had problems to start with. I added the Text widget but no images appeared in the side bar.
So I saved the images to my media in wp. Then copied and pasted the file url from the media and it worked!!! I cant tell you how pleased I am >:O)
Thank you very much, great advice.
Keep up the great work.
Hi,
great work, thanks so much. this is great and i will certainly recommend your theme in the future.
how did you make the images or wwere did you get them from? i am trying to have similar icons for my seekingalpha.com profile as well as fool.com profiles. and even a skype profile? how could i get these images the same as the facebook twitter etc. willing to pay a small fee! thanks so much
Hi, Thank you very much for the instructional video to put Facebook on my webpage. Everything seems to do well and I even put in the alternate line for the Facebook icon since I am not using your program but am using WordPress.
And I put the Facebook icon of yours on my desktop and I, of course, have completed the widget with the alternate line you suggested.
Now I try to download the Facebook icon from the desktop to the Media and get the message “error saving media attachment.”
Would you please send me list of possible errors I am making?
Jerry
I followed your instructions and it worked!! Thanks a lot..
Next Comments →
{ 1 trackback }