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 so, please join over 10,000 people who receive exclusive weekly online business and blogging tips, and get a FREE COPY of my eBook, 10 Steps to Free Website Traffic! Just enter your name and email below:
Article by » Don Campbell
Don is an entrepreneur based in Silicon Valley. He founded Expand2Web and is the publisher of the Expand2Web Blog and the SmallBiz WordPress Theme.
Don has written 247 articles on Expand2Web
Author Connect » Twitter | +Don Campbell | Facebook |
If you're building a business website these days, you're in luck.
WordPress has revolutionized the ease and power of what a website can do and be. Now you can quickly create a website that is optimized for top search results, and update it yourself whenever you want.
As you'll see in a moment, the SmallBiz Theme is much more than a mere WordPress theme. It's a complete solution for your business web presence including a Website, Blog, Facebook Page and Mobile Website.
Let's take a look at each of these, and how they help you generate new business from the web…
Click to continue...See my disclosure about advertising and affiliate links
{ 92 comments… read them below or add one }
← Previous Comments
Thank you so much for your help, I very much appreciate it!
I have added the icons successfully using my own pictures. The only problem is that they wont move next to each other. I have tried to change the position but it doesnt seem to work. Any ideas?
Many thanks.
Awesome post!! very helpful, thanks so much.
I found your tutorial site after I already purchased another theme. (darn) I am attempting to add these social media buttons, but even after I saved the gif images to my media section, I don’t seem to know how to connect them. Can you help? Thanks
Hi Rebecca,
After you’ve uploaded the images to your media library in WordPress, all you have to do is get the direct URL to the image. This video shows you how to do that: How to add an image to your WordPress sidebar.
Thanks for the previous help. Now can you explain why the twitter, facebook pics are only showing up on the home page? The other pages have the connect with us part and then broken images…
Sure Rebecca. Make sure to read the last part of this post and reference your images with absolute URLs rather than relative URLs. That should fix the problem you are seeing.
I am using the Social media icons you provided for facebook, twitter, and linkedin on my webpage. Where can I find similar styles for stumbleupon?
There are so many icons on the internet…I wanted to keep the same theme as the social media icons you provided at:
http://www.expand2web.com/blog/add-social-media-icons-wordpress-website/
Nice post, works great have a look at my site trying to find google + image same style.
Hi,
Thank you so much for your awesome instructions. All have been very helpful. Yet, I do have one problem. The facebook widget that I added was successful except the image is blank vs ‘view my profile on facebook’. I’ve tried suggestions with in your guide to fix it, yet unsuccessful. Pls do help.
with much gratitude,
Breezy
Hi, I am in the process of building a new website with WP and have tried to use your Social Media Icons code but am a bit confused at what I should replace the following code with:
class=”frame” alt=”Expand2Web Twitter Feed”
the full code is:
but it does not display correctly although it does link correctly.
Thanks
THANK YOU THANK YOU SO MUCH FOR YOUR EASY TO FOLLOW TUTORIAL!!!! I pretty much know nothing about coding etc… I have been trying literally for weeks to get this accomplished and have been so frustrated! thank you!! I was even able to upload my own picture to use for the links with your easy follow directions.
Outstanding stuff!
I would maybe like to have my icons outside a widget, but more in the menu bar etc, is that possible with this one or do you know any plugin’s I could use for that ?
Best Regards
Sarah
Thanks for the instructions. I followed them and they worked! I substituted in my own graphic.
Hey Blake,
How do you substitute in your own graphic?
- Kyle
Hey There,
I am curious how I may add a different image in lieu of the images in the code?
Thanks,
- Kyle
Nevermind, I didn’t see the bottom of the post….Thanks!
Your video tutorial is very clear and easy to follow. Great work, thank you. Although this wasn’t exactly what I was looking for, you have done such good work, I wanted to leave a comment!
Hi…
I don’t know if this is a dumb question but it seems there is no graphic for linkedin?
Update: OK I made my own, which improved my learning. Got it. Thank you! Great tutorial.
Great info! Only took me 15min to add this to my site. Thanks for the help.
Wow, this was incredibly helpful…thanks so much!!
Thanks for this valuable video tutorial! I followed your direction on the video and pasted the codes into my Wordpress Widget. I also uploaded the icons in media on word press but now here is what was not mentioned in your manual. HOW DO I LINK THE ICONS FROM MY WORDPRESS MEDIA SECTION TO MY LINKS IN THE WIDGET? My wedgets has been added on my home page but I need to attach the icons so they can be visible for people to click on. Could you please advice? THANK YOU!!!!
Joseph, to make your images links to your social profiles, you need to update the href= section with your URL like I describe in the post above
Hi Don,
Thank you so much for this valuable info and direction. I can’t believe I was able to use your tutorial to actually add my social media links to my wordpress site. Here is the problem, when I click on the links they won’t work. they worked the first time I installed them but now when I click on the icons nothing happens. Can you give me so advice of how to fix the problem please?
here is my site: http://josephvassallo.wordpress.com
Thanks!
Joseph
Great instructions up until the bit where you add in the social media icons, at which point there wasn’t enough detail. I’ve added the icons into my media library, but how do I make them appear in the sidebar?
Thanks
Go to Appearance – Widgets and drag the Text Widget to your sidebar. Then you can add the code I give you into the text widget, along with the URL to your new social media icons. Then it will show up in your sidebar.
Thanks for the reply Don. Yes I tried that, but still couldn’t make it work, probably because I didn’t know quite where to put the URL for the icons. Here’s the best I could do:
I tried something different and came up with
but is still didn’t work, and when I went back into the widget code, it had reverted back to the previous one.
So the links on my website work, but there still aren’t any icons. I’m using twentyeleven theme if that matter
Cheers
For the some reason the cut and pasted text hasn’t appeared. I’ll try again:
Here it is with the symbols removed at either end:
p align=”center”></p
Is there some trick to posting the code?
Wait – I got it working! Thanks for your help!!
Many thanks for you.
It’s work very nice
Oh, you help me a lot. Thank you
Hi Don,
I am in the process of creating a website for my friend for his business, I am currently building the site offline, however it will be hosted online shortly, I have purchased the domain for the site with 123 reg, just to prove that I am contacting you for a legit reason. I followed your tutorial, which was ace it works, however I have noticed, that the images for facebook and twitter(the only two I am using), only show on the home page and not on any of the others, the links work, but it shows a logo type think as if it cannot find the image. Any ideas?
Hi Stefan,
It might have something to do with the way you are building the site offline. Are you using WAMP on a Windows PC or MAMP on a Mac? Sometimes if you don’t have your paths set up correctly there can be problems with relative paths…
That’s why I don’t recommend building a site offline – just build it in a sub folder online, and turn off indexing in WordPress. It’s much easier then trying to replicate everything offline.
Then you can move WordPress to the live location once you are ready.
Hi,
I followed your instructions, but nothing is happening??
Kind Regards
Mel
← Previous Comments
{ 2 trackbacks }