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:
Firstly, all of the code is inserted using Code Injection:
This technique should work equally well pasting the code into the Website Footer.
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.
The source code examples above have been modified to support the new Digg button. Unfortunately, the original iFrame code stopped working.
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 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.
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.
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