Recently many Blogger users are reporting that their Pinterest “Pin It” buttons are no longer displaying the blog post’s images when you try to pin an image from the post. Instead, clicking the “Pin It” button opens a window with no thumbnail images to choose to pin. If you’re having this same problem, here’s how to fix the Pin It button on Blogger Posts.

Note: I have also updated the code listed in my previous blog post: “How to Add Social Media Sharing Buttons to your Blogger Posts” with this new fix. If you are using the code from that blog post, you can grab the full code (including the Facebook, Twitter and Google+ buttons) from that updated blog post.

Thanks to BloggerSentral for the updated code (found here):

<!-- Pinterest button Start by BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'>
<a data-pin-config='beside' data-pin-do='buttonPin' 
expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; 
+ data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' 
data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' 
style='outline:none;border:none;'/></span>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 
</b:if> 
<!-- Pinterest button End -->

This code should be placed ABOVE the first instance of this line in your template’s HTML code:
<data:post.body/>

(See “How to Add Social Media Sharing Buttons to your Blogger Posts” for step-by-step instructions on how to edit your Blogger template.)

The above code will place a “Pin It” button at the top of your blog posts. A counter will appear to the right of the button and it will display how many times your blog post has been pinned.

  • If you prefer the counter appear above your “Pin It” button:
    Change data-pin-config=’beside’ to:
    data-pin-config=’above’
  • If you prefer to not display a counter:
    Change data-pin-config=’beside’ to:
    data-pin-config=’none’

If you need to change the alignment of your “Pin It” button, you can adjust this line of code: text-align: left; by changing “left” to “center” or “right”.

If you want to change the spacing before or after your “Pin It” button, try changing the value of the margin of the <div> of the button. If you have your button in a row with other social media buttons, you can also try increasing the margin value for the button that’s next to the “Pin It” button.