Search
  • Cybher
  • Honest Social Media
Search Menu

How to add a custom pin hover button to your blog

How To add a Pin Hover Button, Cybher

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.

WordPress

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:

How to create a custom pin button in WordPress

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.How to add a pin button in wordpress

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:

Adding a pin it button in wordpress

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.

Blogger

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.

<script>
//<![CDATA[
var bs_pinButtonURL = “http://i894.photobucket.com/albums/ac150/cybherSian/Geekpinit_zps28467dcc.png“; var bs_pinButtonPos = “topleft”; var bs_pinPrefix = “”; var bs_pinSuffix = “”;
// ]]></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script><script id=”bs_pinOnHover” type=”text/javascript” src=”http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js”>// <![CDATA[
// 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.
// ]]></script>

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;
topleft
topright
bottomleft
bottomright

Save and you are good to go.

Author:

Sian To is Cybher founder, social media consultant, blogger, mother, workaholic, geek. Passionate about promoting women in tech and best practice in social whilst soaking up as much useful information as she can in the process.

9 Comments Write a comment

  1. thanks for this, I’ve just installed it on my WordPress site. Couldn’t get custom image to work though so have had to stick with default, but at least I am now pin-able!

    Reply

  2. Hey I just tried to do this to my BlogSpot template and got this notification:
    Error parsing XML, line 1993, column 10: The element type “body” must be terminated by the matching end-tag “”.

    I followed the instructions exactly. I’ve been trying every source I find to add a hover pin button to my blog images and nothing is working, its so frustrating!

    Reply

  3. Pingback: 8 Ways to Make Your Site Pinterest-Friendly - Jellibean Journals

  4. Pingback: Blogs on Blogs on Blogs: The Ultimate List of Blog Resources

Leave a Reply