Square Market Item Embedding
Two months ago we launched Square Market, the online storefront for neighborhood businesses everywhere. Since launch, our item pages have allowed merchants and visitors alike to share their favorite items with their friends and followers on Twitter, Facebook and Pinterest. This feature allows merchants to reach more customers and helps buyers to find interesting items faster, wherever they are browsing.
While sites like Twitter and Facebook generate a ton of traffic and many people have strong followings there, we also know that people like to run their own websites, blogs and Tumblrs where they can go into more depth and focus on what's most important to them. We've heard from both merchants and Square Market visitors that they'd like to share items on these sites too. Today we're announcing a new item embedding feature to help make that happen.
What It Does
Our embedding script turns links like these:
- Jamais deux sans trois pourpre orange from La Valise d'Alice on Square Market
- Tokidoki Cactus Rocker from EDGE TOYS on Square Market
- Hair of the Dog Bitters from DRAM Apothecary on Square Market
- Spoon Small Colorblocked from Lydali on Square Market
Into full-featured item detail blocks like these:
All the HTML you need to embed a single item is included in the embed widget on Square Market item pages. To get started:
- Click the <> embed icon, found alongside our existing sharing icons:
- Copy and paste the HTML into your own site:
- There is no step 3! You can use the preview to see what your embedded item will look like in your page:
If you prefer to write the HTML yourself, simply:
- Add a link to the item you're interested in.
class="sq-market-embed"to the link.
- Include the Square Market
embed.jsscript in your page.
You only need to include the
We've written several Square Market embedding examples that you're free to adapt for your own site. You can explore the samples on our square-market-embeds github project.
What Item Embedding Does
The code we give you to add an item to your page does two things: it includes a normal HTML link to your chosen item and it includes a script tag which replaces the link with an iframe containing the full content of the item.
For example, if you include a link to Jamais deux sans trois pourpre orange from La Valise d'Alice:
<a href="https://squareup.com/market/la-valise-dalice/jamais-deux-sans-trois-pourpre-orange" class="sq-embed-item"> Jamais deux sans trois pourpre orange from La Valise d'Alice on Square Market </a>
And the Square Market embed script:
<script src="https://cdn.sq-api.com/market/embed.js" id="sq-embed-js" charset="utf-8"></script>
You'll see the following content on your finished page:
Here's my checklist for any new project:
- Make it work.
- Make it work right.
- Make it work fast.
To make it work, we had a few different options. Conventionally, when services offer an embedding feature they usually do it with an
iframe or a link and a script. We chose the latter. Behind the scenes we use an iframe to achieve the desired functionality, but we chose the script to keep things as flexible as possible.
For example, in future we might want to optimize the case where a page contains many items. With a script approach we'll be able to do that without asking people to change their existing embeds. With an iframe approach we'd be committing to serving those exact iframes forever (or risk breaking external sites). We want to add new features and respond to your feedback quickly; the script approach enables that most effectively.
To make it work right, we made sure that the script we ask you to add is small, served securely over SSL, and works across a wide range of devices and browsers. The embed uses a responsive design, so it adapts to the window size of the device you're using and is legible across mobile, tablet and desktop browsers.
Lastly, to make it work fast, we're serving the embed.js and images from a CDN. We also made a special template just for the embed that doesn't require all of our shopping-cart and checkout functionality, so it's served quickly and can be cached more aggressively.
The combined requirement of SSL and CDN means we're serving the script from a new domain,
cdn.sq-api.com. You can count on us to keep this domain highly available so it won't affect the quality of your site.
This is version 1.0 of the item embedding feature, we'd love to hear from you about how you're using it. If it doesn't meet your needs or live up to your expectations for content you include on your own site, please let us know that too. For specific help or bug reports, please contact our Help Center. For general feedback on the feature and anything outlined in this blog post, feel free to use the comments below this post.