Dana's Mixed Bag

As you may know, AddThis is a great way to add a social networking link to the end of each of your blog posts. There are many ways to implement AddThis for WordPress, but the published means only use the four stock button styles. Those styles are alright, but they feature del.icio.us, Digg, and Microsoft Live icons. It is 2009! Get with the program and update those icons, man!

In order to implement a custom AddThis button for a stand alone WordPress installation, one must download the AddThis plugin for WordPress, upload it to the plugins folder, and activate the plugin from WordPress’ dashboard..

You should see AddThis as an item in the Settings section in the left sidebar of the Dashboard. Select AddThis, and select “Use dropdown menu" and “Show on homepage”. Once you hit “Save Changes”, you should see an "AddThis” button appended to each of your posts. The order of sites shown in the pop-up hover window is determined by what is written in the “Drop-down options” entry in the AddThis Settings window. These must be in all lowercaps, and separated by commas. I set mine to “twitter, favorites, facebook, email, digg, friendfeed, delicious, myspace, stumbleupon, reddit, more” and have been happy. The stuff for common people shows in the left column while the geeky links are in the right.

So far we only have a stock button, though. Go make a 16-pixel tall button in your favorite graphics program, and save it as a .gif file. Then you’ll have to alter the addthis_social_widget.php file (which is found in your wp-content/plugins/addthis directory). Open the file (I had to download it and open it in Wordpad to edit it).

Find the “$addthis_styles” line, which is very close to the top of the file. The items in the group of lines following determine what options are offered in the “Button style” pull-down box in the AddThis Settings window. As the helpful comment says, you can add your own style by copying their sample line and editing the graphic location. You’ll also want to specify the width and height of your .gif file (so the browser doesn’t stretch it when rendering). Mine reads:

                      ‘plus’ => array(‘img’=>’sm-plus.gif’, ‘w’=>16,
‘h’=>16),

                      ‘customGGR’ => array
(‘img’=>’http://www.gogoraleigh.com/wp-content/themes/df_
3col_theme/images/share_button2.gif’, ‘w’=>125, ‘h’=>16)

                      /* Add your own style here, like this:
                        , ‘custom’ => array
(‘img’=>’http://example.com/button.gif’, ‘w’=>16, ‘h’=>16) */
                    );

Be careful that the syntax is consistent with the default entries (commas, apostrophes, etc). My graphic is 125 wide and 16 high, and lives at gogoraleigh in the images directory. You’ll need to upload your graphics file to the location you’ve specified, and you’ll need to replace your old addthis_social_widget.php file with the one that includes the new call for your custom button.

Return to the AddThis Settings page in the WordPress dashboard and refresh the page. The Button style pull-down should now include the custom button you’ve added. Select it, hit “Save Changes”, and refresh your view of your site. You should now see your AddThis graphic at the end of each post.

Tags: Tech // 1 Comment »