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:
In this video I’m using version 1.5 of the Expand2Web SmallBiz WordPress Theme, which comes with a default sidebar with social media icons for Twitter, YouTube and Facebook. I show you how to replace this default sidebar with one that links to your own social media profiles.
Note: 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!
{ 21 comments… read them below or add one }
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
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.