Facebook “Like” Button 2012/09/10

About 6 months ago, I got approached by [Bram Biesbrouck] from Beligum. He asked me if I wanted to help with one of his endeavors. He got into this organisation that aims to get more students interested in studying computer sciences. With a big fair coming up, they where searching for a way to increase their amplification.

The Game by [Bram]

The goal was simple: Be present in a cool way on the fair, and increase the amount of people who like the page on Facebook. The main event we ended up with was totally done by [Bram]. He build this game where 4 people get a point-and-shoot camera and then got asked a question. The right answer (A, B, C, D) would be answered by photographing the QR style code  on the right side (A, B, C, D) of a 1m by 1m cube.

The image would then be transferred wirelessly by the Eye-Fi SD card that was inside the camera. The computer would show the picture on the screen and visualize how it grabs it’s data from a photo. Since the camera’s where matched with the people’s facebook accounts, the winner’s photo would be uploaded to facebook together with the text:

“I’ve just played the ITisCool game and won 2 Cinema Tickets”

You must admit, 2 cinema tickets for taking a picture is not bad!

The Facebook Button

In addition to the game we also had 2 laptops that were functioning as Facebook Kiosks. (The rest of the booths at the fair were pretty dull, so I guess those kids where happy they could just check their Facebook feeds for a second.) People used it of and on during the whole weekend.

So the opportunity we saw was this: if we can provide a cool way for people to like our page when they are already logged in, we can increase the number of likes in a positive way. With this I mean that we could have said: “like or you can not use the kiosk”. But that would be negative stimulation! Something we wanted to avoid all together.

Instead we ended up with 2 Massive Badass Buttons that, whenever pressed, would share our page on the FB wall of the user and afterwards provide them the opportunity to like the page.

I already see people blinking their eyes and saying “sharing isn’t liking!”. And you’re right! However, the reason we did it like this is because Facebook doesn’t allow you  to “like” with anything else than their own virtual button. With that they want the user to be aware of their action. That being said we didn’t want to break any rules there.

The Setup

The Browser

Since we didn’t get any decent computers from the organisation we ended up using 2 spare laptops we had lying around. I made 2 bootable USB sticks with a Xubuntu install on it.
When logged in, the panels got killed  and an Opera browser would launch in Kiosk mode. The homepage got reset automatically whenever the computer was inactive for more than 2 minutes.

I used several browsers to find which one had the best kiosk mode and Opera just nailed it for me. It have everything I wanted and more. Some things where: a special kiosk bar with  big buttons, hiding of the URL bar, not able to exit kioskmode, password protection on exit, automatic reset of page, … To find all the options you have for Opera in kioskmode, check this page. I didn’t find a browser that comes anywhere close to Opera when it comes to kiosk modes. I’ve checked: Chrome, Chromium, Opera, Firefox, ReKonq,…

The Listen Script

So, how on earth do you make that thing listen to an action of an external device? I didn’t know either. Some searching on the internet however learned me that Python made it really easy.

I could start the Opera browser from my commandline by importing the os libraries in Python. It enabled me to launch any program by using:

os.system(“AppToLaunchHere”)

Taken that there isn’t another instance of that browser started I could use the “webbrowser” library of python to get the browser i just started. Since I used opera that resulted in:

brwsr = webbrowser.get(‘opera %s’)

And here comes the fun part of the webbrowser library: I know which browser I want to manipulate and I know how to talk to that browser, therefor I can just call:

brwsr.open(‘linkGoesHere’)

And the selected Opera browser will just go to that link. Next i spend a little time looking at how facebook liked and shared stuff. The URL we ended up using was this one:

http://www.facebook.com/dialog/feed?app_id=40591661608xxxx&link=http://www.facebook.com/ITiscool.be&picture=http://www.itiscool.be/images/logo-itiscool.jpg&name=IT%20is%20Cool!&caption=Trust%20Me,%20IT%20Is%20Cool!!&description=Etudier%20dans%20le%20monde%20IT%20/%20Studeer%20in%20de%20IT%20wereld.&redirect_uri=http://vdnkr.be/ITiscool.php

Now let me break that up for you:

http://www.facebook.com/dialog/feed?
app_id=40591661608xxxx
&link=http://www.facebook.com/ITiscool.be
&picture=http://www.itiscool.be/images/logo-itiscool.jpg
&name=IT%20is%20Cool!&caption=Trust%20Me,%20IT%20Is%20Cool!!
&description=Etudier%20dans%20le%20monde%20IT%20/%20Studeer%20in%20de%20IT%20wereld.
&redirect_uri=http://vdnkr.be/ITiscool.php

So, we want the button press to take us to the facebook dialog boxes.
We give them our app_id, the link to share, the picture to put next to it, the name of the site, the caption underneath the name and a description. Then we redirect them to a script on one of my website that basically just redirects them again but this time to a landing page where they can like our page. So: sharing and liking.. all in one.

We executed this code whenever the word “like” was sent over serial. The final code looked like this:

import serial
import webbrowser
import os
PORT = ‘/dev/ttyUSB0′ # if arduino duemilanove: ttyUSB0, ttyUSB1,.. If uno: ttyACM0, ttyACM1

ser = serial.Serial( PORT , 9600)
os.system(“opera -k -kioskbuttons -kioskresetstation -nochangebuttons -nocontextmenu -nodownload -nomail -nomaillinks -nomenu -nominmaxbuttons -noprint -nosave -nokeys &”)
brwsr = webbrowser.get(‘opera %s’)

while 1:

msg = ser.readline()
if “like” in msg: brwsr.open(‘www.linkGoesHere.com’)

The scripted we used in the redirect page was really just this:

<?php
header(‘Location: http://www.facebook.com/ITiscool.be/app_103778826383709′);
?>

The Button

So I used an arduino to control the button. Reason for that is that it’s simple and fast to make it. I admit it is overkill, but since we were only going to use it 1 weekend I didn’t feel the need to make a special dedicated cirquit for it.

To give some idea of what I wanted I started making a mockup in SolidEdge. Since I’m an engineering student I can have a free licence for a year anyway. I really like SolidEdge, because despite his flaws, it’s really intuitive. I’m sure though that SolidWorks is just as intuitive, but I’ve learned to work with SolidEdge when I was studying at GroupT in Leuven.

The big transparent hole on the left was supposed to look like a giant button dome. I searched the net for a dome that big, but instead oft the 150mm the button dome with the biggest diameter was 120mm only. I ended up buying them in germany at arcadeshop.

We made the button fairly big in height so it would stand up on a table. I asked my dad how he would do it and we ended up with using what we had lying around:

  • First we made the front and the back panel. making the half circles with a fretsaw.
  • Then we secured wooden panels to the straight edges.
  • The  half circles where filled up with foam.
  • Then we wrapped the sides with linoleum that we turned inside out.
  • We put some silicone style “kit” against the wholes and sides to clean it of.
  • And ended with spraying them 2 with a normal high gloss graffiti aerosol.

Some pictures:

 

woutervddn
TechProjectMasters