WordPress.com’s functionality is awesome for getting a blog up and running quickly, but sometimes simply displaying a row of social media icons on your site can be a challenge. My free theme, Fresh & Clean (now retired), didn’t include any icon placements that i could take advantage of, beyond using the default Twitter feed and Facebook Like Box widgets. Here’s how you can get around this and create a selection of icons customized for your personal social media presence. (This post is directed towards WordPress.com users, as WordPress.org users have access to a multitude of plugins to serve this purpose. However, the method outlined in step #3 below could also be implemented on your WP.org site if you’re feeling frisky.)
The 3 Best Methods
- Use an appropriate theme.
The easiest way to implement social media icons is to find a theme, such as Grisaille, that already features them as an option. Just access the theme’s appearance settings and insert the appropriate links to your Facebook, Twitter, etc. The cons? You are limited to the social media buttons offered by that particular theme. Paid themes will usually offer more options than the free ones, but our goal here is to implement this cost-free.
- Use the About.me widget.
The About.me widget allows you to place your About.me profile information, including photo, bio, and links to your social profiles, into your theme’s widgeted sidebar or footer areas. This can create a nice little ‘about the author’ box in your sidebar. This Widgets 301 post has more information about configuring your About.me widget. The cons? It’s one more online profile you need to create in order to make this happen.
- Use the text widget.
The text widget is the option that we’ll concentrate on for the rest of this post, as it allows you the highest level of customization. With a little elbow grease, some free social media icons, and some basic HTML, you can completely customize the selection, size, order, and placement of your icons. We’ll address the code necessary to make this happen in the following sections.
The approach here is to upload the desired icons to your site’s media library, insert the selected icon images into the text widget, then link the images to your social media sites.
The Social Media Icons
There are many sets of free social media icons available for download and subsequent upload to your media library. Here are 40 funky sets of free icons you can choose from to get started. I used the Elegant Themes social media icon set, featuring 42 of the most popular social icons, available for download as 64 pixel x 64 pixel square icons in PNG and PSD file formats.
[Update: Here are 2 more collections of fantastic free icons you can choose from. These 23 icon sets contain stylized, artistic, & retro designs, while these 35 sets feature attractive flat, minimal icons.]
The approach here is to upload the desired icons to your site’s media library, insert the selected icon images into the text widget using the <img> tag, then link the images to your social media sites using the <a> tag. Using this method, you can upload only the icons you want and place them in any order.
Once you’ve downloaded the icons, use the Media > Add New menu option to upload the icons you want to display. Select the first icon from your media library and copy it’s file URL from the upper right side of the screen. This is what we’ll use in the next section to place the icon into the text widget.
The Simple Code
All we need to make this happen is the file URL of the icon (img src=”…….”) that we copied above, and the link (a href=”…….”) that the icon will send users to when clicked – your Twitter page, Facebook profile, etc.
This graphic shows the contents of my text widget used to display my Twitter, Facebook, other WordPress blog, and LinkedIn icons on this site at the top of my sidebar. The title text, if entered, will appear above your icons.
You can copy and paste the following code into the body of your text widget to display each of your icons. All you’ll need to do then is replace the first URL with the link to your social media page, and the second one with the file URL of your icon from your media library.
<a href="https://twitter.com/yourtwitteraccount"><img src="http://yourwpsite.files.wordpress.com/2013/05/icon-twitter.png" /></a>
Repeat this chunk of code for as many icons as you’d like to display (you can see the code repeated 4 times in my example graphic above), changing the links accordingly.
And you’re done! Access to your full social media presence now awaits your loyal readers.
Tweaking the Code
Here are a couple of extra tweaks you can add to the code afterwards to further customize your icons.
- Opening your link in a new browser window.
Add target=”_blank” into the code right after the a href=”…” link (as i did in my text widget example graphic above) to pop your link open in a new window. Leaving this code out will open the link in your current browser window.
- Resize your icons.
Add height=”40px” width=”40px” into the code right after the img src=”…” link. Raise or lower the pixel dimensions to display icons larger or smaller than the default size provided. For reference, my social media icons are displaying at 50 pixels square, including a bit of white space.
- Check the comments! [update]
There are several additional alignment suggestions in the comments section below. Note that icons should align horizontally by default, provided your widget area is wide enough to allow it, but a few more solutions to the dreaded ‘vertical alignment’ issue are offered up here.