The UnofficialButton and Bookmarklet

Extending the Slack Button for embedding and page sharing

The latest Slack product release is the Slack Button (blog post, docs), which lets developers integrate the ability to post directly to Slack from within their own app.

This is incredibly powerful: it increases the number of inputs and nodes to Slack. Slack is impressive for being one of the first enterprise products to experience consumer-like virality, and is quickly moving towards being a verb (“Slack it!”)

However, the Slack Button doesn’t currently allow you to embed the button on a webpage to quickly share that link (like the ubiquitous Facebook and Twitter share buttons). I can understand the app-centric approach that SlackHQ took in building the Slack Button, so I thought it would be a cool project to extend the Add to Slack functionality to webpages in the form of two products:

Embeddable Add to Slack button for webpages, the equivalent of the Facebook and Twitter share buttons that are ubiquitous on websites today (a publisher tool)

Bookmarklet for users to share any page from their browser (a consumer tool, and doesn’t require the publisher to embed the Slack button).

My brother Richard and I hacked this together in a day, and we wanted to share the product with you all.

Try it!

Click to share this page to Slack

Bookmarklet

Drag this button to your bookmarks bar

Send to Slack

Disclaimer

This Unofficial Slack Button is a 24-hour hack by fans of Slack, and is in no way affiliated with Slack Technologies.

How to add a Slack button to your website

The embed code is an easy Javascript embed:

Copy and paste that on any page, and it’ll give you a button that looks like this:

Button small f4ff62fd1b5fc62b88e05b4fcfb99315bdbe092c4759deaf1e198d7c8800d2c3

By default, the button autopopulates the composer with the URL the button lives on.

Custom URLs

If you want to customize the url the button auto-populates in the composer, add the following:

data-url="yourURL"

to the <a> tag. This is helpful for example when you’re using this button in a template.

User Flow

The first time a user clicks the Slack button, it will prompt them to OAuth to the Slack team they want to post to.

Oauth preview 6385977c5f17f870f14d88929fb6a753726ce8cfd4269cf974d8dfc4000e67e7

After that, the button will then pop-up a Composer window, and auto-fill the form with a link.

Composer preview 66f3e375e54068de7de7d718462bc6f91e7a004972fce7bf10d074c64e5ecc54

Some technical specs for the counter

The counter will increment only once per person, per team, to prevent spamming.

If you are on multiple teams, the counter will count each share to a team as a single share.

Multiple users in the same team can share and increment the counter, so we encourage you to get your friends to all use the share button on webpages you like.

Limitations

Due to the way the Slack OAuth API is set up, we couldn’t find an easy way to allow multiple Slack team auths with different email addresses associated with those teams.

So for now, you’ll have to log out and re-auth if you want to post to a different team. If you’ve already logged in to multiple accounts on your browser, it theoretically should give you a team selector for which team you’d like to auth for the button.

The flow makes it easy for you to log out either on the composer page or on the post confirmation page, if you want to re-post to a different team.

Feature Requests

We are currently rate limited by Slack’s API, so if the button errors out, try again.

Schedule posts for later, a la Buffer

Link tracking and analytics for publishers

Better parsing of specific websites when they’re posted to Slack

Feel free to message us on Twitter at @wp and @richard_peng if you have an idea!

Built with ♥ by William Peng and Richard Peng