Social Filter Jam

By

Share:

Hello! Dan R here.

This post comes from the world of the developer team. Despite what you think, every once in a while we like to take some time to speak in just plain old English instead of PHP or JavaScript. So before I start speaking in code again, I want to take the time to talk about an incredibly useful internal project we’ve been working on. It’s something that evolved over a year or so and we pretty much use every day. It’s called The Social Filter.

Photo Walls… They’re Everywhere

Our clients often ask us to create something called a “photo wall.” A photo wall is a neat way of displaying images taken by fans and users across different social media platforms, usually Instagram and Twitter.

There are 3 main pieces that comprise a standard photo wall:

  1. The APIs – In order to pull posts from different platforms, you need to plug into something called an API. The Twitter and Instagram APIs, for example, are what let sites use data from these platforms and display it for different purposes.
  2. The admin controls – Social media can be a dark, scary place. A solid photo wall platform needs a robust admin tool that gives the user control over the content being shown on their pages.
  3. The page to house the photos – This is the finished product that can be manipulated to appear across different sites, with different branding and aesthetics.

The Advent of The Social Filter

There are a number of solutions on the market to handle this type of work. However, each individual client is a special case and requires their own specific functionality. Not all off-the-shelf solutions are terribly cost effective, and we didn’t want to be restricted if we wanted to try something a little more weird.

In the beginning, a client would come to us with a photo wall project and we would build it by passing along and adapting same code from a previous one. This came with its own issues, and before long we realized that wasn’t a great way to do things.

To take the first step towards photo wall sanity, Jeff Hampton (our resident Tech Director) automated step 1 (the API step) and created a basic admin for us. This admin could easily turn on and off a “phirehose” that would collect tweets and Instagram posts and channel them through to the user-facing piece. This was a good stop-gap solution, but presented two new problems: 1) we still needed to spin up a new client facing admin each time we created a new photo wall, and 2) whenever we needed a new feature or there was a bug, problems would arise because Jeff is a very, very busy man and had the most comprehensive knowledge of the code.

After chugging along this way, we decided it was necessary to build this sucker the right way. The ultimate goal: automate the first two steps of The Social Filter process and build something simple enough that our developers could jump in and spin up a new instance. With these goals in mind, The Social Filter was born.

 

How Does it Work?

The Social Filter is built on WordPress (a platform we’re all thoroughly versed in) and runs on its own server to ensure that it can handle heavy traffic without crashing the client’s site. Creating a new photo wall is now as simple as heading into the WordPress admin and creating a new post. In WordPress we can specify what hashtags or users we want to track, specify test hashtags, create a login for our client facing admin, and customize the client facing admin using their logo.

In the background, WordPress starts a couple of programs to pull posts from Instagram and Twitter and makes a spot in the database for the new project. Published social posts then automatically populate in the admin where our clients can view and moderate what shows up on the site. The UI is simple and intuitive, so training new users is easy.

It looks something like this.

Through a series of iterations and the input from many Sanbornians, we jammed together a product that pretty much runs itself. This decreased the time it takes for us to build a new photo wall from about a week to roughly half an hour. This means we can focus less time on all the behind-the-scenes gears and more on making the photo wall itself look and animate beautifully.