Facebook Fraud?

The creator of popular YouTube channel Veritasium takes a look at what happened when he used Facebook’s advertising to promote his page. The results are pretty brutal.

Spoiler alert… those likes you paid for and cherish so dearly… they’re pretty much all fake.

If you have ever even thought about purchasing advertising from Facebook, you should watch this…

The UX of Facebook’s New Like Button

Much of the discussion around the new Like button has centered on the removal of the thumbs up icon. And while that it is a major symbolic move, the real change from a UX perspective is the color.

If you didn’t already know how huge the Like button is, here’s some perspective – the button is viewed 22 billion times daily across more than 7.5 million websites. Massive.

But that huge number of impressions was happening next to a whole slew of other sharing buttons that have popped up from companies such as Twitter, LinkedIn, Pinterest, etc.

And because all of those other companies had simply followed Facebook’s lead, and their UX, all the buttons pretty much looked identical. Lazy users had no visual indication as to which button to click first. Not any more…

One look and it’s clearly a great UX move. A simple splash of color is all it took to differentiate the button from the rest and draw the user’s eye. I would love to know what kind of engagement bump they’re seeing after the new button rolled out late last month.

I’m guessing it’s only a matter of time until we see colored buttons from everyone.

Django and Testing Facebook Applications Locally (Port 8000)

If you’re developing a web application that allows uses to create an account, you’re probably allowing them to do so using Facebook. In order to provide this functionality, Facebook requires you to create an application on their developer portal and set a few basic parameters.

But rather than create one application for both local development and production, my preferred way is to create a second Facebook application specifically for dev. You’ll need to set a few parameters in the application’s config to get things working.

First in the Basic settings set the App Domains along with the Site URL:

Then in the Advanced set the OAuth redirect URIs:

Make sure to include the port you use in the various URLs / URIs. Django’s default is 8000.

And if you keep your application ID / secret as settings in your Django config and use Disqus-style settings, you can simply add the new values for your Facebook application to your dev config to override the default values.

Django Register with Oauth – Facebook

Now that you’ve read the overview / disclaimer, let’s dive into Facebook.

First off, ensure that you have registered your application with Facebook and have created the following in your settings file:

# https://developers.facebook.com/apps

view raw


hosted with ❤ by GitHub

1) Create the redirect URL

The first step in the oauth handshake is to redirect to Facebook with some application specific data in the URL including your application ID and redirect URL (where you want Facebook to send the user after they’ve approved / denied the application):

import urllib
from django.conf import settings
from django.core.urlresolvers import reverse
from django.core.context_processors import csrf
def get_authorization_url(request):
# URL to where Facebook will redirect to
redirect_url = urllib.quote_plus(settings.SITE_URL + reverse('register_facebook'))
# create a unique state value for CSRF validation
request.session['facebook_state'] = unicode(csrf(request)['csrf_token'])
# redirect to facebook for approval
url = 'https://www.facebook.com/dialog/oauth?' \
+ 'client_id=' + settings.FACEBOOK_APP_ID \
+ '&redirect_uri=' + redirect_url \
+ '&scope=email' \
+ '&state=' + request.session['facebook_state']
return url

view raw


hosted with ❤ by GitHub

2) Redirect to provider’s site

This url can now be used to redirect to Facebook (i.e. HttpResponseRedirect(url)):

3) Handle the response (approved or denied)

Once the user makes their choice to approve or deny, Facebook will redirect back to your redirect_url. You will need to verify the user approved the application:

def verify(request):
# Facebook will direct with state and code in the URL
# ?state=ebK3Np…&code=AQDJEtIZEDU…#_=_
# ensure we have a session state and the state value is the same as what facebook returned
# also ensure we have a code from facebook (not present if the user denied the application)
if 'facebook_state' not in request.session \
or 'state' not in request.GET \
or 'code' not in request.GET \
or request.session['facebook_state'] != request.GET['state']:
return False
return True

view raw


hosted with ❤ by GitHub

If any of the above tests fail, we can safely assume the user either arrived at this page directly (i.e. by typing in the URL) or they denied the application. Either way we don’t want to proceed and should redirect them to the start of the registration flow (i.e. HttpResponseRedirect(reverse('register'))).

4 & 5) Get an access token and the user’s profile

At this point the user has authorized your application but you don’t have actual access to their data yet. To get that you’ll need to request an access token. Notice that we’re saving the access token to the user’s session as we don’t want to request it more than once during the registration flow.

Once you have the access token, you can then make the request for the user’s profile data:

import urllib
import urllib2
import urlparse
import json
from django.conf import settings
from django.core.urlresolvers import reverse
def get_user_data(request):
data = {}
# if we don't have a token yet, get one now
if 'facebook_access_token' not in request.session:
# URL to where we will redirect to
redirect_url = urllib.quote_plus(settings.SITE_URL + reverse('register_facebook'))
# set the token URL
url = 'https://graph.facebook.com/oauth/access_token?' \
+ 'client_id=' + settings.FACEBOOK_APP_ID \
+ '&redirect_uri=' + redirect_url \
+ '&client_secret=' + settings.FACEBOOK_API_SECRET \
+ '&code=' + request.GET['code']
# grab the token from FB
response = urllib2.urlopen(url).read()
# parse the response
# {'access_token': ['AAAGVChRC0ygBAF3…'], 'expires': ['5183529']}
params = urlparse.parse_qs(response)
# save the token
request.session['facebook_access_token'] = params['access_token'][0]
request.session['facebook_access_expires'] = params['expires'][0]
# set the graph URL using the token we just fetched
graph_url = 'https://graph.facebook.com/me?' \
+ 'access_token=' + request.session['facebook_access_token']
# get the user's data from facebook
response = urllib2.urlopen(graph_url).read()
user = json.loads(response)
# get their photo
# is_silhouette is true if the user has not uploaded a profile picture
graph_url = 'https://graph.facebook.com/me/picture?' \
+ 'type=large' \
+ '&redirect=false' \
+ '&access_token=' + request.session['facebook_access_token']
response = urllib2.urlopen(graph_url).read()
picture = json.loads(response)
# get the user's info
data['user_id'] = user['id']
data['username'] = user['username']
data['email'] = user['email']
data['full_name'] = user['first_name'] + ' ' + user['last_name']
data['first_name'] = user['first_name']
data['last_name'] = user['last_name']
data['timezone'] = user['timezone']
# ensure the user has uploaded a picture
if not picture['data']['is_silhouette']:
data['picture'] = picture['data']['url']
data['picture'] = ''
return data

view raw


hosted with ❤ by GitHub

That’s it! You can now use the user’s profile information to pre-fill a registration form, perhaps skipping over fields where you already have a required value such as an email address or first and last name. Just be sure to save their Facebook ID along with their profile so you can use it validate them in the future. You should also save the access_token and expires values so that you can make future requests to the API for this user or refresh the access token when it has expired.

In a future post I’ll be looking at how to detect an already registered user as well as provide a login with this provider button.