Sunday, July 1, 2012

To easily add a 'Pin It' button

Teresa asked how to add the 'Pin It' button next to the other social network buttons right before the comments. Placing it right next to these standard social network buttons and lining them up nicely is difficult, but it is easy to place it just under those buttons.

First (and always) make a backup:
- click on the Template tab
- click on Backup/Restore
- download your template
- close

Now go to edit HTML
Expand widgets
Search (CTRL+F) for this 'pencil' section:
<!-- quickedit pencil -->
  <b:include data='post' name='postQuickEdit'/>
  </span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
  <b:include data='post' name='shareButtons'/>
  </b:if>
  </div> </div>
Under that section paste this section:
<a class='pin-it-button' count-layout='none' 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:-46px; 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>
Press Preview to see the result

You can play around with it and paste this section somewhere else (above the pencil section, or even in the pencil section) so it will show up in a different place.

Press Save






When one of your readers presses this button he/she can add a picture to their Pinterest pinboard. The source of the picture will automatically be mentioned.



next episode: a supercentenarian

2 comments:

  1. Thanks for the info on adding the Pinterest button - I can't wait to try it!

    ReplyDelete
  2. Thanks, Rob, I finally just got around to doing this and it worked great!

    ReplyDelete

I love to read your remarks and suggestions!

Please don't comment using the name 'Anonymous', because unfortunately these will end up in the spam department, due to the large bots leaving anonymous comments with questionable links...

ShareThis

Gadgets By Spice Up Your Blog Real Time Web Analytics