Amazon just made available a "Send to Kindle" function that allows bloggers to make it easy for people to read their posts on Kindle reading devices of all types. As a big Kindle fan, I was intrigued, but couldn't find any resources at hand to make it easy to set up on Squarespace websites.
I didn't want to just give up, so I decided to figure it out. It turns out that it's actually pretty easy. I just had to work out the CSS classes Squarespace uses and then work out where to put the code snippets Amazon generates.
Lucky for all my fellow Squarespace users, I've done all of this already and am happy to share!
Squarespace CSS
For marking the title, author and publication date, select Custom CSS Selectors.
- Article Title: .entry-title
- Article Author: .author
- Article Publication Date: .date
For marking the main body of content on your pages, again select Custom CSS Selectors.
- Main Content Body: .sqs-block-content
I didn't exclude any content. If you want to do that, more research will be required, I'm afraid. Likewise, my content is not paginated, so you'll have to do a bit of investigation if you have to cope with that.
Code Injection
The code injection part of the process is fairly straight-forward.
Generate widget code on Amazon's Send to Kindle page first. It gives you code for two steps. Step 1 generates javascript code to make it work. Step 2 generates HTML code using the custom CSS selectors.
From the Settings menu, go to Code Injection.
The Javascript from Step 1 gets pasted somewhere into the Footer code of your site. This makes it functional on every page of your site. No matter how many blogs you have on your site (I have three,) this one block of code will work for all of them.
The HTML from Step 2 gets pasted into each blog individually.
Go to the Content Manager and take a look at the blog you want to apply Send to Kindle to.
Click Blog Settings, and go to Advanced from the top.
Paste the Step 2 HTML code into "Post Blog Item Code Injection."
Advanced Link Placement
Because the Step 2 code is HTML, you can theoretically put it anywhere you want in a blog post. Putting it in the footer will place it at the bottom of a post. Don't put the code in "Page Header Code Injection"; you need it placed in the blog post, not on the page containing the blog post.
If you want it elsewhere within a blog post, like at the top, you can insert an HTML code block into the post and put the HTML code there. If you decide to go this route, you will have to do it individually for EVERY blog post you want to use Send to Kindle with. Unfortunately I haven't figured out a way to edit a blog post header yet; I assume there is no such thing in the current implementation.
If anyone does look into content exclusions and pagination, I'd love to hear about it. Hope you found this helpful!
