WordPress Plugin: Social Media Widget

The Social Media Widget adds a set of buttons to the sidebar of your WordPress site to allow visitors to connect to you through a variety of social-media sites. The latest version of the plugin (2.4.1) comes loaded with icons for more than 30 sites, including all of the most popular ones, plus icons for your site’s RSS feed and e‑mail subscription link. The developer, Brian Freytag, has maintained the plugin in very active development recently, with each update adding a few more resources. It also includes three slots in which you can insert custom links with icons that you supply yourself.

The plugin comes with three sizes of icon sets—16, 32, and 64 pixels—in four styles: default (plain, clean designs that match the standard identities of the referenced sites), sketch (more playful, hand-drawn-looking versions), heart (just what it sounds like), and my least-favorite, cutout (which looks like you’re viewing the icon through a hole torn in a piece of paper). It also offers several animation effects and an option to control the opacity of the default state of the icon; the plugin displays each icon at full opacity when the visitor hovers over it. (View an example at my portal site, EFGumnick.com.)

You can replace the provided images with icons of your own design, or any of the hundreds of free icon sets available online. But beware that you’ll need to back up your custom icons before and restore them after each automatic update of the plugin. (I’ve suggested to Brian that he build in a “custom” folder that will be ignored by upgrades, and he’s pledged to include this feature in a future version.)

Update on 8/11/10: Brian made good on his pledge, and Social Media Widget now includes a menu option for a custom icon set. Create your own icon images, following the same naming scheme as the provided sets. Upload them to the folder corresponding to the size you’re using, and future upgrades will leave them alone. The plugin will ignore any missing or mismatched icons, so if an item fails to display, make sure the image file is named correctly and placed in the appropriate folder.

The Social Media Widget produces HTML that’s nicely marked-up for customization with Cascading Style Sheets (CSS). On the EFGumnick.com site, for example, I’ve used CSS to float the icons over the header area, reduce their size to something in between the 16- and 32-pixel sizes, space them closer together than the default behavior, and hide the “Find me” headline.

To install and use the plugin, follow these steps:

1. Log in to your WordPress account. From the Dashboard, select the Plugins menu, then Add New.
2. Type social media widget into the search box. As of this writing, the plugin I’m discussing is the first result, but you can confirm that you’ve found the correct one by looking for Brian Freytag’s byline at the bottom of the description. Click the Install link at the top right, then click the big red button at the top right of the installation pop-up window.
3. When you see the “successfully installed” message, click the link to activate the plugin.
4. From the main menu, choose Appearance > Widgets. You’ll now find Social Media Widget in the Available Widgets area of the page. Drag it into one of the sidebars or content areas on the right side of the page. It should pop open to show all of the available options.
5. Populate as many of the fields as you’d like to use with the URLs of your social-media pages and profiles. Empty the boxes for any sites you don’t plan to use.
6. You can leave the widget open while you preview the icons on your site in another browser window. Click the Save button at the bottom right from time to time.
7. Optional: Customize your site’s style sheets to adjust the appearance of the icons and their heading. Below you’ll see the code I used to customize the display of the social-media icons on EFGumnick.com. (Note: The numeral in the ID selector for the widget will vary depending on how many instances of the widget you’ve installed. Search the HTML source code of your site for the phrase social-widget-, and make your custom CSS match the ID that’s in use on your site.)

/* Reposition Social Media Widget in the header */
div#social-widget-3 {      <=== Check your site’s HTML
position: absolute;             to confirm this numeral.
top: 25px;
left: 575px;
width: 325px;
}

/* Hide heading of Social Media Widget */
div#social-widget-3 div.widget-title {
visibility: hidden;
height: 0;
}

/* Tighten space between icons in Social Media Widget */
.socialmedia-buttons img {
margin-left: -3px;
}

/* Resize Social Media Widget buttons */
img.combo {
width: 28px;
}

Give it a try, and call me at 713‑562‑1813, send e‑mail, or leave a comment below if you need help.