How To: Add Social Buttons to Squarespace

26 Replies

A few days ago I helped @tpsaras install social widgets to his Squarespace based foodblog Foodzine. Although Squarespace allows for a seamless implementation of social widgets, the catch here was to display them only under each post and not on the homepage.

First we had to create the necessary code for our Facebook and Twitter widgets, then add the code into HTML Snipsets via the Squarespace Website Management and finally hide the buttons from the homepage via CSS.

Getting the code for the social buttons

To get the necessary code we used the Facebook Like & Tweet Button pages. There are some details you should be aware of, mentioned bellow.

Facebook

At the Facebook Like Button page, just enter %PERMALINK% in the URL to like textbox and adjust all other settings according to your needs. I selected button_count as a layout style, chose not to show faces and also selected the segoe ui font from the Font dropdown list. I also changed the width into something more sensible.

Now just click the Get Code button and copy the iframe code to your clipboard because there’s one little change you have to do before pasting it into your HTML Snippet 1 box.

It seems that Facebook chooses to alter our %PERMALINK% value and changed it to %25PERMALINK%25 so all you have to do is paste the code into a text editor and change %25PERMALINK%25 back into %PERMALINK%.

Here’s our version of the final code we added to Foodzine:

[php]<iframe src="http://www.facebook.com/plugins/like.php?href=%PERMALINK%&layout=button_count&show_faces=false&width=79&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:79px; height:21px;" allowTransparency="true"></iframe>[/php]

Twitter

Now let’s go ahead and create our Tweet Button.

In our case again we selected a Horizontal count button and for Squarespace you’ll have to type %TITLE% in the Tweet Text and %PERMALINK% in the URL section. Check the images below!

Now just take the generated code from the box and copy it to your text editor.

Here’s our Tweet Button code for Foodzine:

[php]<a href="http://twitter.com/share" class="twitter-share-button" data-url="%PERMALINK%" data-text="%TITLE%" data-count="horizontal" data-via="foodzine">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>[/php]

Inserting code to Squarespace

After logging in to your Squarespace website management page, switch to Structured Editing.

Now at your contents upper left area you will see a button named Configure this page

The Journal Page Configuration page will popup, so just scroll down the Post Display Configuration section.
In the Unused Post Elements section you will see HTML Snippet 1 & 2. Drag them up to the Example Post title right to the left of the by Author element.

Now click on HTML Snipped 1, paste your Facebook Like button code like shown below and click Hide & Save.

Perform the same actions for the Twitter Button but use the HTML Snippet 2 element instead.

Finally click the Save Page Configuration button and you’re done.

Hiding the Social Buttons from the Homepage

If you wanted your social buttons to be visible in your homepage, you can stop reading here. But if (as we did) want your visitors to be able to see your Social Buttons only on the bottom of your posts pages then we’ll have to do some simple CSS hacking 🙂

After digging a bit around with Firebug I saw that the homepage consists of a div named list-journal-entry-wrapper that wraps (apparently) your individual posts to create a homepage. What we’re going to do here is hide the buttons if they’re children of the list-journal-entry-wrapper div.

Here’s the code you need to add to the bottom of the Custom CSS editor after switching to Style Editing.

[php].list-journal-entry-wrapper .post-snippet-1 { display: none; }
.list-journal-entry-wrapper .post-snippet-2 { display: none; }[/php]

That’s it for today! In one of my next posts I’ll show you how we added the Google custom search Button and how we placed it next to our logo on the header.

PS: Did I mention that Foodzine is the top featured website in the Food & Drink examples section of Squarespace? 😉

26 thoughts on “How To: Add Social Buttons to Squarespace”

  2. Chris

    Hey thanks so much for the help. I have a problem with the numbers on my twitter counter being re-set to 0 though any help on that?

    Thanks so much

    Reply ↓
  8. Georgina

    Thank you SO MUCH! I was having a terrible time finding this info elsewhere on the Internet.

    So grateful you posted this, looks like you helped many others in the same situation! 🙂

    Reply ↓
  10. Susan K.

    Thanks for the wonderful step-by-step tutorials. I got the TWEET button added easily, but like Karen above…I get the “href entered is not recognized as a valid URL”. I am assuming Facebook changed the rules – have you heard of any work-arounds?

    Thanks again!

    Reply ↓
  11. George Tasioulis Post author

    Hi Karen and Susan,

    Sorry for not getting back to you earlier.
    I fixed the syntax highlighting issue on my blog and now you’ll be able to copy/paste the correct facebook code.
    You should then get rid of the error 🙂

    If not, please let me know and also upload a screenshot.

    Reply ↓
  12. Susan K.

    Hi George! Thank you SO MUCH for your response, and your fix!

    I still get the error message when I try to use the %PERMALINK% myself in the Facebook LIKE button generating code, but I just copied and pasted yours and it seems to be working now. Thanks!

    My only question now, is there a way I can change the size? If you look at my blog http://www.scrapylandblog.com the LIKE button is much smaller, I’d prefer it to be the same 29px high and lined up with the PIN IT and TWEET buttons.

    Any suggestions? I fiddled with the px. height/width in the code, and that’s what seemed to push the icon to the next line.

    again – much appreciated!!! your assistance and tutorials have been SO helpful!

    Susan

    Reply ↓
    1. George Tasioulis Post author

      Hi Susan,

      Great to hear that you got it working now 🙂
      Could you try the following code and see if it lines up with the other two buttons on your site?
      [php]— Code removed —
      Use the link to pastebin below[/php]

      Reply ↓
    1. George Tasioulis Post author

      Hi Peter,

      Are you sure you have dragged the “HTML Snippet 1” and “HTML Snippet 2” components for the “Unused Post Elements” area to the “Example post” area?

      Reply ↓
  14. Susan K.

    Hi again George…I tried the code above, and WOW things went crazy! I got this huge rectangle that is actually the very upper left corner of the blog home page…it’s BIG and it’s definitely not anything related to Facebook. hahaha – but it was fun to figure out how to change back!

    I went back to using the code you “fixed” yesterday for me…so the LIKE button is back there, and now it’s on the same line as the PINT IT and TWEET buttons. It’s still small, but for now – I’ll settle for small.

    Thanks so much…I took a screen shot of the crazy weirdness, if you want to see it. I don’t know where to sent it…but you can see what the code did…

    have a super day George! Thanks so much!!

    Susan

    Reply ↓
    1. George Tasioulis Post author

      Hey Susan, sorry it didn’t work out after all. Maybe the screenshot will help me figure out what was wrong with the code.

      Try uploading it to imgur.com and post the URL here 🙂

      Reply ↓
  15. Susan K.

    this was the code I copied from your comment above…

    iframe src=”http://www.facebook.com/plugins/like.php?href=%PERMALINK%&layout=button_count&show_faces=false&width=79&action=like&font=arial&colorscheme=light&quot; scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:79px; height:29px;” allowTransparency=”true”></iframe

    with the addition of the before and after.

    This string of text
    href=”http://www.facebook.com/plugins/like.php?href=%PERMALINK%
    is in there twice, I wonder if that made for the weird blog-snapshot appearance?!?!?!

    🙂

    Reply ↓
    1. George Tasioulis Post author

      You’re right! Something must have gone wrong while copying/pasting code.
      Here’s the correct code:

      [php]— Code removed —
      Use the one from the pastebin link below[/php]

      In case it comes out wrong again (could be the syntax highlighting plugin…) Yeap again the code changed after I submitted the comment.. don’t know why… I’ve uploaded the code snipped to pastebin.com here: http://pastebin.com/zpxc5RWB

      Try it out and let me know 🙂

      Reply ↓
  16. Susan K.

    Geroge – here is the screen shot of the crazy error! WERID huh???

    http://imgur.com/NTKDZ

    Anyway – I just put in the new code that you put on pastebin THANKS!!! It’s still a little small LIKE button, so I’m just going to assume that Facebook likes small little buttons, and doesn’t let them be customized!

    IT’s back to looking okay now – thank you SO MUCH for all of your help!!!!

    🙂

    Reply ↓
  17. Tina

    Hi, I a hoping you can help since I got the twitter and Like button off your great site! When I tweet or like a specific post the “wall” pic on my facebook, isn’t the correct image- it takes me to the Home Page-LogIn screen. Is there a way to fix this. I see that when I like the foodzine post it has the accurate image come up. Guidance would be appreciated!

    Thanks

    Reply ↓
  19. Jackson

    Does this work for Squarespace 6, too? Or is this only for Squarespace 5? How do we do this for 6?
    Thanks!

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.