Monday, March 12, 2012

Embedding a Pin It Button in Your Post

Last night I spent some time searching for the magic code that would embed a Pin it button in each post.  My efforts did not go unnoticed by my friend Google, who happily directed me to my pot of gold.

With the easy-to-follow instructions provided at, I was able to knock this out in under 5 minutes.  I bet you could do it in 3.

For fear that these instructions might one day disappear from, I've cut and pasted them here:

Step#1. Go to Design>> Edit HTML, Make a full back up of your template.

Step#2. Click on the Expand Widget Template checkbox on top right of the HTML window.

Step#3. Find this Data tag normally it will be twice in your HTML is given below. Locate the First one.


Step#4.  Paste the following code immediately below/after the code mention in Step#3.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;src&#39;,&#39;; + Math.random()*99999999);
<!-- Pinterest button End -->

Step#5(Optional). If you want to show Pin It button on the top of each post Place the button code in Step#4, before <data:post.body/> tag.

Step#6. Hit Save and that’s it! Check your blog Button appears or not on your post page.

Thank you LetMeClear...I've got you bookmarked now.


Bigger than Average Mom said...

you are fast becoming an internet guru!

NumberWhisperer said...

Ha, not really. I'm just at following directions.