Community & Conversation » WordPress

WordPress Plugin: Social Media Widget

Edward F. Gumnick — Thu, 05 Aug 2010 17:17:20 +0000

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:

Log in to your WordPress account. From the Dashboard, select the Plugins menu, then Add New.
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.
When you see the “successfully installed” message, click the link to activate the plugin.
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.
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.
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.
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.

WordPress Plugin: List Category Posts

Edward F. Gumnick — Wed, 10 Mar 2010 13:00:44 +0000

List Category Posts is a WordPress plugin that allows you to list posts from a single category into a post or page using a specially constructed [catlist] shortcode. The shortcode contains the category name or ID number, the order in which you want the posts to display, the number of posts to display, and several other optional parameters. You can use as many instances of the [catlist] shortcode as you like with different arguments.

The Newsletter Article Archive on The Clutter Fairy web site is an example of the List Category Posts plugin at work. Here’s the shortcode:

[catlist name='Newsletter articles' orderby=date
order=desc date=yes excerpt=yes numberposts=-1]

Explanation: Display posts from the category “Newsletter articles.” Sort them in descending order by date. Show the date and an excerpt of the post. The numberposts=-1 parameter set the number of posts to display as unlimited.

Read more or download the List Category Post plugin from the plugin site.

WordPress: A Strong Foundation for Your Blog or Web Site

Edward F. Gumnick — Tue, 02 Mar 2010 16:30:08 +0000

WordPress is an open-source web application that was initially built for creating blogs. Through seven years of updates and the addition of static pages and loads of customization options, it’s grown into a small-scale content management system (CMS). It’s now the foundation for 200 million web sites.

You can use WordPress either of two ways: have your blog hosted for free at WordPress.com, subject to some limitations on storage space, bandwidth, and the amount of customization that you’re allowed, or you can download the free, open-source software and install it on your own web server. (You can also pay for premium features at WordPress.com.) I’m going to speak specifically about custom installations, because I haven’t experimented much with WordPress-hosted sites.

Installation requires PHP Hypertext Preprocessor and MySQL, as well as administrative access to your MySQL database, but these apps are included in most web hosting packages.

The power of WordPress comes from its huge community of developers. WordPress is open-source software, and it’s been designed to be extensible. Developers are constantly working to design themes and plugins. (“Themes” are packaged site designs; plugins add more functions to WordPress.) A huge community of users regularly beta-tests the software and suggests improvements. In recent versions, WordPress is even designed to update itself, as well as any properly designed plugins you’ve installed. The administrative interface offers prompts to let you know that an upgrade is available, and you only have to click a button to install it.

Once you’ve installed WordPress, you can download and install any of thousands of free themes that are available, or if you have some expertise in Cascading Style Sheets (CSS) and PHP, you can design your own. There are also a few themes that have been programmed to contain their own suites of customization options. (I’ve been very pleased with one called “Atahualpa,” which offers a panel of about 30 menus from which you can customize hundreds of details of your site’s design.) You can download many themes for free and install them manually, or use the “Add New Themes” tool within recent versions of WordPress to find and add themes to your site with a one‑click installation. There are also sites that sell themes, and lots of designers you can hire to create custom themes.

Here are some sites that I’ve designed and constructed (or assisted with) on the WordPress platform:

Contact me at 713-562-1813 or by e-mail if you’d like help setting up or using a WordPress blog or web site.

Don’t Let a Great Blog Post Idea Get Away

Edward F. Gumnick — Tue, 02 Mar 2010 04:23:17 +0000

Today I had the frustrating experience of sitting down to write a blog post about a web site that I’d visited recently, only to discover that I hadn’t bothered to bookmark the page. I probably assumed that I would have no trouble finding it again. I was mistaken.

I’ll track down that site again and write about it later. Meanwhile, I’ll tell you about a handy tool for WordPress blogs that can keep you from finding yourself in the predicament of wanting to write about a web page that you can’t find. It’s called Press This, and it’s part of the default installation of WordPress in at least the last few versions. Press This provides a simple mechanism for creating a draft blog post from any web page you’re visiting.

You’ll find Press This in the “Tools” section of the administrative area of your WordPress site. It’s a toolbar widget, a small snippet of code that you install by dragging the linked text (“Press This”) from the WordPress Tools page to the bookmark bar of your web browser—also called the “bookmark toolbar” or “favorites bar,” depending on which browser you’re using. You may be prompted to assign a name to the widget, or you can leave it as “Press This” or assign a name by editing it later.

For a simple way to create a draft blog post from any web page you visit, drag the “Press This” linked text to the bookmark bar of your browser.

Once the widget is installed, you can use it from any web page you visit. Click “Press This” in the bookmarks bar, and your browser will pop open a window with a draft WordPress post that contains a link to the web page you’re visiting. If you aren’t already logged into your WordPress site, you’ll be prompted to do so before you see the draft post. At this point, you have some options: write the post now, assign categories and tags, and hit publish; write a few notes to remind yourself why you plan to write about this page later; or just hit “Save draft.” The next time you visit the Dashboard of your WordPress site, you’ll find the draft article in your list of recent drafts as well as in the full list of posts.

If you like writing about things you find online, Press This is a nearly effortless way to collect ideas for blog posts. Give it a try!