You’re a web-savvy type. You’re on Twitter, Facebook, and possibly some other social networking sites. But when it comes to linking your social media profiles to your WordPress site, it’s only natural that you be a bit perplexed.
How should you link to that stuff? Where do you put the links? And where do you get social media icons that actually fit with the feel of your site?
Well, I’m about to lay it all out for you. Here’s how to solve your social media icon problem once and for all – whether you want to play it fast and easy or go the custom route.
Option 1: Fast and easy
Meet Social Media Widget. It’s a WordPress plugin that lets you add bright, happy-looking social media icons to your site in about 2 minutes. Here it is in action on my friend Jackson’s site for his PR and communications consulting biz:
Social Media Widget is great because it automatically uses the most recognizable forms of all the social media icons, which makes it super easy for people to follow/friend you when they arrive on your site.
You can put your icons anywhere in your sidebar (at the top, at the bottom, or somewhere in the middle) by dragging the widget around, and it’s a cinch to configure.
Here’s how to DIY this:
1. Log into WordPress and click “Add New” under “Plugins” in your left-hand menu, near the bottom of the page.
2. In the search box, type “Social Media Widget” (with the quotation marks) and click “Search Plugins”.
3. Click the “Install now” button, and click “OK” when it asks you if you’re sure you want to install the plugin. Click “activate plugin”.
4. Under “Appearance” in your left-hand menu, click “Widgets”. Somewhere under “Available Widgets”, you’ll see “Social Media Widget”. Drag it over to your sidebar area on the right side of the screen.
5. The widget settings will automatically open. Choose the settings you want and fill in the URLs for the addresses of your social media pages/feeds/whatever. Then click the little blue “Save” button at the bottom right.
6. Check out your site and admire your shiny new social media icons!
Option 2: The custom route
If you’d rather not go standard with your social media icons, you’re in luck. I’m going to to tell you where to find icons you love and how to put them in place on your site – so you can avoid the cookie-cutter look.
The site I designed for Melinda Lane is an example of how great custom social media icons can look when they really fit the aesthetic of the site:
Here’s how to DIY this:
1. Decide what style of social media icons you want. Let’s say you’re looking for something with a hand-drawn style, or perhaps you absolutely need them to be forest green.
2. Google it up! Do a search for “hand drawn social media icons” or “forest green social media icons”. You’ll likely be amazed at how many options come up! Or, check out Smashing Magazine for oodles of lovely options. Once you’ve found a set of icons you like, make sure they don’t have restricted usage (the site you get them from will tell you if they do). Then, download them. Usually, social media icons will come bundled in a zip file. That’s the file you want to save to your computer.
3. Unzip the zip file using an unzipping program and check out your fancy new icons! If you’re happy with them, the next step is to upload them to your web server. This isn’t as scary as it sounds; in fact, you can do it directly through WordPress’ friendly interface.
- To upload your icons, click “Media” in your left-hand menu when logged into WordPress and then click “Add New” below that.
- Click the “Select Files” button to choose your first social media icon from your computer.
- Now, make note of the “File URL” you’re given at the bottom of the screen. It should look something like this:
- Click “Save All Changes”, and the image is officially uploaded to your site. Repeat this uploading process for all the social media icons you plan to use.
4. Next, you need to put your social media icons in your sidebar with some HTML and CSS code.
- Click “Widgets” under “Appearance” in your left-hand WordPress menu, and drag a “Text” widget over to your sidebar area on the right side of the page.
- Give the widget a title of “Follow Me” or something similar.
- Copy this chunk of code, and paste it into the big box under your widget title:
<div><div style="float:left; padding-right:10px;"><a href="http://yourlinktoyourfacebookpageorprofilehere" target="_blank"><img src="http://yourlinktoyourfacebookiconhere" border="0"></a></div><div style="float:left; padding-right:10px;"><a href="http://yourlinktoyourtwitterpagehere" target="_blank"><img src="http://yourlinktoyourtwittericonhere" border="0"></a></div><div style="clear:both;"></div><div style="float:left; padding-right:10px;"><a href="http://yourlinktoanothersocialmediasitehere" target="_blank"><img src="http://yourlinktoanothericonhere" border="0"></a></div></div><div style="float:left;"><a href="http://yourlinktoanothersocialmediasitehere" target="_blank"><img src="http://yourlinktoanothericonhere" border="0"></a></div></div><div style="clear:both;"></div>
* Note: this code gives you four social media icons, in two rows of two icons each.
- Scan through the code and plug in the URLs for your social media pages and the URLs for your social media icons (which you got in step 3 above).
- When you’re done, make sure the “automatically add paragraphs” box is unticked, and click the little blue “Save” button. (The “automatically add paragraphs” box could interfere with the code, so that’s why you’re leaving it unticked).
5. Check out your site to see the fruits of your labor! You should see something like this:
(A little experiment I did using these icons).
Hope this web training tidbit dispelled some of the confusion surrounding social media icons and how to add them to your WordPress site!