Tip: Adding Facebook, Twitter, and Google+1 share buttons to old/unique templates

A request we tend to see often is people trying to get their Facebook, Twitter, and Google+1 share buttons to show up in old templates, or templates which have been heavily customized. In many of these instances there is simply no good/easy way to add them back in under the person really has coding expertise.

To tackle this request, we've written the following code which can be placed before the tag in your code, before the tag, or just about anywhere (but those are probably the best locations and easily located with a simple search).


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
  // you'll notice the b:if above for the "item" page type; we only want this running on the item pages
  // these are the share buttons or any other div blocks that you want to insert.
  // URL and TITLE are used for automatic replacement with the current page's information
  var links = "<div class='post-share-buttons'><a class='goog-inline-block share-button sb-twitter' href='https://twitter.com/intent/tweet?text=TITLE&url=URL' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.facebook.com/sharer.php?u=URL&t=TITLE' onclick='window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a><div class='goog-inline-block dummy-container' style='width: 120px;'><g:plusone size='medium'  size='100' annotation='inline'></g:plusone></div></div>";
  // the following grabs the page title and page URL
  var page_url = $(location).attr('href');
  var page_title = $(this).attr('title');  
  // replaces the string from the beginning with the URL and TITLE information
  links = links.replace(/URL/g,page_url).replace(/TITLE/g,page_title);
  // here we're adding the new links to the TOP of the post-body, but we could easily change this to anywhere else in the DOM using prepend or append.
  $('.post-body').prepend(links);
  // the Google+ has to be initiated after the +1 box is added, hence having it here.
  $(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  });
});
//]]></script>
</b:if>


For a cleaner version of the code please visit here.

Using this code you can insert anything you'd like into the page or item at any point within it. It's handy for signatures, unique headers into the page template, bookmarklets, or just about anything else.

Insert this code into your template right before </head>