Background

Once upon a time, Tighten—an entirely distributed team—did all of our chatting in Campfire. Like many Campfire-enabled teams, we had a HUBOT that we used for primarily silly purposes. When we moved to Slack, our HUBOT (which we named named Goodbot, because it was a good bot) moved with us. Goodbot stood as a primary purveyer of semi-topical GIFs to lighten our days.

Unfortunately, due to various maintenance reasons (and the removal of the free tier on Heroku), Goodbot was retired. And on that day there was great Sadness.

For a time after transitioning to Slack, we used the Giphy Integration. But Giphy's (lack of) intelligence meant the humor mainly came from how poorly Giphy matched what you were trying to get a GIF of.

At this point, I became a ninja at rapidly searching for GIFs using Google Advanced Image Search. I was fast, but it still took at least seven distinct actions to get the perfect GIF pasted into Slack.

I figured that everyone else at Tighten could benefit from Advanced Image Search, so why not try to program something into Slack? Turns out this project took less time than to write this post, so I thought I'd share the process with you.

Once we're done with this project, you'll be able to retrieve a link for a custom GIF search, using only /gif awesome gif search terms. Best of all, Slackbot will prompt the Google Advanced Image Search link only to you, so you'll be keeping your channel tidy and your clever GIF searches secret.

How to add a Slack Slash Command

First, log in to your Slack account and head to your Integrations settings panel. At the bottom of this panel, you'll find the DIY.

We want to add a Slash Command. Let's name it something simple like /gif.

Slash commands send out an HTTP request (we'll use POST) to the URL of your choice with a payload which includes any arguments you passed to the command. Any text that comes back from this HTTP request will be displayed to you from Slackbot.

Writing our Slack Slash Command

Now, we need to set up an web endpoint for Slack to hit. Any server that is running PHP will do in this case. We've set it up at http://jamisonvalenta.com/slack-gif.php. Method: POST. (GET would be also work with our implementation). Our settings page looks like this:

Now, we just need to write the PHP file we want to hit.

Because PHP is my favorite option for quick one-off scripts like this—and it can be hosted pretty much anywhere—let's do this one in PHP.

However, you can write this in any language you like, so long as it can access the request and print to the page. Our slack-gif.php script looks like this:

<?php
if (! isset($_REQUEST['token']) || $_REQUEST['token'] !== 'your token value here') {
    exit('Invalid token.');
}
 
if (empty($_REQUEST['text'])) {
    exit('<https://giphy.com/search/rick-astley|You forgot to type a search string.>');
}
 
echo sprintf(
    "<https://www.google.com/search?&as_q=image&safe=images&tbs=itp:animated&tbm=isch&q=%s | Open Your `%s` GIF Search>",
    urlencode($_REQUEST['text']),
    $_REQUEST['text']
);

As you can see, I just ran a manual Advanced Image Search, extracted the search term, and replaced it with the value provided by the user, which Slack sends in the text key.

NOTE: It's important to note that Slack expects a specific syntax for its links in the form <https://alert-system.com/alerts/1234|Click here>. This is described on the Links section on their Incoming Webhooks page.

And with that little work, typing /gif thumbs up will provide you with a clickable link that takes you to an Advanced Image Search with a large number of people showing their appreciation for your hard work. It's easy now to grab the URL for one of these links and paste it into your Slack chat.

Cheers ~