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 LetMeClear.com, 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 LetMeClear.com, 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.

<data:post.body/>

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;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:22px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<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> 
</b:if>
<!-- 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.
 Source:  LetMeClear.com

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



2 comments:

Bigger than Average Mom said...

you are fast becoming an internet guru!

Number Whisperer said...

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