Sunday, August 25, 2013

New Tricks 13/26: Adding an (ugly) 'pin it' button to single images

I like Pinterest and I pin like a crazy person when I find a website I like. Having a built-in 'pin it' button on photos is a big help and saves a few extra clicks. But I'm not all that keen on offering pins on every single picture on my site. I don't particularly want pictures of Dear Boy pinned all over the internet and figure, probably naively, offering 'pin it' buttons on the ones I don't mind sharing will help prevent a bit of that (I know people who want to pin will find a way even if I build in code to prevent pinning on my site - easy enough to cut corners on that one).

I went in search of a tutorial or a coding page. There are quite a few that explain how to do it for all photos (e.g. adding code or a widget into the HTML of the template in Blogger). After a few Google refinements, turns out single photo buttons are pretty easy. In fact, Pinterest does it for you. I have to warn you, they are pretty ugly but hey, a new trick is a new trick even if it's an ugly one.

To build your own individual pins, you need to publish your blog post first, so you have a post URL that will connect to the pin and an image URL so the 'pin it' button connects to the right image. After that, head on over to Pinterest where they have a widget builder in their 'Goodies' section.

There are a few options, but the highlighted sections are the choices you need if you just want to build 'pin it' buttons for individual images, not all of your images throughout your blog. You can also pick where or even if you want to include a pin count with the button so you can see how many times it's been pinned.

Copy the post and the image's URLs. I'm using this weird dinosaur picture from my post on our trip to the museum because it's already been posted and generated the URLs I need. You can find the image's URL by right-clicking (sorry Apple users - you're on your own here) and choosing 'copy image URL'. Paste the URLs into the right slots in the widget builder.

Fill in the 'description' slot with whatever text you'd like to travel with the pin. Some people will change this to their own text but others will leave it as is, so make it descriptive and include your blog name.

Now hit 'Build It'.

When you hit 'Build It', you get both a preview and a chunk of code to paste into the HTML editor for your blog post. Make sure you place the code after the correct image's code or the button could end up anywhere.

The preview doesn't really preview what it looks like on the site. Mine certainly didn't come with a picture frame and a title underneath like this one does. This is what I got:

It's a small plain button and, as I mentioned before, it's ugly. I made it a bit prettier adding a centring bit of code around the chunk given by the widget builder, but it's still ugly. I'd really like to be able to add one of those cute little P-circle hover buttons to the individual picture but so far my coding and Googling skills have failed me. I know how to add the hover button to all images and even how to de-apply the button on specific images but that's a bit more arse-about than I want. I don't want to have to retroactively go through all of my posts and take the pins off all those images. The search continues.

Are you a coding or design pro who knows how to pretty up my single 'pin it' buttons? I'd love to hear how.

1 comment :

  1. Ooh, just twigged that this marks the halfway mark of my resolution to learn 26 new things this year. Might need to get a bit of a move on to make sure I can finish by New Year's Eve.


Thanks for taking the time to respond to what you have read here at Lilybett and Boy. I love reading through all your comments.


Related Posts Plugin for WordPress, Blogger...