Edward Antrobus

Personal Finance Contrarian - Money Rants & Frugal Musings

Social Media Widget Plugin and Specifing Image Dimensions

facebook (Photo credit: sitmonkeysupreme)

Social media is one of the most important tools in your blogging arsenal. I don’t do spend anywhere near enough time on it. But there are two absolutely critical things you must do with social media on your blog. 1)Make it easy for others to share your posts and 2)Make it easy for others to connect with you.

I’ve been using Sharaholic for the sharing side of things pretty much from day one. It does what I need it to and does it pretty well. But the connecting was more elusive for me.

At first, I had a stack of HTML widgets where I entered code for different services. The Twitter button. The Facebook Like Box. RSS. It was all a bit clunky. So I decided to go with an all-in-one plugin. The plugin I decided on, based on ratings and usability was the Social Media Widget plugin for WordPress.

There was only one problem. It was actually lowering my PageSpeed score. Deep in all of the myriad things I need to work on to optimize my page loading time was “specify image dimensions” for the icons displayed by the plugin.

Fixing it was actually pretty straight-forward. I’ve submitted the needed code to the developer, but for now it is not included. If you would like to use this plugin and utilize my fix, simply follow the directions below (note: this assumes that you have already installed the plugin). There is a fair amount of cut & pasting, but don’t feel intimidated by working with the code. Worst case scenario is simply deleting the plugin and starting over.

  1. In the WordPress Dashboard, click on Plugins -> Installed Plugins.
  2. Find “Social Media Widget” in the list of installed plugins and click “edit”
  3. The “Edit Plugins” page will load and will load the social-media-widget/social-media-widget.php file. Do a search for: // Facebook
  4. Underneath that you will find a block of code that says:
    if ( $facebook != '' && $facebook != ' ' && file_exists($smw_dir.'/facebook.png')) {
    ?><a href="<?php echo $facebook; ?>" <?php echo $nofollow; ?> <?php echo $newtab; ?>><img src="<?php echo $smw_path; ?>/facebook.png" alt="<?php echo $imgcaption; ?> Facebook" title="<?php echo $imgcaption ?> Facebook" <?php if($animation == 'fade' || $animation == 'combo') { ?> style="opacity: <?php echo $icon_opacity; ?>; -moz-opacity: <?php echo $icon_opacity;?>;" <?php } ?>class="<?php echo $animation; ?>" /></a><?php
  5. Add this code just before the /></a><?php at the end:
    width="<?php echo $icon_size; ?>" height="<?php echo $icon_size; ?>"
  6. Repeat this step for each of the services in the plugin. These are listed one after another, so they are easy to find.
  7. Save the plugin and you are done!
Related articles

Related Posts: