I browse through the blogosphere regularly, and it’s interesting to note how many webmasters have a section dedicated to the social networking. Whether it’s helping you find them on Facebook or Last.fm, or allowing you to share a particular page/post on Digg or Slashdot, the idea of social networking is a must for bloggers who want to effectively link themselves with the rest of the world.
Sociable, a very popular plugin for WordPress, allows you to select from a list of popular social networking sites you wish to display on your blog. The plugin automatically generates the proper icons and links to submit a post/page from your blog to the site. The problem is when users want to display more than one site. Each site contributes one additional HTTP request (to download the icon associated with the site). For example, to to display Facebook, Slashdot, Digg, StumbleUpon, and Reddit, you’re adding five additional HTTP requests to your site’s overhead. Yuck. 😐
This dilemma can easily be resolved using an image map. An image map is essentially a single image which has different “zones” which can link to different sites. For example, RK.md’s site header is a single image which has zones for my RSS feed and Twitter page linking to their respective sites. A quick Google search will inform you more about image maps.
In the context of social bookmarking, using your favorite image editor (like Adobe Photoshop), download the Sociable plugin, go under the “images” folder, and select which social networks you’d like to use. Create an image (a transparent background will probably be a good idea) which is 25 pixels in height and ~300 pixels in width. The width will have to be adjusted based on the number of icons you intend to use. On my site, a width of 191 pixels was sufficient to house nine social bookmark icons.
Piece the images together side by side leaving a few pixels between each icon. Save the image (I use the .png format) and upload it to your site. Navigate a web browser to maschek.hu’s Online Image Map Editor, enter the URL of the image map in the “An image on the Internet” field, and select “Accept.” Your image will now be displayed in a box.
Using your mouse, you’ll drag and drop rectangular boxes onto each icon in your image map. This process is creating the “zones” you’ll need in a later step. For now, fill the name of the site (ie, Facebook, Digg, etc.) in the Href field. It takes some time, so play around until you get the boxes just right. Once you’re finished, click the “Code” button at the bottom and copy the resulting text into a text editor.
FTP into your site and open the index.php or home.php file (or whichever file codes for the posts/pages display) in your theme folder. Wherever you intend to add the image map, add this line:Share This Post:
$permalink = get_permalink($post->ID);
$title = get_the_title($post->ID);
?>
The code above is assigning the permalink of the the current post/page to the “$permalink” variable and the title to the “$title” variable. Now open the sociable.php file located in the plugin you downloaded earlier. Scroll down until you start seeing all the social bookmark listings around line 40. Locate the relevant sections of code based on which icons you used in your image map. Go back to your text editor which is holding the code generated by the website where you created your image map. Replace your href fields with the ‘url’ fields from the sociable.php file for each site. For example, for your Facebook icon, change
href="facebook"
tohref="https://www.facebook.com/share.php?u=PERMALINK&t=TITLE"
Now go back through your edited list of code. For each instance of “PERMALINK”, replace it with:
For each instance of “TITLE”, replace it with:
For example, now your Facebook code should be the following:
href="https://www.facebook.com/share.php?u=&t="
Perform this replacement for all your icons’ href parameters.
Finally, add your finalized image map code below the code you added to your index.php or home.php earlier. Then add a link to your actual image and tell it to use the image map you created. Here’s some sample code:
Notice how the name of the image map is identical to the “usemap” parameter of the image (“imgmap200952015830”).
Whew. Now you’re done. 😀 With a little bit of styling and some playing around, you’ll be able to perfect this technique to save your visitors a lot of HTTP requests and still be able to broadcast your site’s content to whichever social networking sites you want.
