Tutorial: ‘Pin It’ Button for Every Blogger Post

Want a Pin It button in every single post?

There’s always the Pin It button that people have in their browser’s toolbar. So they can usually pin your posts.

However, with all the controversy of Pinterest and copyrights, having the Pin It button on each of your posts shows your readers that you are absolutely okay with having your posts and photos pinned onto Pinterest. Not only are you okay with it, but you really, really want them to pin it!

There’s the option of adding the Pin It button to each post, individually. Pinterest has the coding for that on their site. Go to their Goodies page and check out the section “Pin It Button for Web Sites”.

But most of us would like that Pin It button on every single one of our posts. And that can take some time. Especially if you’ve been blogging for years before Pinterest even showed up.

How to add the Pin It Button to every single blog post of yours in Blogger.

Pin it Button for Every Post in Blogger

This is for the standard “Pin It Button” (no pin count in this version, click the link that’s shared at the end of this post for other versions of the button that include the pin count).

Important: Please download a copy of your template before making edits by clicking on the Backup/Restore button in the Template tab.

  • Go to Template > Edit HTML > Proceed
  • Check the box “Expand Widget Templates”
  • Find the following code: (Use CTRL+F on a PC)
<data:post.body/>
  • Paste the following code before  if you want the Pin It Button at the top of your posts, or after it if you want it at the bottom of your posts.

Note: You may have multiple instances of  in your template. Place the code before or directly after the first instance.


This is the code for a horizontal button with no pin count:


<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

<script type="text/javascript">// <![CDATA[
src</span>='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
// ]]></script>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Spice up Your Blog has codes for all the other types of Pin It Buttons (with pin counts too!). You can substitute any of those codes in for the one above to get the different button.

  • Before savings your template, preview your changes. You should be able to see the Pin It Button either at the top or bottom of your posts. If you don’t or if your blog seems to have disappeared, clear edits and start over. I always recommend previewing your template before saving. It’s a lot easier to just clear the edits than to try to find what you changed previously.
  • Once everything is in its place right where you want it, Save Template!

And go check out your Pinterest Source (http://pinterest.com/source/YOURBLOGURL) to see who’s pinning you! It’s so fun to watch!

Self Hosted WordPress Users:

Simple! Use the Pinterest “Pin It” Button plugin!

Do you think having the Pin It Button on your posts is necessary?

About Jamie Reimer

Jamie is the founder of the Kid Blogger Network. She loves everything to do with blogging... whether its the social media, the tech aspect, or making money... and she's here to share her knowledge with fellow KBN members! Jamie's also the creator and author of hands on : as we grow.

Comments

  1. I love having the pin button so people know they can pin and I get traffic from those pins.

  2. So easy! I now have no more excuses for still having this on my list. I’m going to have to add the pin it plugin tonight! Thanks!

  3. Does this code appear under each post in your home page or only when clicking on individual posts? I can see it being a problem if it shows up on the home page because then it’s very easy to pin back to the home page instead of the post intended. Does that make sense?

  4. Diego Vieira says:

    “Find the following code: (Use CTRL+F on a PC)”
    Which one?
    Thanks

  5. for some reason it doesn’t have the usual pin it logo, just the words pin it in blue…..? just when i looked at it in preview. i’m a little nervous to make it go live to check if it changes when i do….. this html stuff is not my forte but i did find this tutorial the easiest to follow! Any idea as to what i did wrong? or if in fact it will all work out when i make it go live?

Trackbacks

  1. […] If you are a WordPress user, follow the instructions on how to add a Pin it plugin for every single blog post. If you want to get fancy, check out Spice Up Your Blog for unique Pin it buttons, complete with the pin counts (number of times an image has been repinned). You will need to copy and paste the code by following these directions. […]