Social Event Wall

Create a livestream of Twitter and Instagram pictures to be shown during your event.

I created this project while I was looking for a way to show twitter or instagram picutres being posted by guests on the big screen. There are multiple commercial solutions for this but most of them are quite costly. So with some helpfull guides on the interenet I was able to create something myself.

You'll need some basic html/css/javascript/php skills to modify this to your needs.

Features

• Shows logo's of your sponsors
• Show a live feed of pictures being posted by your guests
• Supports Twitter & Instagram
• Block guests that are misbehaving
• Automatically shows the next artist/band in your line-up
• Emoji support

Setup

1. In the assets folder change the background.png and headerLogo.png to fit your needs
2. Update configuration.php
   1. Fill in the instagram client id: http://instagram.com/developer/clients/manage/
   2. Fill in the twitter authentication info: https://dev.twitter.com/apps/
   3. Fill in the hastag you want to show
   4. optional: set the max amount of images you want to load and update the list of blocked users
3. Upload your sponsor images to the folder sponsors (make sure they are resized)
4. Fill in your line-up in nextShows.js

That's it, your social live stream should now be working!

Details

HTML

• socialwall.html: the page you'll show on the bigscreen. Page is divided in two, left will show sponsors, righ your social live stream

CSS

• layout.css: has some basic styling, mostly to center allign the sponsors images. Edit to fit your needs

PHP

• configuration.php: holds some configuration parameters
• getSponsors.php: scans the folder 'sponsors' for files and returns a json encoded list of filenames
• getInstagram.php: does a request to the Instagram api based on the hastag provided in configuration.php. Returns a json encoded list.
• getTwitter.php: does a request to the Twitter V1.1. api based on the hastag provided in confuration.php Returns a json encoded list.
• getBlocked.php: simple function that checks if a user is blocked, referenced from getInstagram.php and getTwitter.php

Both getInstagram and getTwitter check if the user is not blocked and if the max amount of images hasn't been reached before adding the picture.

Javascript

• refresh.js: this drives the entire page and does calls to other javascripts functions based on a timeout parameter. Twitter and Instagram pictures are rotated untill both lists are completed
• twitter.js: Has a function to retrieve data from getTwitter.php and one to show the next Twitter picture
• instagram.js: Has a function to retrieve data from getInstagram.php and one to show the next Instagram picture
• nextShows.js: holds a listing of stages for your event and a line-up for each one.

When doing changes to refresh.js and increasing the amount of calls to either Twitter or Instagram make sure to take into account the limitations, see Twitter and Instagram documentation.

References

Uses the twitter php api: https://github.com/J7mbo/twitter-api-php
Uses a php library to convert the emoji characters: https://github.com/iamcal/php-emoji/pulls

Final Stuff

I created this to help support a non-profit organisation that creates a musicfestival for young and local talent. You are free to use and edit this project anyway you like. However I would appreaciate it if you let me know if this was helpfull to you and let me know where and how you used it! You can follow me on Twitter and the organisation I volunteer for on Twitter and Facebook. I'ld appreciate a shoutout!

fyi: I haven't used this in real life yet, my event is later this year. In the meantime the event has long passed and we used it with great succes!