Tuesday, 16 April 2013

How to Add a Custom Pin It Button to Blogger

Pin It!

Like many bloggers, the vast majority of my blog's traffic comes from Pinterest. Naturally, this means that making it easy for visitors to pin your posts is a priority! So, as requested by several readers, here is my take on how best to install a "pin it" button on your Blogger blog.

I already covered how to install buttons on your blog, but my pin it button tutorial is going to be a little more complicated. Don't despair though, I am a fan of keeping things simple and consequently I went for the most straightforward method when adding my own Pinterest button. It doesn't give a counter for how many times your post has been pinned, or create fancy buttons that hover over each photo. But it does allow you to place a handy but unobtrusive icon at the top of your posts and use a customised pin it button (if you wish).



Finding a Pin It button


I don't know why, but some people are under the misconception that if you are using Blogger you cannot use a customised pin it. This is simply not true! So if you are following my tutorial you will first need to get your icon. This is the standard pin it button:



Feel free to nab it for your own website (right click on the image and choose "save as"). You could also use something a bit prettier or more eye catching, such as these:


These are some customised pin it buttons I've created to co-ordinate with my free social media icons. I didn't want to overload my tutorial with information so I've put these in a separate post.

Once you have your button you will need to upload it to whichever site hosts your photos. Many people like Flickr, but if you are on Blogger the chances are you are on Picasa. If so, upload the pin it button and copy the information found here:


This is the URL you will need to copy and paste into your HTML code; it contains the necessary information to bring up your image. Double check that you have copied the code under "embed image" and that the box stating "Image only (no link)" is checked.

How to add the "Pin it" code to your Blogger template


Go to your Blogger dashboard, choose "Template" from the left hand menu and then click "edit HTML".


Blogger recently changed the template editor so that the whole template displays automatically - you no longer need to select "expand widgets" before making edits (just thought I'd mention that for people who are thrown by the new look template editor).

You need to find the right part of the template to insert your "pin it" html code. To do this click anywhere on the template and hold down the CTRL and F buttons on your keyboard. This will bring up a search box.



Copy this code (highlight with your mouse and press CTRL and C) and paste it into the search box (CTRL and V):


<data:post.body/>


The code for the Pin it button needs to be placed before this tag. Here is the html code to copy and paste into your template:


<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pin It' src='YOUR IMAGE URL' style='border: none;'/></a>


Your template will now look something like this:



All that is left to do is replace the following text:

YOUR IMAGE URL - This needs to be replaced with the URL for your pin it button, which I explained further up the post.



And you are done! Click "Preview Template" just to check that everything is working, and if so then hit "Save Template". A "Pin it" button will now show on all of your posts, including all the ones you published prior to changing the template.

If you are curious about how the button works, this is what your visitors will see when they hit the pin it button (this example was taken from my "how to install buttons" post):


You do get a choice of which image you want to pin from the post.

If anything in the tutorial isn't clear, please leave me a comment or drop me an email.




You might also be interested in:


Pin it buttons
Free Pin It Buttons
Preventing Pinning on Pinterest
How To Add Buttons
FREE Social Media Icons
Free Social Media Icons
How to Install Fonts
How to Install Fonts

31 comments:

  1. Hi Angela! I followed your tutorial exactly, but my button is not showing up. Thanks for any help!=

    ReplyDelete
    Replies
    1. Hi Sarah,

      It's always a little tricky offering virtual html support! But the first thing I'd check on your template is whether your data:post.body tag appears more than once in your template. In many templates you need to paste it before the first data:post.body tag but in mine it is placed before the second - you can test it on your template with the "preview template" button. You may also want to save your template before making changes in case anything goes wrong.

      Let me know if it works! If that isn't what was causing the problem send me an email and I'll have a more in depth look at why it isn't working for you.

      Delete
    2. I had the same problem, so I followed your tip on trying the next "data:post.body" tag. That gave me the link. But the image is not showing. Do you know what my issue may be? And, where do you go to check the image only block?

      Delete
    3. Hi there! I've had a look at the code on your website and you've linked the URL of the image's page in your Google Plus album, rather than the embed information you need to insert into your blog to make the button show. That probably sounds a tad confusing so I'll explain as best I can:

      * As far as I can tell, there is currently no way to get the necessary embed link in Google Plus. You *must* go to Picasa.

      * Google recently set up Picasa so that when you type in picasaweb.google.com it redirects you to a Google Plus album instead. Look for a small yellow banner at the top of the page saying "click here to go back to Picasa web albums". Follow the link to get back to Picasa!

      * Find your "pin it" image and click on it. This will take you to a page showing the information I've pictured in this post. Click "image only", copy the Embed link and use this code in your blog template instead.

      I'm reasonably sure this will fix your issue - since the rest of the code is working fine for you - but if you are having problems still email me and I'll reply with some screenshots that might make my explanation clearer. Good luck!

      Delete
  2. Fabulous tip! Thanks for always sharing your expertise. Have a great day!

    ReplyDelete
  3. I am visiting you fromThink Tank Thursday link up. I will definitely try this. Thank you for sharing. I have more followers to my Pinterest than I do my blog so I am understanding the value of it.

    My post is on teaching your children to sew:
    http://www.thelostapron.com/2013/04/summer-sewing-camp.html

    ReplyDelete
  4. Thank you!! I've seen custom Pin buttons but had no idea how to make them. I'm including a link to your tutorial in today's post on my blog!

    Natashalh

    ReplyDelete
  5. Great tips! I just started blogging about 6 months ago so I love seeing any blog DIY posts! Stopping by from Inspire Me Please Weekend Blog Hop.

    ReplyDelete
  6. Thanks, I have been wondering how to do this! Now I will pin it! :) Found you on Inspire Me Party, please come visit me, too! :)
    http://mockingbird-taketwo.blogspot.com/2013/04/burlap-bubble-wreath-with-decor.html

    ReplyDelete
  7. Great tutorial! Thanks for linking this up at Sharing with Domestic Superhero Thursdays!!

    ReplyDelete
  8. Thanks for the tutorial(and the cute free buttons)! Having a 'Pin It' button is a necessity in my opinion.
    Thanks so much for linking up at the Real Family Fun link party! Hope to see you next week.
    KC

    ReplyDelete
  9. Love love love it! Thank you! (at first it wasn't showing up like {the first} Sarah said and I read the rest of the comments and now it is working like a charm! Thank you soooo much!!!

    -Sarah

    ReplyDelete
  10. I was JUST looking for how to do this earlier today....thanks!

    ReplyDelete
  11. I'm excited to find this tutorial! I'm going to pin it and read it later. :) Thanks!

    ReplyDelete
  12. I need to update mine to a custom one, they are so much more fun! Thanks for the great idea :) Krista @ A Handful of Everything

    ReplyDelete
  13. Your tutorial seems so easy, but every time I try it an image with a question mark in a box shows up on my blog posts, rather than the "pin it" button. Any suggestions on what to do? Thanks.

    ReplyDelete
    Replies
    1. That's a new one on me, never come across that problem!

      Knowing the image host might help me to figure out what's gone wrong for you. At a guess I'd say your problem might be that you've copied the wrong code into your the img src="" part of the code (double check you've used the 'embed image' link rather than the one that simply says 'link'). But I need to know for sure if you're using Picasa first! You can send me an email if you need a bit more in depth support trying to get it to work - address is in my signature and also under "Contact" at the top of the page :)

      Delete
  14. I can't find that part of the code. What am I doing wrong? When I search it says no matches found. hmmm

    ReplyDelete
    Replies
    1. Try just searching for part of the tag like "data:post" (without quotation marks!). I do find the search function a bit random on the Blogger template, but when I can't find the whole tag only putting in part of it always brings it up for me. No idea why that is, but hopefully it'll do the trick for you too.

      Delete
  15. Which code would I use if I am using photobucket to host my image?

    ReplyDelete
    Replies
    1. I've never used Photobucket but this page should tell you how to get the image URL to insert into the HTML:

      http://www.ehow.co.uk/how_8708623_use-photobucket-blogger-word.html

      Apparently you need to hover your mouse over the image to bring up the URL, click on it and do the usual CTRL and C to copy the information.

      Delete
    2. Ok I found the spot in my code that i needed and I guess my question with photobucket (the program I like to use) is which of the 4 codes/links it gives me do I use. I know how but am not sure which one. These are the titles email&IM, direct link, html code and img code. Any ideas?? I use the direct link code when making blog buttons to direct people back to my blog but it doesn't seem to work with this. Thanks for any additional help.

      Delete
    3. Ah right, I wasn't aware that Photobucket brings up more than one link. I'd have gone for the Direct Link one, but since you said that one doesn't work I did a quick Google and the Photobucket support forum says to use the HTML code to embed an image on Blogger:

      http://support.photobucket.com/entries/21113677-Link-Codes-Embedding-or-Linking-Photos-and-Videos

      I wish different image hosts would operate in a similar way, it would make helping people a lot easier :)

      Delete
    4. Staring at the example in the above link, it looks like the code includes an a href tag around the image information that automatically links images back to your Photobucket album. Just ignore most of the code and copy the "http//..." bit from the the img src tag. Hope that's clear!

      Delete
    5. Clear as mud, haha May I email you the code so that you can look at it and tell me what I need? If so what is your email address?

      Delete
    6. Have emailed you at the address on your blog - needed to show a screenshot!

      Delete
  16. Ok, adding a pin it button at all-not even a custom one, has been the hardest thing for me! I know I'm not computer savvy at all, but this is getting ridiculous for me! I have tried and given up so many times it's silly. Your tutorials are always so so helpful and I really appreciate it. I think my problem is I can't find that code to save me! I've searched with Ctl F, and even searched myself going line by line and I still can't find it anywhere. Any ideas?? I'd appreciate it!

    ReplyDelete
    Replies
    1. The search function on the Blogger template editor can be very temperamental. Try typing in "data:post" to the search box(without quotation marks).

      It should be somewhere around the closing head tag. Hope that helps!

      Delete
    2. I saw where you had suggested that in the comments above and tried that as well already and still nothing!!! It's ok though! Thank you so much for your help!

      Delete
  17. Thank you for sharing the custom pin it buttons! I just barely utilized your pink heart one on my blog :) Love it!
    little-miss-stitcher.blogspot.com

    ReplyDelete

Thank you for taking the time to leave me a comment. I try to respond to as many as possible. :)