Blogging Sunday 2--Pinterest Button


Adding Pinterest Button to Blog Post

Pinterest has over 10 million users, and can be an excellent source of traffic to your blog. In fact, any time I write a blog post, I pin it to Pinterest. (I can't believe I shared that embarrassing bit of information. Does that make me self-centered? Probably. Please tell me I'm not the only one. Anybody?) But in all seriousness, having an option to pin your blog post makes visitors way more likely to actually pin it. I read through approximately seventeen tutorials before I found one that I could understand. So I'm going to save you the time of looking through seventeen different posts and try to consolidate the information in a way that a non-geek can read it.

1. Go to the Design page


 2. Click on "Template", then push "Backup/Restore" and save a copy on your computer. This is just in case something goes horribly wrong. There's no harm having insurance. :)

3. On the same page, click "Edit HTML"

4. Click "Proceed".


5. Check the box that says "Expand Widget Templates

6. This part gets a teensy bit tricky. You need to push "ctrl+f" to search for a code. Type this code into the box:

<data:post.body/>

It will find two different places. Go to the first place it finds. You are going to copy and paste the pinterest code directly underneath this part.
 7. Copy and paste this code:


<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<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>


Here is the code typed on mine. Press "Save template" and you are finished.
 Here's what the bottom of each post looks like on mine. It has the PinIt button and is also has a text box telling me how many times somebody has pinned my post. Pretty cool, right?

I hope this makes it easier for you to add the button to your post. And I ALSO hope you guys are having a relaxing Sunday.