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:
- Full automation. I did not want to paste chunks of code into each of my journal entries.
- I want to avoid or minimize any delays in the rendering of the page content.
- These buttons should not attempt to display on anything but the full journal entry page.
- Should NOT rely on JQuery or any other libraries.
- Cross-browser compatibility of course!
How it was achieved
Firstly, all of the code is inserted using Code Injection:
- Go to menu Website Management > Website Settings > Code Injection
- Insert the code below in the Injection Region: Post-canvas HTML
- Modify the code where indicated.
This technique should work equally well pasting the code into the Website Footer.
- 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";
- Replace the string _CURRENT_MODULE_ID_ below with this numeric value.
- Replace the string _YOUR_ADDTHIS_USERNAME_ with hmmm. your AddThis Username!
- Modify your site's CSS to position and display the buttons as needed using the assigned div id's.
- 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.
IE iFrame issue
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.
Modifying the AddThis buttonsI 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:
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.
Adding the Facebook Like Button to Your SquareSpace Website
document.write('<div id="wms_fblike" height="80"><iframe src="https://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 https://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
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 https://twitter.com/about/resources/tweetbutton