How to Insert Social Bookmarking Buttons into a Squarespace Website
Tue, December 8, 2009 at 12:35 AM
Paul Cormier in AddThis, Coding, Digg, Facebook Share, Javascript, Social Bookmarks, Squarespace, Tweetmeme

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:

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 = 'http://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="http://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="http://www.facebook.com/sharer.php">Share</a><script src="http://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="http://digg.com/submit?url='+escape(Squarespace.Constants.OBJECT_PERMALINK)+'"></a></div>');
    //AddThis
    document.write('<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=_YOUR_ADDTHIS_USERNAME_"><img src="http://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="http://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

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.

Update on Thu, June 17, 2010 at 8:44 PM by Registered CommenterPaul Cormier

Modifying the AddThis buttons

I was asked for the code to use if the "toolbar" style of AddThis buttons is desired instead of the single AddThis button. Replace Line 28 above with the line of code below. Note how you can choose which icons to display. The list of available AddThis service "codes" is here:

http://www.addthis.com/services/list

e.g. "addthis_button_[code]"

The Javascript Code:

document.write('<div id="wms_addthis" class="addthis_toolbox addthis_default_style wms_addthis"><a class="addthis_button_favorites" rel="nofollow"></a><a class="addthis_button_technorati" rel="nofollow"></a><a class="addthis_button_delicious" rel="nofollow"></a><a class="addthis_button_evernote" rel="nofollow"></a><a class="addthis_button_myspace" rel="nofollow"></a><a class="addthis_button_stumbleupon" rel="nofollow"></a><a class="addthis_button_friendfeed" rel="nofollow"></a><span class="addthis_separator">|</span><a href="http://www.addthis.com/bookmark.php?v=250&pub=_YOUR_ADDTHIS_USERNAME_" class="addthis_button_expanded" rel="nofollow">More</a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=_YOUR_ADDTHIS_USERNAME_"></'+'script>');
Update on Sun, September 5, 2010 at 2:12 PM by Registered CommenterPaul Cormier

New Digg Button Code

The source code examples above have been modified to support the new Digg button. Unfortunately, the original iFrame code stopped working.

The Twitter Re-Tweet Button

I tried replacing the Tweetmeme code with Twitter's own recommended Retweet Button. However, it just doesn't work using using my technique above. I'll need to investigate further.

SquareSpace HTML Snippets - Some Issues

SquareSpace has added an HTML Snippet Feature that allows you to add a snippet of code to each journal entry. Unfortunately, by limiting a snippet to 400 characters, they've somewhat limited the flexibility of what you can do with an HTML Snippet. You certainly can't fit more than two Social Buttons in a single snippet.

You can configure up to three HTML Snippets, but trying to style and align the buttons like you see at the bottom of this post becomes very difficult.

Update on Mon, March 7, 2011 at 2:14 PM by Registered CommenterPaul Cormier

Adding the Facebook Like Button to Your SquareSpace Website

Simply insert the code snippet below into the example code from the original post above. You may need to apply some CSS styling for "#wms_fblike" to get it to display and align exactly like you want it to.

The Javascript Code:

document.write('<div id="wms_fblike" height="80"><iframe src="http://www.facebook.com/plugins/like.php?href='+escape(Squarespace.Constants.OBJECT_PERMALINK)+'&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe></div>');

If you'd like to modify the appearance of the Like button, visit http://developers.facebook.com/docs/reference/plugins/like/ to get the iFrame-based code snippet.

Look at the resulting name=value pairs (e.g. colorscheme=dark) in the string and edit your code as desired.

Adding the Twitter Retweet Button to Your SquareSpace Website

This now works! Simply insert the code snippet below into the example code from the original post above, replacing _YOUR_TWITTER_USERNAME_ with your actual Twitter username. You may need to apply some CSS styling for #wms_retweet to get it to display and align exactly like you want it to.

The Javascript Code:

document.write('<div id="wms_retweet"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="_YOUR_TWITTER_USERNAME_">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></'+'script></div>');

If you'd like to add the tweet count to the button, replace the "none" in data-count="none" with either "vertical" for a big count label above the button, or "horizontal" for a smaller count label to the right of the button. See http://twitter.com/about/resources/tweetbutton

Article originally appeared on (http://www.webmasterymadesimple.com/).
See website for complete article licensing information.