Creating a Set of Share Links

When redesigning my theme, I wanted to include a standard set of “share” links (or “social links” or “story tools”) for the posts and pages, featuring the usual print, email, rss and social-bookmarking links. Many people use the Sociable and ShareThis plugins for all of these, but I wanted to have a structure with separate links for each.

This article is a walk-through of creating two styles of “share” links, an inline set of links and a box (that also contains my tags).

Preparation and Plugin Configuration

Before starting to play with CSS, I needed to make sure I had the appropriate functionality via standard WordPress features and plugins to support the E-mail, Print, RSS and Share options. In the end I installed:

• E-mail: WP-EMail by Lester ‘GaMerZ’ Chan.
• Print: WP-Print by Lester ‘GaMerZ’ Chan.
• Share: ShareThis by ShareThis.
• RSS: use the standard link with an icon
• PDF: I didn’t find a suitable standalone function.

There was some plugin configuration required to achieve the link look I wanted; a single 16×16 icon followed by linkable text. The plugin configuration settings, where non-standard, are described below.

WP-Email Configuration

The two changes to the WP-Email configuration are:

1. Select the email_famfamfam.png icon as the E-Mail Icon which sits inline better, and
2. Changed the E-Mail Text Link Style to Custom and set the link code.

The updated options page is shown below.

However in the end I did not use the icon setting on this page; the custom link setting used a background icon image (see below).

WP-Print Configuration

The WP-Print configuration changes were similar to WP-Email; icon and custom link settings.

As with the email icon, it wasn’t used in the final code. I used a custom link referring to a class which used a background image.

ShareThis Configuration

The ShareThis plugin uses some Javascript generated on the ShareThis website, which is plugged into the options page. I don’t know if it’s a bug but once you save the javascript, the field on the page goes blank so you can’t see it or modify it later. I expect it’s saved somewhere, but I haven’t been able to find it yet.

In the end I had to use some CSS class overrides for the ShareThis display (see below).

Now that I’d setup the plugins, I could start playing with layouts; first a single line of links and second with columnar links. These are shown on the following pages.

Continue reading... go to page: 1 2 3