My latest client wanted to have some RSS feed buttons in a sidebar of their company blog. Turns out, chicklets come in all shapes and sizes and they wanted everything to line up in a nice little grid. What to do?
Step 1. Get your chicklets
I found two good places to get feed chicklets. The client had a
Feedburner account, so I signed in, and went to the feed I wanted to connect the chicklets to and then clicked on Publicize > Chicklet Chooser. Then, it was simply a matter of selecting the Feed Reader icons that I wanted to use and copying and pasting the code into a text file.
Another method for grabbing chicklets is to try
Top Rank's chicklet chooser service. It offers a slightly different range of chicklets and helps you cover the bases.
Step 2. Put the chicklets on your blog.
The Wordpress blog I was working with had a widgetized right sidebar so I took all the various chicklet code snippets and added them into a widget, then wrapped them in a Div entitled "Chicklets". (Jenn Tip: Tables only work in certain browsers, Safari freaks out over tables and CSS mixing)
Then, since the chicklets were going to be in 2 columns, I created two divs inside the first one. Chickletsleft and Chickletsright. Then, it was simply a matter of assigning floats, widths and text-align.
Step 3. Customize your chicklets
Take a look at your blog and see how the chicklets look. Most chicklets are 16-17 pixels high, but the width can vary by 10 pixels or more. If you look at the code for each chicklet you will notice that some actually contain the image dimensions in the img src tag and you can change the width there. This works if you are only shortening it by about 3 pixels or so. Some chicklet code snippets only give you the image and no way to manipulate the size. Never fear, you can substitute your own custom-sized chicklet! Simply take a screenshot of the chicklet you need to resize and then create a new file in your image-editing program that is the "standard" size you want. In my case, 90 by 17 pixels worked. Then, copy and paste the screenshot of the chicklet into the new image file and save it. Now, you can modify it to your heart's content and then upload the optimized jpg, gif or png to your web site's images folder.
Step 4. Upload your custom chicklet
Using your FTP program, upload the image to your website in the images directory. If you have lots of images, you may find it worth your while to create a sub-directory called Chicklets.
Step 5. Customize your code snippet.
Now, all you need to do is replace the current img src file path with one that points to the custom chicklet image on your server.
For example:
img src="http://buttons.googlesyndication.com/fusion/add.gif"
would become:
img src="http://jennmearswebdesign.com/wp-content/themes/anubis folder/images/chicklets/googlebutton.gif"
There you go. Pixel-precision control over your chicklets!
(if only the rest of my job were this easy)
Wordpress Chicklet Hack!
