March 12, 2013

The Big Guide to Pin It Buttons for Blogger

The Big Guide to Pin It Buttons for Blogger

Updated May 2013 to include the new, official hovering Pin It buttons.

When I started Code it Pretty, there were few very Pin It button options for Blogger. So, I whipped up a bit of code and a tutorial to put a button next to every picture in a Blogger post.

My buttons became very popular, and I'm thrilled to see them on so many awesome blogs! But, nice as they are, they're not the only option for adding Pin It buttons to Blogspot anymore.

To help you find the perfect Pin It button solution for your blog, I've tested all the buttons I could find. I narrowed them down to 6 Pin It button options for Blogger — three "stand-alone" buttons and three bundled with other social media buttons. Each of these add Pin It buttons to every post automatically with one installation of code.

Here's your guide to the working, automatic Pin It buttons for Blogger — including their pros & cons.

Stand-alone Pin It Buttons

These three are for Pin It buttons only, without any extra stuff.

Pinterest's Official Hovering Pin It Buttons
Using the Official Pin It Hover Buttons on Blogger

Pinterest updated the pin it buttons in April 2013, and they're now much easier to use. Installation is simple — just copy and paste a few lines of code!

Pros:
  • Officially supported buttons.
  • Very simple installation.
  • Option to remove the button from individual images.
Cons:
  • Button position can't be customized.
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.
  • Buttons are difficult-to-impossible to click on many touchscreen devices.
Code it Pretty Pin It Buttons for Blogger
code it pretty pin it buttons demo

Standard white & red Pin It buttons next to the lower right corner of every image in your blog posts.

Pros:
  • Simple installation — with friendly support, if I do say so myself ;)
  • Pins link to the original post's URL, even if your readers pin from your home page or an archive page.
  • Works on the iPad, and on mobile browsers using the "web view" of your blog.
  • Advanced options to move the buttons and to hide the buttons on specific images.
Cons:
  • Doesn't work with the old "classic" templates like Minima. Also doesn't work with some custom templates.
  • The button position is a little tricky to change. CSS skill is helpful.
Bloggersentral's Hovering Pin It Buttons

bloggersentral pin it buttons demo

Customizable Pin It buttons that appear when your readers hover over your images.

Pros:
  • Button image is customizable.
  • Pins link to the original post's URL, even if your readers pin from the homepage or archive pages.
  • Multiple button placement options.
  • Option to manually hide the button on specific images.
Cons:
  • Doesn't work on the iPad or mobile browsers.
  • Free support is no longer available (the developer does offer paid support, though).

Bundled Pin It Buttons

These three Pin It buttons are bundled with share buttons and tools for other social media services.

Markerly Sharing Buttons

A suite of social media buttons that appear when your readers hover over your images. Account signup required.

Markerly sharing buttons demo
Pros:
  • Very simple installation.
  • Includes other social networks for increased sharing.
  • Sharing analytics available.
  • Some customization options available for advanced users (see Justin from Markerly's comment).
Cons:
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.
  • Doesn't work on the iPad or mobile browsers (Yet. They're working on it!)
Tynt SpeedShare
tynt pin it buttons

The standard white & red Pin It button appears on the lower right corner of your images when your readers hover over your images. Account signup required.

Pros
  • Simple installation.
  • Sharing analytics available.
  • Part of a suite of social media sharing tools.
Cons
  • The delay between hover and the appearance of the button is long enough that some readers may not notice the button.
  • Pins link to the original post only if your reader is on the post's permalink page when they pin. Pins from the homepage link to the homepage, pins from archive pages link to the archive, etc.
  • Doesn't work on the iPad or mobile browsers.
  • Buttons appear on every image in your posts. This is a "pro" for most users, but if you want to selectively "unpin" some images, it's a con.

ShareThis Sharing Buttons

A social media sharing bar inserted at the end of each of your posts. Account signup not required, but recommended to access analytics.

sharethis buttons demo
Pros:
  • Extremely simple, semi-automated installation.
  • Includes other social networks for increased sharing.
  • Analytics available (with account signup).
  • Works on the iPad, and on mobile browsers using the "web view" of your blog.
Cons:
  • Pins only link to the original post if your readers pin directly from that post. If your readers pin from your home page, the pin will link to your home page, not the original post.

Show Me Your Buttons!

If you've got Pin It buttons on your Blogger blog, I want to see them! That goes double if you're using buttons I haven't listed here; if I've missed a great button option, let me know!

Leave a comment, Tweet me @MMosley, or get in touch on Google+.

Images: Title card designed by Cris Stone from Kiss My Tulle. Cupcake image in Code it Pretty demo CC-BY Lamantin. Bloggersentral and Tynt images from their websites as listed above. Cookie image in Markerly demo CC-BY-SA timlewisnm.