Step 1: Log in to Blogger, go to your blog’s dashboard > Template tab.
Step 2: Check “Expand Template Widget” and find </body>. Before it add the below script:
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>Step 3: Find <data:post.body/> and before/after it (or both) add any one of the following codes:
Horizontal Count
<b:if cond='data:blog.pageType != "static_page"'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=http://your-image.jpg&description=" + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>
Vertical Count
<b:if cond='data:blog.pageType != "static_page"'>If you don’t want any count for the Pinterest share buttons then add the following code:
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=http://your-image.jpg&description=" + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>Step 4: Save your template. It’s done.
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=http://your-image.jpg&description=" + data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>
Enjoy !
Thanks for this tutorial!
ReplyDeleteHI , I added this part of the code to enable pinning , but it only works halfway. Each time i try to pin it, the thumbnail image is too small and I get the 'Image too small error' on pinterest.
The actual image on the website is well over 500px500px.
Is there some place where i can actually increase the thumbnail image size?
Thx so much! Would really appreciate a reply.
Pinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.
ReplyDeletePinwords is a really basic tool, but it’s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you create a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.
ReplyDeletePinwords is a really basic tool, but it̢۪s great if you want to quickly make an image from a quote and add it to your Pinterest account. Pinstamatic actually lets you
ReplyDeletecreate a whole bunch of items to add to your Pinterest boards including website snapshots, pins of Twitter profiles and Spotify tracks that you can pin.