Okay Geek Farm
How to install the Facebook Like button on Squarespace
Brandon Davenport
Yesterday, we showed you how to install the Tweet Button on your Squarespace website. Today we’re going to show you how to add some more punch to your blog posts — with the Facebook Like button. Remember, if you’re not comfortable with editing basic HTML code, don’t muck around — stay with the instructions and you’ll be good to go! — If you know what you’re doing, feel free to share some tips or answer some questions :D
Installing the Facebook Like button - Part I
These are the settings you will need
This is really easy, and you shouldn’t have any difficulty with it. All you need to do it head over to Facebook’s Like button set up page, and add %PERMALINK% as your URL. You need to add this, because Squarespace will see this, and transform it into your post’s URL — with each button having their own URL.
Configuring other options & Tips
Tip number one is always use the “Like” verb, and don’t use the “Recomend” verb because people are very familiar with the word “Like”, and they will naturally relate it to Facebook.
Also, if you can, use the “Standard” layout style instead of the “button_count” layout because the standard one will show your readers other friends that have liked your post. This will encourage them to like it as well.
Make sure to choose a font that is the same as your website’s. This will give the reader more trust in the button, as it feels more like a part of your website, and less like an annoying widget thing.
You’re ready!
Go ahead and click “Get Code” at the bottom, and make sure to use the iFrame code, and not the XFBML code (unless you have the Javascript SDK installed)
IMPORTANT: Make sure there is no spaces in the URL field, as the %PERMALINK% tag will be ignored by Squarespace if there are spaces.
Installing the Facebook Like button - Part II
Now, take the code that Facebook spits out at you, and copy it into Notepad or Text Edit (In case the browser crashes and you start punching your keyboard). Next you need to head over to your Squarespace website, and open Structure editing mode and then click Configure this page above your Journal.
Installing the Facebook Like Button - Part III
Once the slider folds out (after you’ve clicked the “Configure this page” button), scroll down till you see “Post Display Configuration”. Choose HTML Snippet 1, or if it’s already being used, choose another. You have 3 to work with.
TIP: If you know CSS, try combining multiple buttons in one snippet, and positioning them.
Part IV - Big Problem, Little Fix
IMPORTANT: This is where you really need to pay attention. When Facebook gives you the code (beginning of Part II) they muck it up. Instead of keeping the very important %PERMALINK% tag, they URL encode it, thus rendering your new Like button useless. Squarespace needs the exact characters (and the percent signs) to recognize it as a variable, and convert it to the correct URL for the post.
THE FIX: What you need to do is delete %25PERMALINK%25 (be careful not to delete any characters around it, as this will wreck the button) and replace it with the correct %PERMALINK% tag.
This is our button - Test it out!
You can now test out your new button on your Squarespace website, and let the Like counts tick up. Facebook also recently allowed the iFrame button to pop up a “share” box after users click the Like button, so after users “Like” your stuff, they can share it too!
