With Snapchat's Creative Kit for Web and Shareaholic's social sharing toolkit, publishers and brands can add Snapchat share buttons to their website so Snapchatters can share content from a mobile or desktop website into Snapchat.
Each shared Snap can even have a custom-branded Sticker in addition to a link to drive traffic back to the original content on the website, giving you free distribution inside Snapchat, and the ability to drive traffic back to your website.
You can setup Snapchat Share Buttons on your website in 4-quick steps:
- Install Shareaholic on your website (instructions)
- Enable a Share Buttons App
- Enable Snapchat button within Share Buttons App
- Whitelist your domain with Snapchat (scroll down for how-to instruction)
How to whitelist your domain with Snapchat
If anyone tries to share content from your website without your domain being whitelisted with Snapchat they will arrive at the following screen instead:
When whitelisted, they will arrive at a screen like:
In order to whitelist your domain with Snapchat, you’ll need to register a new Snapchat App. Don’t worry – it sounds complicated, but it is very easy, free, and your application does not need to do anything other than specify which domains to whitelist. If you already have an existing Snapchat App, make sure skip to step N. Either way, it's easy to setup.
- To start, navigate your browser to the Snapchat Developers page. You'll need to login to your Snapchat account.
- Click on the blue cross button to create a new app
- Write in the name of your web app (app icon is optional). Pick a simple name, like your website's domain or name.
- Select "Creative" under "Kits"
- Ensure that “Web” is selected underneath both "Development Environment" and "Production Environment"
- Add the public URL(s) for your domains under “Whitelisted Attachment URL Domains”
- You're done! There is no need to submit your app for review.
Share Custom Branded Stickers for Every Page (optional)
Each page of your site can have its own custom sticker by adding the
snapchat:sticker meta tag to the
<head/> of your pages. Make sure that you specify the full URL. There is a 1-hour cache on sticker changes, so after you change a sticker you may want to wait and try again later, or test the same URL with a unique query parameter.
<meta property="snapchat:sticker" content="https://kit.snapchat.com/ckweb/test/image.png" />
- Transparent background
- Less than 1MB
- For static stickers use PNG
- For animated stickers use WebP (GIF is not supported)