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 src=""></script>
<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="'+url+'" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>');



  • Bendistraw says:
    April 30, 2010

    I tried but am so bad w/ code. You’ll have to help 🙂 I’ll trade for a yummy meal!

  • Marissa says:
    May 1, 2010

    You’ll need to make sure you have jquery first
    <p><script src=""></script></p&gt;

  • Josh Braaten says:
    May 3, 2010

    Great guide! Quick question… do you put this code on every blog post, the header/footer of the Journal configuration or in your site header/footer?

  • Kris Black says:
    June 2, 2010

    If you want to use this method to apply this to non-Journal entry pages you will need to change this line of code:

    var url = $(‘.title a’).get(index);

    to this:

    var url = $(‘.active-module a’).get(index);

    Basically, this is grabbing the URL for the page that is being viewed.

  • Kris Black says:
    June 2, 2010

    Oh, I forgot to add that you will need to change where to add the Facebook Like button. Since you won’t be adding it to a Journal Entry page you will need to change this:

    $(‘.journal-entry-tag-post-body-line3’).each(function(index) {

    to add the link to another common CSS selector in your page layout. For a site I created I just added an HTML widget with a <div> that had a unique id like this:

    <div id="facebook-like"></div>

    then change the script to this:

    $(‘.facebook-like’).each(function(index) {

  • rates says:
    June 5, 2010

    Hi, thanks for posting this!

    Is the extra height (80 pixels) to alow profile pictures to display? What happens to extra pictures that dont fit in the space, do they just get cut off? ( that’s what I hope happens) I dont have enough friends liking stuff to see how that part works :^)

  • Jason Smith says:
    June 5, 2010

    Hi Marissa! Thanks for this little trick. I’ve been looking around for ages trying to find this solution.
    Just wondering though, is there a way to get the button to appear above the ‘tag’ section and with some space between them?
    Thanks again 🙂

  • Marissa says:
    June 5, 2010

    Hey Jason, you can definitely move it to wherever you need it to be. To put it above the tags you should actually append it to the body of the journal entry. You can do that by subbing $(‘.journal-entry-tag-post-body-line3’) for $(‘.journal-entry .body’) and it will put your iframe at the bottom of your journal entry. You can see that I’ve switched it out. Good luck!

  • Jason Smith says:
    June 6, 2010

    Thanks heaps Marissa 🙂
    Just got another question though… when I insert the code it doesn’t seem to make the Like Button post specific, i.e Every Like button on every one of my blog posts reads exactly the same and isn’t individual for each post, on your blog posts for exapmle, some posts have 10 ‘likes’ and others have 3 ‘likes’, my ones are all the same number of like for every post.
    Is there a way to get around this?
    Let me know if you don’t understand, Im not the best at explaining things! 🙂

  • HandH says:
    June 14, 2010

    this is great- thank you for sharing, i found the link via the squarespace mans. just a question if anyone else has encountered the problem i’m seeing. which is that when someone "likes" an entry on my blog i’m seeing something like "36,537 people like this" which clearly is not true. so i’m wondering if this is some kind of facebook bug or perhaps something i’m doing wrong w/ the implementation?

    any ideas much appreciated. thanks!

  • Marissa says:
    June 14, 2010

    Hey HandH –
    are you sure the link that you are "liking" is your blog and not just squarespace in general? Can you post a link to your site?

  • HandH says:
    June 15, 2010

    hi m- thanks so much for replying! i’ve set the code in the header for the top html section of the site. perhaps i’ve done this incorrectly though…the website is:

    the journal is actually nested in an html page. i’m not certain how to place code in just the header for the journal itself though…any ideas?

  • Maxwell says:
    June 19, 2010

    Thank you very much for that great tip, worked like a charm. My only question is how to right justify it? Right now it is defaulted to go on the left. Either way thank you, worked great.

  • Marissa says:
    June 23, 2010

    Hey HandH – it looks like when I hit the "like" button on your page it said "Marissa likes on" so obviously something isn’t quite right. You’re having a problem with the line

    var url = $(‘.title a’).get(index);

    I would do an alert(url); to see what’s happening there and see if you can figure out whether you’ve put your code in the right place.

  • Davy Rudolph says:
    June 23, 2010

    Hey Marissa,

    This is great. Thanks for posting. I’ve already added it to a couple of my sites.

    I had a question about how you positioned the button to show up below the posts. A client of mine wants to add some google ads below his posts and I’m not quite sure how to accomplish that. Could you help?

    the site is and any help is appreciated.


  • Marissa says:
    June 24, 2010

    Hey Davy,
    so you could probably use the same thing. This is just basic javascript appending. So like I did with mine (subbing $(‘.journal-entry-tag-post-body-line3’) for $(‘.journal-entry .body’) and it will put your iframe at the bottom of your journal entry.) to put it in the journal entry itself instead of the post details. You would just swap out the facebook iframe for whatever other code you want.

  • Jason Collin Photography says:
    June 24, 2010

    Marissa, much obliged for sharing this code with Squarespace users. I’ll be sending friends here to get the code too!

  • Jason Collin Photography says:
    June 24, 2010


    I find this blog post via this discussion thread:

  • Jonny Rowntree says:
    June 24, 2010

    Is there any way you can get the block ‘Like’ button on your posts instead of the sentence? I prefer that. Thanks

  • Rick says:
    June 24, 2010

    I found you need to adjust the code to have the Like for each separate blog entry:

    This section needs to look like this:

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

    it’s working on a website for a team I run:

    If you don’t, what happens is if you have other links on your website, you’re actually apply the Like to that website and not the actual blog summary.

  • Christina says:
    June 24, 2010

    Hi Marissa — I found my way here from a SS twitter post 🙂 I just wanted to let you know that it implemented seamlessly into my site and RIck’s suggestion was also helpful to get it going for each individual blog summary.

    My question is similar to Jonny Rowntree — is there any way to get the more simple "like box" without profile pictures? I would love to cut down on the space this takes up in the page and this seems like a good solution for me.

    Any advice you can give is appreciated! This is a great post and a solution I have been looking for forever!

  • Jason Collin Photography says:
    June 25, 2010

    @Rick and @Marissa

    I came back here because the like button is appearing on my main blog (journal) page with either Marissa’s or Rick’s code in place. However, when I click on an individual blog post, there is no like button at the bottom of that individual post page with either Rick or Marissa’s code.

    Is it possible to get the like button to appear on individual blog posts?

    Thank you very much….

  • Jason Collin Photography says:
    June 25, 2010

    Never mind my question! You know how it is, you write the question, then it helps you find the answer yourself. Instead of putting the code in the blog (journal) header I put it into the code injection point in the home page in website settings. Now it’s working on both the blog page and the individual blog entry!

  • Marissa says:
    June 25, 2010

    Thank you rick for the tip. I will update with that info.

  • Dane Deasy says:
    June 25, 2010

    Ya know, I was very curious to use this, but you’re explanation helps nothing. Sure you provide some code, but you fail to mention where to put it. Does it have to be in the html of every post? In one of the customize sections of my Squarespace site?

    It’s really unclear what the heck any of this is talking about.

  • no says:
    June 28, 2010

    Where are we suppose to put this code?

  • Marissa says:
    June 30, 2010

    Hi Dane,
    you should put the code either in the header of the site or page or you can put it in the footer. It depends on what kind of account you have and whether or not you have code injections. You DO NOT have to put it in every post. That’s the point of all this. Add code in once and forget about it. If you want to email me I can help you further.

  • JP says:
    July 4, 2010

    Just wanted to say thanks, Marissa. Works flawlessy. I’m a newbie with SQ and so far so good. May I ask, since adding this script into the code injection, there is now a considerable amount of white/empty space between the LIKE button and the BLACK LINE which divides journal posts–anyway around this?anyway around this for a non-coder, technically inept person? either way, thank you!

  • JP says:
    July 5, 2010

    Nevermind, I figured it out! I just made the hieght pixels smaller, thanks! Now all we need is the code for Tweetmeme!

  • kay says:
    July 7, 2010

    thank you so much. this code saved my life cuz for the life of me, i couldn’t figure out what mine was missing.

  • Clea says:
    July 21, 2010

    Oh works so well! Thankyou!

  • Nick says:
    July 31, 2010


    Thank you SO much for posting this! I had looked all over trying to find script for this.

    Thanks 🙂

  • datingkiwi says:
    August 16, 2010

    I just received the following answer to this issue from an administrator a few minutes ago:

    "We actually just introduced a new feature within journal pages called HTML Snippets. These are elements like the date, category, and author tags that allow you to add HTML code that will automatically be used for each journal entry. We have a guide for using the Snippets here: (

    I just tried it in my site and it perfectly worked 🙂

    Thanks Marissa for starting this discussion.

  • MacTipsDaily says:
    October 1, 2010

    Thanks so much. I just added it to my site and it worked like a charm. I still need to play around with the placement, but for the most part, looks and works great. I just used the code at the top of your post and I put it in my 'Extra Headed Code – within HEAD' area of my squarespace blog and it worked great. I didn't need to use any of the edits in the comments section as some people did above.

  • Kevin says:
    October 16, 2010

    I have a photography site, and I'm trying to automatically add the FaceBook Like button above each photo in my Picture Galleries. These pages don't have HTML Snippets like Journals. I assume I need to add similar code to the pre-body HTML, but I'm not sure how to specify it for the individual photos.

    Anyone have code that would work for this?

  • Marissa says:
    October 20, 2010

    Hey Kevin,
    does each of your photos have a separate page associated with it? Can you post a link? I'll help you out.

  • Ryan says:
    November 15, 2010

    Hey Marissa, first wanted to thank you for your help, as I am a newbie when it comes to this stuff..

    My one question. I have the like button underneath each blog and after I liked it, it says my name and has my profile picture, but I cant see the profile pictures of who else liked it. It only specifies the number of people who liked it. Can you please help?

  • Derik Gutowski says:
    December 21, 2010

    thankyou thankyou thankyou thankyou thankyou thankyou thankyou thankyou!

  • Seth says:
    February 3, 2011

    Hi Marissa this rules but I have one problem: I have no clue about JQuery. Do you think you could help me out? I am looking to add the "Like" button to each post. Honestly if you wouldn't mind e-mailing me that would be awesome. If not that's cool too but I would really like to get this taken care of, thank you.

  • Johanna says:
    March 25, 2011

    Thank you for all your help on this subject. I have inserted the XFBML code from facebook and then replaced my URL with "%PERMALINK%"

    The only problem that I am now running into is that no thumbnail is popping up. Before I replaced my url with the permalink it would bring up how ever many photos where on that page.

    I am an amateur at this and just started building my site using Squarespace so any help you could give me would be great.

Comments are closed.