You see them everywhere these days, a fancy PIN ME hover button over images on blogs, customised to fit in to the style of the blog. You can see mine over at Style Arch, and Sian’s version over on Geek Is The New Chic. One is WordPress, one is Blogger and they’re both rocking their custom Pin buttons. Here’s how you can add yours.
Create your Pin Button
The first thing you need to do is create your button. Do whatever takes your fancy, but don’t go OTT on the size. We have some free downloadable buttons, or you can make your own.
If you’re using WordPress, read on. Blogger users need to read this set of instructions.
As always, there’s a plug in for everything on WordPress, so it’s REALLY easy.
Log in to your dashboard.
Go to Plug Ins > Add New
Search for “jQuery Pin It Button For Images”
Click Install, then Activate.
Then click on settings for that plugin in your plugin list.
You will now have a screen with three tabs.
The first tab you may want to deselect some of the options on what images to pin:
If you have lots of small images on your site – think sidebar badges, social buttons etc – you will want to define how big an image is before you want it to be considered for pinning. I use 250 px wide.
Click save. And move on to the second tab, Visual Settings.
On this tab, you can choose how it is displayed. The settings I use are as follows, but have a play. There is no right or wrong:
Note the Linked Page check box ensures deep links, I recommend you use that.
Make sure you click the Use Custom Image option, and then upload your pin button via the uploader as directed.
Click Save. And that’s it. You’re done. Easy.
If you’re using blogger follow these simple steps.
Log in to your dashboard.
Go to Template > Backup/Restore.
Backup your template.
Click Edit HTML.
Locate the </body> tag, copy and paste the below code directly above it.
var bs_pinButtonURL = “http://i894.photobucket.com/albums/ac150/cybherSian/Geekpinit_zps28467dcc.png“; var bs_pinButtonPos = “topleft”; var bs_pinPrefix = “”; var bs_pinSuffix = “”;
// This Pinterest Hover Button is brought to you by Cybher.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact.
If you would like to use your own button, or indeed one of our new ones, replace the URL, highlighted in bold with the Direct Image url of your badge.
By default the button will appear in the centre of your image. To change the position replace ‘centre’, highlighted in bold with one of the following;
Save and you are good to go.