Okay Geek Farm
How to install the Tweet Button on your Squarespace website
Brandon Davenport
What you need to do is head over to Twitter’s goodies page and you’ll find yourself at the Twitter Button setup. Remember, the following instructions are very important, and if you aren’t comfortable editing basic HTML code, I want you to follow these instructions as close as humanly possible. If you know what you’re doing, feel free to report any cool findings in the comments.
Step One - Set the parameters for your button
Head over to: Twitter’s setup guide for the Tweet Button
It’s time to add the Tweet Text. Instead if adding a title, or plain text (which you can do after), set your custom text to %TITLE% — this is a variable that Squarespace will use to convert %TITLE% to the actual title of the post. This is separate for each button meaning that each button will have it’s own title.
TIP: Feel free to add any other text you want! (Just don’t alter the special tag)
Now time to add the URL parameter. This is the same deal as the above — make sure the only thing in the text box is %PERMALINK% and nothing else. Random spaces and characters will cause Squarespace to ignore the tag, and not convert it to the unique post URL.
IMPORTANT: Do not add anything to this field. Random spaces will make it not work.
Step Two - Adding promotional Info
Here you can enter some Twitter accounts you want to promote. I entered “t3ch3lp” as the first one because that user will be mentioned in the Tweet, for example “via @t3chh3lp”. I put myself as the second account because after a user makes their tweet, that account will be presented to the user as a suggestion.
TIP: Make sure to add your website’s Twitter account as the first option.
Step Three - Installing the button with the provided code
This is the HTML code for your Tweet Button. If you’re feeling geeky, head over to Twitter’s API documentation to create your own custom button to improve the functionality and tweak it for your website.
If you’re ready to install the button you’ve just created, look at the text box to the right of your newly created button. You need to copy all of the text you see, and then paste it into Notepad or Text Edit (just in case your browser crashes), then you won’t have to repeat all of these steps again.
TIP: Read the API docs to create a better tweaked button for your website.
Step Three - Part II
Now comes the final steps to installing your Tweet Button. Head over to your Squarespace website, and select the “Structure Editing” mode, and then select the “Configure this page” pill button above your content. Once the side panel slides open, scroll down until you see “Post Display Configuration”.
Next click the module called “HTML Snippet 1” (shown above), and get your Twitter Button code ready. Make sure that you don’t already have code in the “HTML Snippet 1” because if you’re already using it, you’re going to get problems. Instead, select another snippet if the 1st one is already in use — You have 3 to work with.
Step Three - Part III
Paste the Tweet Button code into the editing window that pops up (once you’ve clicked the HTML Snippet). You’ll need to make sure to delete any blank spaces surrounding the code (for good measure), and make sure that no characters are missing.
TIP: Double check, and compare your finished code with the original.
This is our button - Test it out!
I decided to give you an example of the button in action. I used the “Vertical” count setting, along with a custom title. I did this to give you a chance to test it out, but also so you can see the Tweet Button can manually be added to any post you create.
Bonus Points
Feel free to add any tips below, along with any hidden goodies you found, or ways to make this tutorial better. Also feel free to share your website, and show off your new Twitter buttons! — Just make sure to include a link to your website, and a comment about the website, because no-one will know what it’s about otherwise (and please, don’t just spam a link).
Also, feel free to send tips to @t3chh3lp regarding the button
