Tuesday, August 28, 2012

How to Add a Pin it Button to all of your Posts

All credit for css goes to http://danialde4.blogspot.com/2012/08/facebook-like-tweet-google-1-buffer-and_24.html.  I just took the Pinterest portion of his share button code.  I am not a css ninja, but this was easy enough for me to do.  Also I know that this works for Blogger, but I am not sure if it is the same for other sites, so someone should try it and let me know.  Thanks : )

Before you edit your HTML, it is a good idea to save your template by clicking Backup/Restore after going to the template (In Blogger, just click Design in the top bar).  Then click Proceed when it asks if you want to edit the HTML.  Next you need to check the box marked "Expand widget templates".  Search for data:post.body
(On a PC, you can search by pushing Ctrl and F.)

Danial says that if you find it three times, use the second one.  I only found it twice, so I used the first one.  After the part that says <data:post.body>, paste

<!-- Pinterest Start -->
<div id='pin-wrapper' style='display: inline; padding-left: 25px;'>
<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: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;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
<!-- Pinterest End -->

Then click Preview and make sure it worked.  If it did, click Save Changes and then you're done.  It goes onto all of your previously published posts and all of the posts you write in the future.

No comments:

Post a Comment

Every time you comment, a kitten is born, and who doesn't love kittens?