How to Add Affiliate Links in Squarespace
Wondering if you can use affiliate links on your personal website? You CAN do this in Squarespace. Affiliate marketing allows you to earn a commission by promoting a product or service and there are a few simple steps to follow.
Update 🎉
Adding affiliate links to Squarespace just got a LOT easier!
You can still follow the steps below if you want to use a code or markdown block, but if you want a simple solution that works for text links, images, and buttons, I recommend Will Myer’s Affiliate Link Genie. (Use coupon code CP10 to save 10%.) This is a quick plugin that, once installed, allows you to use the normal link editor to add sponsored tags to all your links. If you do affiliate marketing on Squarespace, I consider this a MUST HAVE.
A note for all the code geeks like me… I used to be concerned about a Javascript (plugin) solution to add relationship tags to links, but I was finally able to find an asnwer in the official Google documentation about how Google treats that process. “Once Google's resources allow, a headless Chromium renders the page and executes the JavaScript. Googlebot parses the rendered HTML for links again and queues the URLs it finds for crawling. Google also uses the rendered HTML to index the page.” So Google is using the rendered Javascript for its page indexing. Hooray!
Step 1. Become an affiliate.
The simplest way to find affiliate programs is to Google the product or service you wish to promote and affiliate program (like "Amazon affiliate program"), or simply take a peek in the company’s website footer. For example, I’m am Amazon affiliate (click here to save 40% on your first Wag pet food order!) and if you look in their website footer you can click “Become an affiliate” to get started. Some affiliate programs are invitation only. Each program that you join will provide you with an affiliate link or links to use on your website.
Step 2. Provide value.
You can certainly just put a list of affiliate links on your site. And, to some degree, I’ve done that with my Resources page. But you’ll see more return if you create valuable content about the service or product you are promoting. You can see examples of that in my blog on my posts Why Teachable is the Best Online Course Platform (for me, anyway) and Best Squarespace Plugins to Level Up your Website.
Want to learn more about how to make money with your Squarespace blog?
This self-paced course is perfect for anyone who has a blog on Squarespace or is interested in starting one.
Step 3. Disclose your affiliate links.
On your page or in your post, add a disclaimer that you are using affiliate links and will be compensated if someone makes a purchase. This is an FTC-mandate. You can see an example at the top of this post.
If you’d like to add an affiliate disclaimer automatically to each blog post, you can do that by adding a bit of code. This particular code adds the disclaimer automatically at the top of your post, underneath the title and meta data.
In Settings > Advanced > Code Injection paste the following into the FOOTER box. (If you’ve already added the first line of code elsewhere, you don’t need to include it again here.) This code works for Squarespace 7.1 sites.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function () { $("<p class='disclaimer'>Type your disclaimer here.</p>").insertBefore(".blog-item-content"); }); </script>
Swap out Type your disclaimer here. with your own disclaimer. Next, add the code to style the disclaimer to Design > Custom CSS. You can change the padding, color, and text styling to match your brand:
.disclaimer {
background-color: #f6f6f6;
padding: 20px;
font-style: italic;
}Step 4. Add sponsored tags to affiliate links using a code or markdown block OR just use Affiliate Link Genie
It’s best practice to add a sponsored tag to affiliate links. If your site contains many sponsored links that aren’t designated as nofollow or sponsored, it could negatively affect your search rank. This requires an extra step in Squarespace, using a markdown or code block. Here's an example of what you'd put in a Markdown Block or Code Block for an affiliate link:
<a href="http://affiliatelinkhere.com/" rel="sponsored" target="_blank">your link in text</a>
You can use rel="sponsored" to let search engines know that your link shouldn't count in ranking the linked page and that it is a sponsored or affiliate link. And target="_blank" opens the link in a new window, which is best practice for linking to sites outside your own.
If your links aren’t underlined automatically, you can add some code to Custom CSS to force an underline. I did this for my Code Blocks on my Designer Resources page by adding the following code to Design > Custom CSS. For Markdown Blocks, replace .code-block with .markdown-block and play around with the text and underline colors.
.code-block a {
color: #ed834a;
padding-bottom: .05em;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(237,131,74,.3);
}Step 5. Add a Disclaimer statement on your website.
A disclaimer statement can limit the liability for the outcome of the use of your site. I recommend Termageddon for website policies. They automatically update the text on your site when the laws change.
What about Links for Buttons and Images?
Unfortunately, Squarespace does not have a way to natively add the rel attribute in their link builder. Definitely take a look at the Affiliate Link Genie plugin for this!
