I’ve been a hobbyist photographer for years, and I’ve only recently decided to set up my own online store for my artistic shots. It wasn’t really until I got serious with my photography that I took an “active Pinterest.” What appeared initially to me as a social network for sharing recipes and makeup tips has really opened my eyes to what’s out there for photographers. I’ve been able to share my work, and I’ve also picked up a ton of inspiration from photographers that, admittedly, run circles around me with their own work.
So when I decided to make a go at monetizing my work, Pinterest became a major part of this effort. I pin my work, and it gets pinned, repinned and liked by both friends and strangers from around the globe. So I naturally wanted to make sure I was solidly branding my newly-established venture, which I found to be easier than I could have imagined. All it took was my own website, a couple popular plugins and a little CSS to make it work.
My main website is done in Drupal 6, which then links through to my e-commerce provider at a great website called Fine Art America. I structured my store this way so I’d have a little more fine-tuned control over my SEO, and how my catalog is presented to the world. Fine Art America then handles the physical minutiae of fulfilling my orders. While they have a pretty interface and social sharing buttons available on all my listings, I wanted a little more flexibility on how the linked images appeared in the graphically-rich enviroment of Pinterest.
I use a module on Drupal called ImageCache to give me a wealth of options for creating custom thumbnails and other variations on the images I upload to my site. With ImageCache, I can not only resize images to my needs, but I can do more complex things like rotation, framing, saturation, and watermarking. Rather than creating these myself on each image with Photoshop, ImageCache does it all for me on the server. All I do is load my image and it takes care of the rest! It’s also nice because I can change my watermark file once, and the server will re-render all the subsequent files automatically. So I have a series of thumbnails with various styles and sizes applied to fit different areas on my website, and the larger images all bear my standard watermark to brand my work.
My goal was to make available a large version of my images specifically branded for Pinterest. These would carry an alternate watermark that was a little more detailed, in hopes of driving a bit more traffic back to my site to purchase their favorite ones on big, beautiful prints and canvas.
First I created a profile in ImageCache that rendered a big, detailed image that would look great when blown up full screen in Pinterest. I employed the “scale” tool, which resizes an image respective of it’s proper aspect ratio. I set it to create an image that is now larger than 1000 pixels wide or high. Then I used the “Overlay (watermark)” tool to add my specially created watermark, which I created in Photoshop and saved as a PNG file to allow transparancy when superimposed over the image.
With the ImageCache present created (which I titled “Pinterest), I now wanted to make it accessible to Pinterest’s “Pin It” button without appearing on the page for the end user to see. I use another module called ConTemplate to allow me to highly customize the way my posts of various types look when rendered. In the “Body Template,” I placed a DIV class at the bottom of the code that contained an IMG link to the special image file the server will be creating. I had to manually type in the URL up to the point of the filename, then I placed a “filename” body variable for the photo field of my posts at the end. When viewed page by page, the server will slug in the correct filename for that page. I then added display:none to the CSS for the DIV I created. This ensures that it is not visible on the page, but it is called by the browser when the page is viewed. This not only triggers ImageCache to generate the thumbnail if it hadn’t already, but it also makes it accessible to Pinterest’s “Pin It” button.
NOTE: If you’re not using ConTemplate to customize the way Drupal outputs your nodes, you may have to manally hide the image by CSS to do what I did.
Now when someone pins my pages by Pinterest’s bookmarklet, my specially-created image is available to use for the pin. It does also catch the other images on the page, but my Pinterest-friendly image is the largest available.
To give my special image a bit more of a chance of finding its way onto someone’s Pinterest board, I also place a “Pin It” button on my pages. It’s a quicker, more convenient way for someone to pin my page than using the bookmarklet, if they use it at all. There is also the added benefit that I can customize what the button automatically places into the pinning dialog for the end user.
I went to the Pinterest Goodies page and installed the javascript button they make available, per their instructions. I modified the link code a bit to customize both the image that it grabs, but also the text that’s rendered to the pin. After the ?url= string, I added the URL of my page up to the path. I then added the “path” body variable so it would be correctly rendered on the page. After the &media= string, I modified the image link to match that one I created in my special hidden DIV earlier. This calls my special Pinterest-friendly image. Then after &description=, I composed a description to my liking, utilizing body variables like “title” to create a customized message. For example, on one page, the description would render as ‘Seagull Landing Pattern’ by Shutter Happens Photography | Prints Available From $20. The price is also automatically filled in by an integer field on my page where I fill in the starting price for my prints. If I change pricing in the future, all future pins will reflect the current price at the time of that pin.
These are a couple tools I utilized to really fine tune how my content gets shared on Pinterest. But let’s not forget the biggest way to get your content noticed and shared on Pinterest — creating compelling content with eye-catching images. Pinterest isn’t just for sharing photos. Add bold photos or graphics to your blogs, podcasts and other content so it too can be picked up and shared across the globe on this exciting new social platform!
