Tuesday, April 2, 2013

How To: Add A Pin It! Button To Your Blog Posts

If you have a blog, more than likely you're pinning your posts. Much like we do here, you have an image you pin either to a Pinterest board containing all of your blog posts or another board about blogging. But aside from you pinning your posts, your readers can pin them too! The easiest way to allow for your posts to be pinned is to add a 'Pin it!' button to the bottom of your posts. In just a few simple steps you can expose your blog to hundreds of thousands more potential followers. 

Step One:

Upload a 'Pin it!' image to an image hosting site [I use Flickr]. You can find one by doing a Google search for a Pinterest image or you can create one yourself. I created my own for my personal blog A Fox & A Wolf by using PicMonkey. After your image is uploaded, find the image URL.


Step Two:

Head on over to Blogger and go to 'Template' and then 'Edit HTML'. Click 'Expand Widget', hit CTRL>f and search for <div class='post-footer'>


You're going to want to paste this code above that:


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

Where it says 'INSERT IMAGE URL' you're going to want to paste your Pinterest image URL that you uploaded to your image hosting site. Click 'Preview' to make sure the code copied correctly, then 'Save Template'. 


Now you are on your way to having the best exposure on blog posts and your blog in it's entirety. You can view B.You's board on Pinterest here

If you have any questions about adding the 'Pin it!' button to your blog, please leave us a comment below or send us an email at b.you.blog [at] gmail [dot] com. 






Pin It

15 comments:

  1. hello Ashley thanks for posting this. I have been trying to ad it to my footer and its not working. Do you think you could help me? I do not have the expand wdiget option but I did search for the code and found it when I paste above it nothing happens.

    ReplyDelete
  2. I am having the same problem in blogger. I add the code, but nothing happens. I am using Photobucket to host my image.

    ReplyDelete
  3. I don't have the expand widget check box on my Blogger site. Help. :)

    ReplyDelete
  4. same here.no expand widget! The last time I added a Facebook badget I had the expand widget button but no it is: Jump to Widget. Any suggetions please?

    ReplyDelete
  5. Blogger has a new template set up page hence the edit HTML cannot be found. This code didn't work for me either but I found one that worked. Here's the link:

    http://www.codeitpretty.com/2012/04/add-pin-it-buttons-to-your-blogger.html

    ReplyDelete
  6. Another out-of-date post. Blogger no longer has the option to `expand widget'. Such articles as this are never updated by the authors to take that into account, thus causing confusion and frustration.

    ReplyDelete