As much as I love the Squarespace hosting platform, I was getting a little frustrated trying to add certain 3rd-party plugins I like to use. Specifically, I wanted to add the following items to my journal entries:

• Tweetmeme button
• Facebook Share button
• Digg This button
• AddThis social bookmarks

I also had very specific requirements as to how I wanted this to work:

1. Full automation. I did not want to paste chunks of code into each of my journal entries. 
2. These buttons could only appear on my web pages. I did not want any javascript in my RSS feed.
3. I want to avoid or minimize any delays in the rendering of the page content.
4. These buttons should not attempt to display on anything but the full journal entry page.
5. Should NOT rely on JQuery or any other libraries.
6. Cross-browser compatibility of course!

How it was achieved

The following instructions assume you have a basic understanding of Javascript, HTML and CSS. I was able to accomplish all of the above with one caveat I'll talk about at the end of this post. Here is how I did it.

Firstly, all of the code is inserted using Code Injection:

1. Go to menu Website Management > Website Settings > Code Injection
2. Insert the code below in the Injection Region: Post-canvas HTML
3. Modify the code where indicated.
   

This technique should work equally well pasting the code into the Website Footer.

First Steps

1. Get the Module ID for your Journal by viewing the source on a journal entry page and look for the line:
   
   Squarespace.Constants.CURRENT_MODULE_ID = "nnnnnnn";
   
   
2. Replace the string _CURRENT_MODULE_ID_ below with this numeric value.
3. Replace the string _YOUR_ADDTHIS_USERNAME_ with hmmm. your AddThis Username!
4. Modify your site's CSS to position and display the buttons as needed using the assigned div id's.

The Code

<!-- Social Buttons DIV Code -->
<script type="text/javascript">
if (Squarespace.Constants.CURRENT_MODULE_ID == "_CURRENT_MODULE_ID_") {
  var doShowSocialFooter = true;
  (function() {
    var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://widgets.digg.com/buttons.js';
    s1.parentNode.insertBefore(s, s1);
  })();
  var elem = document.getElementsByTagName('p');
  for (var i = 0; i < elem.length; i++) {
    if (/journal-read-more-tag$/.test(elem[i].className)) {
      doShowSocialFooter = false; //Hide for exerpts
      break;
    }
  }
  if (doShowSocialFooter) {
    document.write('<div id="wms_social">');
    //Tweetmeme
    document.write('<IFRAME id="wms_tweetmeme" height=61 src="https://api.tweetmeme.com/button.js?url='+escape(Squarespace.Constants.OBJECT_PERMALINK)+'&style=normal" frameBorder=0 width=50 scrolling=no allowtransparency="true"></IFRAME>');
    //Facebook Share
    document.write('<div id="wms_facebook_share"><a type="box_count" name="fb_share" href="https://www.facebook.com/sharer.php">Share</a><script src="https://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></'+'script></div>');
    //Digg NEW!!!
    document.write('<div id="wms_digg" height="80"><a class="DiggThisButton DiggMedium" href="https://digg.com/submit?url='+escape(Squarespace.Constants.OBJECT_PERMALINK)+'"></a></div>');
    //AddThis
    document.write('<a class="addthis_button" href="https://www.addthis.com/bookmark.php?v=250&pub=_YOUR_ADDTHIS_USERNAME_"><img src="https://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pub=_YOUR_ADDTHIS_USERNAME_"></'+'script>');
    document.write('</div>');
    var wmssocial=document.getElementById('wms_social');
    elem = document.getElementsByTagName('div');
    for (var i = 0; i < elem.length; i++) {
      if (/journal-entry-text$/.test(elem[i].className)) {
        elem[i].parentNode.insertBefore(wmssocial,elem[i].nextSibling);
        break;
      }
    }
  }
}
</script>

Notes

• Feel free to change the selection of buttons above. Simply paste the code provided by the social widget publisher into additional document.write(); lines.
• Make sure you break up the closing </script> tags in any embedded code or it will not work. e.g. </'+'script>
• The code above inserts the buttons just below the journal entry content. Specifically, this is a <div> with classname="journal-entry-text". You should be able move the buttons above the content or lower on the page by choosing a different <div>. Use Firebug to get the classname of the <div> under which you want your buttons to appear.
• The Facebook Share button doesn't seem to want to render the "count bubble" until it's clicked on. I've seen lots of discussion on this issue but no solutions. Does anyone have the solution for that one?
• I've successfully tested this code on FireFox 3.5/3.6, Internet Explorer 7 & 8, Google Chrome 3/4, Safari 4.0.3.

CAVEAT!

IE iFrame issue

The basic technique the code uses is to "draw" the buttons in a <div> in the document footer, then "move" it to the desired location on the page. Unfortunately, Internet Explorer is unable to move an iFrame once it is drawn on the page using Javascript. Firefox, Safari and Chrome do not have this problem.

The "fancy" Tweetmeme button uses an iFrame to render itself. This would result in that button remaining in the document footer in IE. It should be noted that the  work-around I've implemented to resolve this issue in IE may stop working at some point in the future should Tweetmeme change how they implement their button.

I basically bypassed the Javascript that site calls and directly render the iFrame for the button that the Javascript code would itself generate. So, use this technique at your own risk, or simply omit the Tweetmeme button from the code above.