This is just the backstory behind my Pinterest gadget for Blogger. If you're looking for the gadget tutorial, it's here.
In these very exciting few days since I posted a Pinterest gadget for Blogspot blogs I've had the pleasure of seeing it in use on four great blogs I love: Oh Lovely Day, Kiss My Tulle (on Typepad!), The Uncrafter, and Budget Fairy Tale. It is so gratifying to find a solution for a problem of my own and see that solution work for others.
When I introduced the gadget, I mentioned that it was born after a lot of research, experimentation, and teeth-grinding. It was a major learning experience for me, and today I want to tell you a bit about the (occasionally very frustrating) process behind the gadget.
Earlier this year a crop of great Pinterest plugins came out for Wordpress (my favorite: Jodi Wilkinson's Pretty Pinterest Pins. It is, indeed, quite pretty). I was in the planning stages of Code it Pretty at the time, and was just about 100% decided on doing it as a Blogspot blog. Seeing "Pretty Pinterest Pins" was the kick in the rear that I needed to get going on a Pinterest gadget for Blogger. I decided to make it my weekend project for however many weekends it took me to get it done. I was figuring 1 - 2 weekends. It ended up taking 4, with one weekend of "frack this, this gadget is never happening" included.
Trying the Built-In Options
I follow some of my favorite Pinners in Google Reader, so I immediately knew I would want to use Pinterest RSS feeds for the gadget. I thought perhaps I could use Blogger's built-in RSS gadget, which sure would have made this whole endeavor very simple. Here's how that turned out:
Yeah, that sucked.
Next, I tried the built-in slideshow gadget, with even worse results -- nothing showed up at all. So, with none of the built-in gadgets doing what I wanted, I started looking around for different options.
I hadn't worked with RSS feeds in any kind of detail before this project. All I've done with them in the past is drop them into gadgets/widgets or subscribe to them in Google Reader. So, I wasn't familiar with Google's Feeds API and what it can do with RSS feeds. As it turns out, it can do quite a lot.
I used the Feed API's hosted "Code Playground" and tried to build a gadget there. The Code Playground is great, by the way. You can play around with code, get messy, then press one button and have it reset all sparkly clean.
I made some decent progress; the Feed API doesn't automatically show images but a helpful person in the API forum posted a snippet of code that made the thumbnails visible.
I noticed a little something weird about how the pictures were linked (more on that very soon), but I thought it was a quirk of the Code Playground and nothing to worry about. But, I wasn't entirely thrilled with how the gadget was turning out so I did some more looking around. Then I found something awesome.
The Instagram Gist
While Googling around for information about RSS feeds and the Google Feeds API, I came across Richard Mackney's brilliant Gist for displaying Instagram images on Posterous, written in jQuery. It looked like this was the perfect solution; it grabbed images from a feed neatly and it had easily-customized CSS. I was EXTREMELY excited about this find, and I thought my search was over.
But then I realized a horrible thing about the Pinterest RSS feeds.
That "little quirk" I'd noticed in the Code Playground was actually a real problem. In the Pinterest RSS, the href link from the image is a relative URL, like this:
So, when I placed my "presumed to be finished and looking really nice" first draft of the gadget on my blog and clicked on a Pin thumbnail, it linked to:
That is: a completely non-existent URL that would give my visitors a 404 error if they clicked on it. This was bad. And I didn't know what to do to change that.
A Half-Assed Solution
I'd consider myself an advanced beginner in jQuery. I've used it a lot but mostly for superficial things like adding color and animation effects to sites. I haven't had much reason to dig into its more practical uses, but this project gave me the opportunity.
First, I tried making small changes to the existing Instagram code but hit brick walls there. Then, quite frustrated, I decided to remove the hrefs on the images to make them unclickable using .unwrap(). At least then the gadget wouldn't produce confusing 404 urls. That worked; the links were removed. But I hated the gadget.
If the images weren't going to be clickable, I didn't want to build the gadget. I felt that a gadget with unclickable images would just go to show that Wordpress is cool and Blogger drools, and I didn't want to help perpetuate that with a crappy gadget. So, I took a weekend off from the project, sulked a bit, and played video games all weekend instead of messing with code (Civilization Revolution, if you must know).
But no, I wanted that damn gadget! So after cleaning up from my personal pity party, I got back to searching. I could not accept that I couldn't correct this problem, somehow.
Then I remembered something from a jQuery demo I saw what feels like ages ago. Prepend! I'd seen .prepend() used to help make, of all things, rounded corners, and I wondered if perhaps I could prepend the correct beginning to the href urls and fix my messy URL problem.
I took my newly remembered word to Stack Overflow, where the occasionally-grouchy-but-deeply-knowledgeable best minds of the Internet ask and answer questions about code. I searched for "prepend href" and found EXACTLY WHAT I NEEDED.
With this little snippet of jQuery, I fixed the linking problem, and the gadget was good to go. All it needed was some CSS enhancements to make it pretty and it was done and ready to rock.
Of course, the #1 lesson I learned here was that I need to study jQuery more seriously. I'm going to have to get over my dislike for the fussy little curly braces and parentheses and just dig into it for more than just photo galleries and fancy hover effects.
The #2 lesson I learned is that I probably would have finished this a whole lot sooner if I wasn't so shy about asking questions. It's HARD for me to admit that I don't know something in general, but it's 1 million times harder for me to do so on the Internet. I have these horrifying visions of my grandkids looking up what I posted on the Internet and thinking, "OMG LOL Grandma was a stupid n00b" (yes, I do think my grandkids will be thinking in text speak). If I had been cool about it and just asked somebody what to do I could have presented this gadget way sooner. I regret that I did not.
If you've read this far I appreciate you taking the time to check out my process, and I hope that some of what I've shared here might be useful for you in your own coding or web design process, even if it's just knowing that your tech frustrations are normal and surmountable. If you really want to make something happen, there are resources out there to help you through it and PEOPLE out there who know how to help. Some of them even want to help! I'm hoping Code it Pretty will be a resource for you, and I also hope you'll share your favorite resources with me.