Adding the "Like" Button to every post

I just figured out how to add the Facebook "Like" button to every post in my blog.  For those of you who use squarespace, this could be pretty useful for you. You must have jquery for this to run.

<script type="text/javascript">
$(document).ready(function() {

$('.journal-entry-tag-post-body-line3').each(function(index) {
var url = $('.title a').get(index);

$(this).append('<iframe src="http://www.facebook.com/widgets/like.php?href='+url+'" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>');
});

});
</script>

Report As Spam Functionality

My client desperately needed a "Report As Spam" link for all comments on posts. So with a little javascript Magic, I came up with this little hack that creates a mailto link underneath the signature of a comment (make sure you remove the <p> tags):
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){

// get the parent id of the comment - this will help with the url you're sending
var parentId = $(".journal-comment-area-wrapper .comment .signature").parent().attr("id");

// get the url of the current page
var url = window.location.toString();

// since you're url probably has #comments in it, you'll want to strip that out
var cutoff = url.indexOf('#');
var newUrl = url.substr(0, cutoff);

// combine the url with the parent id for the direct link to the comment
var link = newUrl + "#" + parentId;

// create a mailto link that sends to the admin with the link to the spam post (change info@yourdomain.com to your email address)
var mailto = "mailto:info@yourdomain.com?body="+link+"&amp;subject=Flag%20comment%20as%20spam"

// append a report as spam link underneath the signature
$(".journal-comment-area-wrapper .comment .signature").append("
Report As Spam");
});
</script>

Adding Cufón for F*ckin' Awesome Fonts

I have been using Cufón on almost every squarespace site I build these days. It just adds a charm and uniqueness to every site without having to do any production work. Plus, it's pretty damn easy.

Step 1: Pick the font you want and bring it over to Cufón's converting website. It will spit out a piece of js code that contains all the info about your font.  Upload that and the cufon-yui.js to your storage area.  I usually make a js folder to hold all my scripts.

Step 2: In the header of your SS site, put the following code:

<script src="/storage/js/cufon-yui.js" type="text/javascript"></script>
<script src="/storage/js/FONT_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
   Cufon.replace('.content-navigation a,  h2', {hover: true});
</script>

Make sure to replace your font name with FONT_400.font.js

This will replace all your top nav links and h2's with the special font you picked.

Step 3: You may notice that your fonts are flickering before they switch.  You need to hide your selectors before they get converted to the new fancy cufon font.  Put the following in your custom CSS:

/* HIDE CUFON ITEMS */
.cufon-loading .content-navigation a{ /* for Cufon.replace('.content-navigation a') */ visibility: hidden !important; }
.cufon-ready .content-navigation a{ /* for Cufon.replace('.content-navigation a') */ visibility: visible !important; }
.cufon-loading h2 { /* for Cufon.replace('h2') */ visibility: hidden !important; }
.cufon-ready h2 { /* for Cufon.replace('h2') */ visibility: visible !important; }

Step 4: For the evil ie you may need to tell cufon to fire.  Put the following code in your footer:

<script type="text/javascript"> Cufon.now(); </script>

That's it!  There's other tips and tricks for cufon on their site documentation.  Good luck and have fun!